Forem: Emmanuel Umeh

Understanding Stack Memory and Heap Space in Java.

Emmanuel Umeh — Mon, 11 Mar 2024 09:59:58 +0000

In the Java ecosystem, The JVM which stands for Java Virtual Machine is what enables java codes machine readable for interpretation. Now when it comes to the memory management, the JVM has two main memory storage, which are the stack and heap.
The stack and heap are use extensively in data structures and algorithms for managing memory allocation.
In this tutorial guide, we'll explain what the stack and heap is all about, differences and code examples to illustrate them.

What is Java Stack Memory?
Generally, stack represents LIFO(Last In First Out) order which means the last item inserted or added is the first item to be removed when accessing the stack. whenever a method is invoked, it is directly pushed into the stack and a new block of memory is allocated to the stack memory. This new block will store values of the variables used in the method. In Java, stacks memory are used for static memory allocation. Java stack stores method calls and local variables in the memory. Stack memory size is very small compared to the Heap memory.

What is Java Heap Space?
Java Heap space are large, open space memory used in java runtime. whenever we create or reference an object, it is usually created in the heap. it memory stores instance variables, objects and JRE classes.

Differences Between Stack Memory and Heap Space in Java
The Stack and Heap has different similarities both in size and efficiency. In this article we'll outline the core differences between the stack and Heap space in java.

In the memory management, Stack follows the LIFO order while the Heap does not follows any order, as it is a dynamic data structure and it's space complexity tends to be dynamic, allowing for flexible allocation and deallocation of memory.
The Stack is used for a single thread of execution while Heap is dynamic and robust is used by the entire application.
Whenever an object is invoked or created, it's stored automatically into the Heap memory, while the stack memory contains the local variables and reference to the new object created.

How do Stack and Heap Works?
Here, we use a code snippet to explain how the stack and heap works.

class Calculator {
    int num;
    public int add(int n1, int n2) {
        int r = n1 + n2;
        return r;
        // System.out.println("in add");
    }
}

public class Stack {
    public static void main(String[] args) {
        int data = 10;


        int n1 = 4;
        int n2 = 3;

        Calculator obj = new Calculator();
        Calculator obj1 = new Calculator();
        int result = obj.add(n1, n2);

        System.out.println(result);
        System.out.println(obj.num);
        System.out.println(obj1.num);
    }
}

The diagram below explains how the stack and heap memory are related with the above program

Now let's briefly explain each process in the diagram:

In the stack memory we have the main and the add method. which the main contains variables with their keys and values: data which contains the unused variable declared, obj and obj1 which are two instances of the Calculator class created in the stack and the result is represent the output of the given program. while the add method contains the n1, n2 respectively.
Now the obj, obj1 are referencing to the object in the heap. where the exact memory for the Calculator objects is allocated in the heap space. All these referencing(IDs or addresses) employs or allows a way to access these objects properties and method in a more accessible way.
In the heap memory side, it contains a num = 10, if you look at that num = 10 in our code that has int num;, the int num; is an instance variable. Here heap stores the instance variable in the heap memory.
In the heap memory, It also has an add() method which will store the executable code for add() function. When obj.add(n1, n2) is called in the main method, it accesses this add() method in the heap memory

Conclusion
Stack and Heap memory are great memory allocation when dealing with algorithm problem, understanding how they work interchangeably will help foster the usage between them. What else do you know about stack and Heap let's us know in the comment section.

Automating ETL Processes with Node.js

Emmanuel Umeh — Mon, 15 Jan 2024 19:24:58 +0000

The Extract, transfer and load(ETL) processes is the process of extracting, transforming and loading data from multiple source into a centralized container known as data warehouse. This data warehouse is what serve as the repository where all the exchanged and integrated data are been stored and kept for analysis.

By automating these processes, Node.js, a scalable JavaScript runtime language, made it easier for developers to possibly automate those processes with sequential lines of code, thereby creating efficient data pipelines that streamline data integration and analysis.

In this tutorial guide, we'll explore how to efficiently automate ETL processes with Node.js for efficient data pipelines.

Prerequisites:

To efficiently automate ETL processes with Node.js for efficient data pipelines, the following prerequisite is necessary:

Nodejs

Ensure Node.js is installed on your local machine.

MongoDB

Make sure MongoDB is installed locally into your machine.

Csv-parser

Install the csv-parser module, A tool and library for processing CSV data during ETL process

Initialize Node.js Application

Open a terminal, create a directory for the project and also Initialize the Node.js project by running the following command:

npm init --y

Installed required dependencies:

npm install csv-parser mongodb dotenv

Create a data.csv file inside the root directory and add the following text below:

NAME,CAREER
REV ONUCHE, SOFTWARE DEVELOPER,
Damilola Daramola, SOFTWARE DEVELOPER,
David Herbert,TECHNICAL WRITER,
WIsdom Nwokocha,TECHNICAL WRITER

Now, let's break down the ETL processes into phases:

Extract Phase

In the extraction phase, this is the initial phase where raw data is automatically extracted and processed from the data.csv file using the CSV library for easier extraction.

Below are the code snippets with breakdowns to help you understand the full concept of this code:

Setup File System Module(FS):

Initiates the file system module, by importing the fs module. The fs which is known as the file system is a built-in Node.js module that provides file-related operations.

const fs = require('fs');

MongoDB Setup:

Import the MongoClient class from the MongoDB Node.js driver.

const { MongoClient } = require('mongodb');

CSV Parser Setup:

Import the csv-parser module using the code snippet below.

const csvParser = require('csv-parser');

Import the CSV Data Path:

Ensure you created a data.csv file in your project.

const csvDataPath = 'data.csv';

Setup Environment Configuration:

This automatically configure environment variables using the dotenv module.

require('dotenv').config();

Create an extractData function:

Create a function extractData() that will extract data from the data.csv file

const extractData = (csvDataPath) => {
  return new Promise((resolve, reject) => {
    const data = [];

    fs.createReadStream(csvDataPath)
      .pipe(csvParser())
      .on('data', (item) => {
        data.push(item);

      })
      .on('end', () => {
        resolve(data);
      })

      .on('error', (error) => {
        reject(error);
      });
  });
};

Here is what the code explains below:

const extractData = (csvDataPath) => { ... }: This declares a function named extractData using an arrow function. It takes a parameter, csvDataPath, which is the path to the CSV file.

return new Promise((resolve, reject) => { ... }): These returns a new Promise function. it handles asynchronous operations.

const data = []: This create an empty array named data.

fs.createReadStream(csvDataPath): The createReadStream function reads data from the csvDataPath.

.pipe(csvParser()): The pipe method primarily connects the readable stream of the csvDataPath and pass out the output to the csv-parser module for further processing.

.on('data', (item) => { ... }): This event handles each row of data parsed from the CSV file. The data.push(item) function appends the item to an array called data.

.on('end', () => { ... }): This event handler is triggered when the end of the CSV file is reached. It resolves the promise with the populated data array.

.on('error', (error) => { ... }): This event handler , handles an error that might occur during the file reading or parsing process.

Transform Phase

In the transform phase, this is where the extracted data is refined and structured.

// Transform Phase
const transformData = (csvData) => {
  return csvData.map((items) => ({
    name: items.NAME.trim(), // Trim whitespace from the Name valu
    career: items.CAREER.trim(),  // Trim whitespace from the career value
  }));
};

Here is what the code explains below:

const transformData = (csvData) => { : This declares a function transformData that takes a parameter csvData.

return csvData.map((items) => ({}): The map function iterates each item in the all csvData array.

name: items.NAME.trim(): This extracts the Name property from the data.csv file in each item, together with .trim() that trims out any whitespace.

career: item.CAREER.trim(): This also extracts the Career property from the data.csv file each item.

Load Phase:

In the load phase, this is where the extracted data is loaded into the mongoDB database.

Add a .env file:

Create a .env file in the root directory and add your mongoDB url.

MONGODB_URL='YOUR_MONGODB_URL'

Set Up the MongoDB connection URL from environment variables:

Locate the MONGODB_URL using the process.env.YOUR_MONGODB_URL_NAME.

const dbUrl = process.env.MONGODB_URL

Set the MongoDB connection string:

This code uses template literals to call dbUrl instead of rewriting process.env.MONGODB_URL again.

const connectionString = `${dbUrl}`;

Set the database name:

const databaseName = process.env.MONGODB_DATABASE || 'etldb';

This code sets the databaseName variable by checking if the MONGODB_DATABASE environment variable is defined. If defined, it uses that value; otherwise, it set defaults to etldb.

Set the collection name:

This creates a collection name users in the mongodb database.

const collectionName = 'users';

Create a LoadData Function:

Create an async loadData() function with the following parameters: transformedData, databaseName, collectionName, connectionString.

const loadData = async (transformedData, databaseName, collectionName, connectionString) => {
  const client = new MongoClient(connectionString, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  try {

    await client.connect();
    console.log('Connected to MongoDB successfully.');

    const db = client.db(databaseName);
    const collection = db.collection(collectionName);

    const response = await collection.insertMany(transformedData);
    // console.log("RESPONSE", response);
    console.log(`${response.insertedCount} CSV Data Successfully loaded to MongoDB.`);

  } catch (error) {
    console.error('Error Connecting MongoDB', error);
  }

  await client.close();
};

Call the extractData() to Initiates the ETL process:

extractData(csvDataPath)
  .then((rawData) => {
    const transformedData = transformData(rawData);
    return loadDataToMongoDB(transformedData, databaseName, collectionName, connectionString);
  })
  .catch((error) => {
    console.error('Failed to extract or load data into MongoDB:', error);
  });

This code initiates the ETL process by extracting it, transforming it and also loading it to the MongoDB database:

Entire Code:

const fs = require('fs');
const csvParser = require('csv-parser');
const { MongoClient } = require('mongodb');
const csvDataPath = 'data.csv'; 

require('dotenv').config();

// Extract Phase

const extractData = (csvDataPath) => {
  return new Promise((resolve, reject) => {
    const data = [];

    fs.createReadStream(csvDataPath)
      .pipe(csvParser())
      .on('data', (item) => {
        data.push(item);

      })
      .on('end', () => {
        resolve(data);
      })

      .on('error', (error) => {
        reject(error);
      });
  });
};


// Transform Phase
const transformData = (csvData) => {
  return csvData.map((items) => ({
    name: items.NAME.trim(), // Trim whitespace from the Name value
    career: items.CAREER.trim(),  // Trim whitespace from the career value
  }));
};


const dbUrl = process.env.MONGODB_URL;

const connectionString = `${dbUrl}`;
const databaseName = process.env.MONGODB_DATABASE || 'etldb'; 
const collectionName = 'users'; 

// Load Phase
const loadData = async (transformedData, databaseName, collectionName, connectionString) => {
  const client = new MongoClient(connectionString, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  try {

    await client.connect();
    console.log('Connected to MongoDB successfully.');

    const db = client.db(databaseName);
    const collection = db.collection(collectionName);

    const response = await collection.insertMany(transformedData);
    // console.log("RESPONSE", response);
    console.log(`${response.insertedCount} CSV Data Successfully loaded to MongoDB.`);

  } catch (error) {
    console.error('Error Connecting MongoDB', error);
  }

  await client.close();
};

extractData(csvDataPath)
  .then((rawData) => {
    const transformedData = transformData(rawData);
    return loadData(transformedData, databaseName, collectionName, connectionString);
  })
  .catch((error) => {
    console.error('Failed to extract or load data into MongoDB:', error);
  });

Run the Server:

Navigate to the terminal and start the server using this command: Make sure you have nodemon installed in your local machine.

nodemon etl.js

Your server is now running locally..

Response:

Now it gives a response with the amount of data's added into the MongoDB database.

Check your MongoDB:

Check your mongoDB to automatically see the data loaded successfully to the MongoDB.

Conclusion:

ETL process has been a building block for companies and enterprise, and it is the best way for companies to transform those data into more readable streams or format.

Furthermore, it general use case is mostly in the data warehousing- where data from various sources are been combined into a database for business analysis and customers insights.

As we have come to the end of this tutorial what other pattern do you use to automate ETL processes in Nodejs? Let's us know in the comment section.

Understanding Stack and Queues in JavaScript

Emmanuel Umeh — Tue, 21 Nov 2023 08:56:46 +0000

Stacks and Queues are commonly used data structures for extensive computer science and software development which depict a clear horizon for efficient data management, algorithm design, and task scheduling.

In this article, we will learn more about the principles and use cases used in the stack and queues.

What is Stack?

A stack is a data structure where the most recently added element can be accessed and removed. Think of stacks of nested coffee cups. You'll notice to access or remove the last coffee cup, you need to remove others from the top. This is where the principle of LIFO( Last In, First out) comes in. The LIFO principle dictates that the last element added to a stack would be the first to be removed when accessing the stacks. Its time complexity is denoted by a constant O(1). This illustration depicts a stack of cups.

Use Cases

Stacks are extensively used in memory management. For instance, in the local storage of application data, stacks efficiently store and manage data. Additionally, it is also used for undo features in software application, the undo features of an application often relies on stacks to track and update user actions.

Methods

Below are the methods that occur in the operations in stacks.

Push:

The push operation adds an element to the top of the stack.

Pop:

The pop operation removes and returns the element from the top of the stack.

Peek (or Top):

The peek operation returns the element at the top of the stack without removing or modifying it.

isEmpty:

The isEmpty operation checks whether the stack is empty. It returns true if the stack is empty and false otherwise.

Concept

Here, we'll build a shelve that contains different types of coffee cups.

Function

Let's define a function of Stack and also initialize this.stack = [] as an empty array.

function Stack() {
    this.stack = [];
  }

Push

Define a this.push function to initialize and push items into the stack.

 // Function to push a value onto the stack
    this.push = function(coffeeCup) {
      this.stack.push(coffeeCup);
    };

Pop

Define a this.pop function to initialize and push items into the stack.

 // Function to pop a value onto the stack
    this.pop = function() {
      this.stack.push();
    };

Peek

Define a this.peek function to retrieve the top item without removing it.

      this.peek = function() {
      return this.stack[this.stack.length - 1];
    };

IsEmpty

Define a this.isEmpty function to check if the stack is empty.

this.isEmpty = function() {
      return this.stack.length === 0;
    };

Place all the code together

Put all the code we defined together to see what the whole flow looks like.

function CoffeeStack() {
    this.stack = [];

    // Function to push a value onto the stack
    this.push = function(coffeeCup) {
      this.stack.push(coffeeCup);
    };

 // Function to pop a value onto the stack
    this.pop = function() {
      this.stack.push();
    };

 // Function to pop a value onto the stack
       this.peek = function() {
      return this.stack[this.stack.length - 1];
    };

// Function to check if a stack is empty
this.isEmpty = function() {
      return this.stack.length === 0;
    };

  }

Let's test the Stack function.

Copy this code and place it outside the CoffeStack function.

let coffeCups = new CoffeeStack()
 // Pushing coffee cups onto the stack
  coffeeCups.push("Standard mug ");
  coffeeCups.push("Flat white cup");
  coffeeCups.push("Cappuccino Cup");

  // Peeking at the top coffee cup
  console.log("Top Coffee Cup:", coffeeCups.peek()); // Output: Top Coffee Cup: Cappuccino Cup

  // Popping a coffee cup from the stack
  let removedCup = coffeeCups.pop();
  console.log("Removed Coffee Cup:", removedCup); // Output: Removed Coffee Cup: Cappuccino Cup

  // Checking if the stack is empty
  console.log("Is the stack empty?", coffeeCups.isEmpty()); // Output: Is the stack empty? false

Queues

Queues are data structures that allow the First In, First Out (FIFO) principle. The FIFO principle dictates that the element that is added first is the one to be removed first. Queues share similar methods with Stack but the main distinction lies in the order or pattern of removal. Stack uses the Last In, First Out (LIFO) principle while queues make use of the First In, First Out (FIFO) principle to manage elements in a specific data structure.

Use Cases

Queues are generally used in shared printers. For instance, multiple users may send print jobs to a shared printer and during the whole process, the printer prints orderly as every user sends theirs.

Methods

Below are the queue methods used in everyday scenarios.

enqueue:

Adding or inserting elements to the top of the queue.

dequeue:

Removing elements from the top of the queue.

Peek (or Top):

The peek operation returns the element at the top of the queue.

isEmpty:

The isEmpty operation checks whether the queue is empty. It returns true if the queue is empty and false otherwise.

Concept

In the queue, we'll build a VehicleQueue that ordinates the FIFO principle.

Function

Let's define a function of VehicleQueue and also initialize queue = [] as an empty array.

function VehicleQueue() {
    const queue = [];

  }

Enqueue

Define an enqueue function to add elements using the queue.unshift(element) unshift method which adds at the top of the queue.

   // Function to push a value onto the stack
   function enqueue(element) {
      queue.unshift(element);
    }

Dequeue

Define a dequeue() function to remove elements using the queue.pop() pop method which removes elements at the top queue.

    // Function to push a value onto the stack
     function dequeue() {
      queue.pop();
    }

Peek

Define a peek function to retrieve elements from the front of the queue without removing the element.

  // Function to peek a value into the queue
    function peek() {
      return queue[queue.length - 1];
    }

IsEmpty

Define a isEmpty() that checks if the queue is empty.

   function isEmpty() {
      return queue.length === 0;
    }

Place all the code together

function VehicleQueue() {
  const queue = [];

  function enqueue(element) {
    queue.unshift(element);
  }

  function dequeue() {
    queue.pop();
  }

  function peek() {
    return queue[queue.length - 1];
  }

  function isEmpty() {
    return queue.length === 0;
  }

  return { enqueue, dequeue, peek, isEmpty };
}

Let's test the Queue function.

Copy this code and place it outside the Queue function.

const myQueue = VehicleQueue();
myQueue.enqueue("volvo");
myQueue.enqueue("volvo");

console.log("Peek:", myQueue.peek()); // Output: car1
myQueue.dequeue();
console.log("Peek:", myQueue.peek()); // Output: car2
console.log("Is Empty:", myQueue.isEmpty()); // Output: false

Conclusion

In the context of using stacks and queues in our article, I hope it helps you understand the use cases and principle underlying the breakdown of some certain processes. Moreover, how can you approach explaining stacks and queues, and are there any other use cases you would consider? Let us know in the comment section.

How To Create A Custom Hooks In React.

Emmanuel Umeh — Wed, 08 Mar 2023 22:52:51 +0000

Custom hooks are reusable functions used for stateful logic. A custom Hook is a JavaScript function whose function starts with ”use”.

In this tutorial, we will learn how to "how to create a customhooks in react"

Prerequisite
Before we begin, these are technologies you should be familiar with and have installed on your local machine to follow up these guides:

Nodejs v18+
React Knowledge

In this tutorial, we will build a simple e-commerce store that fetches data from FakeStoreAPI

Let's start by running this in our terminal.

Open your terminal and run
npx create-react-app reactapp
Navigate to the folder
cd reactapp
Run
npm start

Now our app is running locally, let's get started by:

Creating a customhooks folder

Inside the customhooks folder create a Usefetch.js file and input this code.

import { useState, useEffect } from "react";

 const Usefetch = (url) => {
   const [images, setData] = useState([]);

   useEffect(() => {
     fetch(url)

       .then((res) => res.json())
       .then((images) => setData(images));
   }, [url]);

   return [images];
 };

 export default Usefetch;

Now create a imageHolder.js file and input this code.

 import React from "react";

 const imageHolder = () => {

   return (
     <>
       {
         images.map((item) => {
           return <p key= {item.id}>
              <img src={item.image}/>
             <h4>{item.title}</h4>
             <h1>{item.price}</h1>
             </p>
         })}
     </>
   );

 };

 export default imageHolder;

Now let's import our useFetch custom hooks into our ImageHolder.js file.

 import React from "react";
 import Usefetch from "../customhooks/Usefetch";

 const imageHolder = () => {

   // Fetching images from fakestoreApi
   const [images] = Usefetch("https://fakestoreapi.com/products");

   return (
     <>
       {
         images.map((item) => {
           return <p key= {item.id}>
             <img src={item.image}/>
             <h4>{item.title}</h4>
             <h1>{item.price}</h1>
             </p>
         })}
     </>
   );

 };

 export default imageHolder;

Now let's import the ImageHolder into our App.js file

 import React from "react";
 import ImageHolder from "./ImageHolder";

 function App() {

   return (
     <div className="">
       <ImageHolder />
       </div>

           )

   }
 export default App;

Conclusion
Custom hooks are reusable functions that aid code reusability. I can say this is the best hack ever, react developers should know when creating a large or small project.

Thanks for reading.