DEV Community: Yusuf Mubaraq

Why GraphQL is Gaining Adoption

Yusuf Mubaraq — Mon, 22 Sep 2025 01:29:31 +0000

Introduction

In the early days of web development, APIs enabled dynamic applications, yet they eventually became a source of significant challenges. As modern applications continue to grow in complexity, developers face mounting challenges in moving the right data between clients and servers quickly and efficiently. The introduction of REST (Representational State Transfer) APIs over two decades ago simplified how systems communicated by organizing resources into clear endpoints and using standard HTTP methods.

The REST API is a widely accepted convention for building web services. It is lightweight, fast and language-agnostic. But it isn't without its problem. A major one is over-fetching and under-fetching: clients may end up retrieving more information than what is required.

For example, suppose you call the /users endpoint to get a list of users. This may return additional information such as the user address and email which is not part of your request. There are scenarios where a single API call does not return enough data, which in turn leads to the invocation of more API calls.

REST APIs also lacked a schema and type system; clients were often unaware of the kinds of data that would be returned from the endpoints, which resulted in multiple rounds of communication between the frontend and the backend. This had long been a major pain point for developers until the unbelievable happened. The introduction of GraphQL.

What is GraphQL?

Imagine you're at a party where the menu says, "serve yourself". Here, you have the freedom to choose whatever meal type and quantity you're interested in. This is the exact idea behind GraphQL. The Graph Query Language, developed by Facebook was launched internally in 2012 and became open-sourced in 2015. A powerful query language for APIs, unlike REST, that allows you to request the specific data you need.

It gives power to the client to decide on what information it needs. GraphQL is language-agnostic, meaning it doesn't depend on the programming language you use to implement it.

Let's take a look at an example of how to fetch data from a GraphQL server:

query GetPosts {
  posts {
    id
    title
    content
  }
}

In the example above, the query keyword tells GraphQL that you're sending a read request, while the GetPosts is just the name given to the query. Inside the query, the root field of posts tells the server what top-level piece of data you want to fetch. Inside the post object, you specified the exact type of data you want it to return which are the id, title and content. This returns the below result

{
  "data": {
    "posts": [
      {
        "id": "1",
        "title": "Getting Started with GraphQL",
        "content": "GraphQL is a query language for APIs and a runtime for    executing those queries."
      },
      {
        "id": "2",
        "title": "Understanding Queries",
        "content": "A query in GraphQL lets you ask for exactly the data you need."
      }
    ]
  }
}

The above returns the exact data you requested. This is the beauty of GraphQL, it doesn't go above or below the specified instructions.

GraphQL Building Blocks

There are few terms you'll often come across and use while working with GraphQL. These are:

Schema and Types
Queries and Mutation
Resolver

Schema and Types
A schema in GraphQL is like a container that houses all the information your API can provide. Inside that container are fields, and each field is defined by a type that describes the shape of the data.

Query and Mutation
These are used to fetch data from the server. Query never change data; they only return what the schema allows. Mutation on the other hand, is similar to Create, Update, and Delete operation in REST API. While query only read data, mutations allow you to make changes. Let's check out example below:

//Query Example

type Query {
  posts: [Post]
}
//creates a Query type with one field, posts, which returns a list of Post objects.

//Mutation Example

type Mutation {
  language(id:ID): Language
}
//It creates a Mutation type with one field called language.
//The field takes an argument id of type ID and returns a Language object.

Resolver
Resolvers play a key role in handling the logic for retrieving the data requested by a client. Each resolver function corresponds to a specific field in your GraphQL schema, deciding how and where to fetch that field’s data.

const resolvers = {
  Query: {
    posts: () => {
      return [
        { id: 1, title: "First Post", content: "Hello World" },
        { id: 2, title: "Second Post", content: "GraphQL is awesome!" },
      ];
    },
  },
};

//Here, the posts resolver runs whenever a client queries for posts, and it returns an array of post objects.

Benefits of GraphQL

Avoids Over-fetching and Under-fetching
GraphQL solved a major problem faced by developers before its arrival. It ensured the API consumer only ask for what they need instead of getting a huge bulk of data, which not only reduce the payload size but also makes the application faster.

Strongly Typed
GraphQL is strongly typed, which means every piece of data in your API has a clear, predefined type. This makes it easier for clients to know the exact type of data they'll get back.

Realtime capabilities
GraphQL isn’t limited to just fetching or updating data, it can also handle Realtime updates through a feature called subscriptions. A subscription is similar to query or mutation but its used to listen to real-time events. For example, you're building a chat app, with subscription, your client can listen for new messages or notifications instantly.

Limitations of GraphQL

GraphQL is a powerful query language for APIs, offering flexibility and efficiency in data fetching. However, it comes with certain limitations that developers should consider when deciding its suitability for a project.

Difficult Optimisation
The fact that GraphQL gives clients the power to define and shape data makes caching and optimising queries difficult. Unlike REST, where each endpoint has a predictable response size, GraphQL queries can vary widely in complexity.

The N+1 Problem
The N+1 problem in GraphQL happens when your server has to make one initial request to fetch a list of items, and then an additional request for each item in that list to get related data. For example, if you query for a list of posts along with the author of each post, the server might first run one query to get all the posts and then run another query for each post to fetch its author. As the number of posts grows, the number of database calls increases which can quickly lead to serious performance issues if not optimised.

Conclusion

GraphQL has transformed how developers build and consume APIs by solving long-standing problems like over-fetching, under-fetching, and rigid endpoints. This matters today because modern applications demand faster performance, and a better developer experience. Its rise also connects to broader industry trends, such as the shift toward microservices, the growth of frontend frameworks that need efficient data fetching, and the push for real-time capabilities in web and mobile apps. Although REST APIs are still the most widely used, GraphQL has also been adopted by a growing number of big tech companies such as Netflix, GitHub, Shopify, and others, showing its increasing relevance and impact on the way modern APIs are designed.

Express and TypeScript: How to Set Up Your Project

Yusuf Mubaraq — Sat, 31 May 2025 11:40:37 +0000

Express is a popular framework for building web servers with Node.js. TypeScript, on the other hand, helps you write cleaner and safer code by adding static types to JavaScript.

In this article, you'll learn how to set up a basic Express project using TypeScript, step by step.

1. Choose Your IDE

You can use any IDE (Integrated Development Environment) you prefer. In this tutorial, I’ll be using Visual Studio Code (VS Code).

2. Install TypeScript

Open your terminal and run the following command to install TypeScript as a development dependency:

npm install -D typescript

Once it's installed, initialize a TypeScript configuration file with:

npx tsc --init

This will generate a tsconfig.json file in your project, which lets you customize TypeScript settings.

3. Configure the tsconfig.json File

The tsconfig.json file lets you customize how TypeScript works in your project. Open the file, and look for the compilerOptions section. Inside it, find the outDir option (you can search for the word "Emit" to locate it faster). Uncomment the outDir line and set it to "dist" like this:

You can name the folder anything you like, but dist (short for "distribution") is the common convention for compiled output. Once you’re done with the configuration, run the following command in your terminal:

tsc

You won’t see any message in the terminal, but a dist folder will be created. Inside it, you'll find an index.js file,this is the JavaScript version of your TypeScript code. To test if everything is working correctly, create a new TypeScript file and write some code in it. I’ll show you how below.

I created file named index.ts and added a simple line of code that includes a string with an explicit type. Then, I ran npx tsc in the terminal to compile the code. This generated a dist/index.js file, where the TypeScript code was successfully compiled into plain JavaScript.

4: Enable Strict Type Checking (Optional but Recommended)

To make your code safer and catch potential bugs early, it’s a good idea to enable a few strict type-checking options in the tsconfig.json file.

Search for the Type Checking section and uncomment the following options:

"noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "noUnusedLocals": true, "noUnusedParameters": true

Here’s what each of those options does:

noImplicitAny: Forces you to explicitly define types for variables and function parameters. If you don’t, TypeScript won’t assume the type is any.
strictNullChecks: Ensures null and undefined are only assigned to variables that are explicitly typed to accept them. This helps
prevent unexpected errors.
strictFunctionTypes: Makes sure function parameters and return types
are strictly type-checked and compatible.
noUnusedLocals: Reports an error if you declare a local variable but
never use it in your code.
noUnusedParameters: Warns you if a function parameter is declared but not used inside the function body.

After enabling type-checking options, it’s important to tell TypeScript which files to include or ignore during compilation. You can do this using the include and exclude properties in your tsconfig.json file. Here’s how you can set it up:

exclude: This tells TypeScript to ignore the_ node_modules_ folder during compilation. You don’t want TypeScript to compile files from external libraries.
include: This ensures TypeScript only compiles .ts files inside your src folder, including all its subdirectories.

5. Install and Set Up Express

To use the Express framework, install it by running:

npm install express

Once that’s done, create a src folder if you haven’t already, and inside it, create a file named index.ts. Now, import Express into that file.

After importing Express into your index.ts file, you might see a TypeScript error even though the same code works fine in regular JavaScript.

This happens because TypeScript needs type definitions to understand third-party libraries like Express. The Express package by default doesn’t come with built-in TypeScript types. To fix this, you need to install the type definitions for Express separately:

npm install -D @types/express

Keep in mind that you might have to do this for other packages. Once installed, the error should disappear, and you can use Express with full type support.

Now that everything is in place, you can create a basic Express server. In your src/index.ts file, add the following code:

import express from 'express'

const app = express();

app.listen(5000, ()=> {
    console.log(`Server started at port: ${5000}`)
})

Run npx tsc to compile the code, then run node dist/index.js to start the server.

Running npx tsc and then node dist/index.js every time you make a change can be tiring. To make this easier, you can install nodemon, a tool that automatically restarts your server when you update your code. Install it by running:

npm install nodemon

After installing nodemon, the next step is to simplify how you build and run your project by adding custom scripts to your package.json file.

Let’s break it down:

build: Runs npx tsc to compile your TypeScript code into JavaScript.
prestart: This runs automatically before npm start. It ensures your
TypeScript code is compiled before the server starts.
start: Runs the compiled JavaScript file to start your Express server.

When you run npm start, the prestart script runs first, which executes npm run build. This, in turn, runs npx tsc to compile your TypeScript code. Once compilation is complete, the server starts by running node dist/index.js. The issue with this setup is that it doesn’t automatically track changes. If you make updates to your code, you’ll need to manually stop the server and run npm start again every time. That’s not very efficient.

To fix this, you can set up a watch script. This script continuously monitors your TypeScript files and recompiles them when changes are detected.

There’s one last step to make development smoother: we want the TypeScript compiler to watch for changes and restart the server automatically, both at the same time. To do this, we’ll use a package called concurrently, which allows you to run multiple commands at once.

Install it by running:

npm install concurrently

After installation, open your package.json and add the following dev script under the scripts section:

"dev": "npx concurrently --kill-others \"npm run watch\" \"npm start\""

Let’s break it down:

npm run watch: Starts the TypeScript compiler in watch mode.
npm start: Starts the Express server.
--kill-others: If one process crashes or is stopped, the others are also stopped to avoid leftovers running in the background.

Setting up Express with TypeScript may seem like a lot at first, but once it's in place, it gives you a cleaner, more reliable development workflow. With tools like nodemon, tsc --watch, and concurrently, you can boost your productivity and catch errors early. Now you're all set to build scalable and type-safe Express applications!

The AI Cold War: A New Era of Technological Rivalry

Yusuf Mubaraq — Mon, 03 Feb 2025 09:26:03 +0000

Introduction

The tech world experienced a game-changing shift as China unveiled a groundbreaking piece of technology. On January 20th, the same day Donald Trump was inaugurated as the 47th President of the United States, China introduced DeepSeek R1, an advanced artificial intelligence tool designed to challenge the current dominance of American tech giants like OpenAI, Anthropic, Google, and Meta. This new AI model not only matches the performance of its American counterparts but does so at a fraction of the cost. Even more remarkable, China has decided to make DeepSeek R1 open source, granting anyone the freedom to use and build upon the software.

This development is particularly significant because American tech giants have long been seen as the undisputed leaders in the AI industry. This sentiment was echoed by former Google CEO Eric Schmidt in May 2024, during an interview with Bloomberg, where he confidently declared that the future of AI remains firmly under the control of the United States. However, it’s worth noting that earlier this year, the U.S. ramped up efforts to restrict the export of advanced AI chips and semiconductor technologies to certain countries, especially China. These measures are part of a broader strategy to limit China’s access to critical technologies that could bolster its military and AI capabilities.

The Re-emergence of a Technological Battle

But is this the first time we’re witnessing such an event? Not at all. The struggle for technological supremacy has graced the world stage before, most notably during the 20th century—though with different players. This historical parallel is known as the Cold War, a decades-long rivalry between the West (the United States and its allies) and the East (the USSR, or Soviet Union, and its allies, now primarily Russia). It was dubbed the Cold War because it avoided direct military conflict, instead playing out through ideological competition, espionage, and a relentless race for technological and scientific dominance.

Our focus, however, lies on the event that played a pivotal role in driving technological growth and advancement: The Space Race. This historic competition began on October 4, 1957, when the Soviet Union used a modified ballistic missile, the R-7, to launch Sputnik 1, the world’s first artificial satellite. While Sputnik itself was groundbreaking, the real concern was the technology behind it, a missile capable of carrying nuclear warheads. This revelation sent shockwaves through the United States, exposing what appeared to be a significant technological gap between the two superpowers. The stakes were raised just a month later when the Soviets launched Sputnik 2, further amplifying fears and solidifying the urgency of the race.

The race officially began when America responded to Sputnik 1 by launching Explorer 1 into orbit four months later. This was quickly followed by President Eisenhower signing the National Aeronautics and Space Act, which established NASA in 1958. However, the Soviet Union reclaimed the lead on April 12, 1961, when Yuri Gagarin became the first human to travel into space. Not to be outdone, the United States achieved a significant milestone just weeks later, on May 5, 1961, by sending Alan Shepard into space.

The Soviet Union continued to push boundaries, sending the first woman, Valentina Tereshkova, into space on June 16, 1963. Two years later, on March 18, 1965, Alexei Leonov made history again by completing the first-ever spacewalk, spending a remarkable 12 minutes and 9 seconds outside the spacecraft. These milestones underscored the intense competition and rapid advancements that defined the Space Race.

But the tide soon began to turn. NASA heavily invested in the Apollo 11 program, which culminated in Neil Armstrong becoming the first human to set foot on the moon on July 20, 1969. As he planted the American flag on the lunar surface, it symbolized a monumental victory in the Space Race. Meanwhile, the Soviet Union shifted its focus away from lunar landings, opting instead to develop the world’s first space station.

In a surprising twist, the two superpowers eventually chose collaboration over competition. This shift was marked by the Apollo-Soyuz Test Project (ASTP) in July 1975, the first international human spaceflight mission. The mission saw an American Apollo spacecraft and a Soviet Soyuz spacecraft dock in orbit—a historic moment of unity in space. The crews conducted joint experiments, exchanged gifts, and showcased the potential for international cooperation. This event not only symbolized détente but also marked the definitive end of the Space Race.

The AI Race

As the saying goes, history has a way of repeating itself. What was once the Space Race has now evolved into the AI Race. The United States kicked off this new era of competition with the groundbreaking release of ChatGPT by OpenAI on November 30, 2022. Built on OpenAI’s GPT-3.5 architecture, ChatGPT was introduced as a conversational AI model capable of engaging users in natural, dialogue-driven interactions. Its launch marked a pivotal moment in democratizing AI-powered tools, making them accessible to the public for a wide range of applications: from education and productivity to creativity and beyond.

During his recent inauguration, President Donald Trump announced major initiatives in the field of artificial intelligence (AI). Among these was the unveiling of the Stargate project, a massive AI infrastructure endeavor set to receive up to $500 billion in investment by 2029. This ambitious project is a collaboration between OpenAI, SoftBank, Oracle, and the investment firm MGX, signaling a significant push to solidify U.S. leadership in AI. However, the emergence of China’s DeepSeek has sparked concerns, particularly due to the relatively low cost of its development compared to its advanced capabilities. This has added a new layer of tension to the ongoing AI race between the two global powers.

China has demonstrated that producing cutting-edge AI software doesn’t require hundreds of billions of dollars. This revelation has left tech giants astonished, as China managed to develop a rival to OpenAI in less than two months with a budget of just $6 million. This breakthrough has sent shockwaves through the global tech community, underscoring China’s rapid rise in the AI arena. More importantly, it has awakened the world to the reality that China has officially closed the gap with the United States in terms of technological advancement, marking a new chapter in the global AI race.

As of January 27, 2025, DeepSeek’s AI assistant has overtaken OpenAI’s ChatGPT to become the most-downloaded free app on the Apple App Store in the United States. This milestone highlights DeepSeek’s rapid rise in the AI industry and its growing influence. The company’s success has sent ripples through the market, causing significant declines in the stock prices of major tech giants. This shift has sparked concerns among investors and industry leaders about the evolving dynamics of AI technology and the intensifying competition in the global AI landscape.

Conclusion

As DeepSeek continues to dominate tech discussions, the unveiling of its latest AI model, Janus-Pro, marks another leap forward in innovation. With its advanced capabilities in text-to-image generation, Janus-Pro sets a new standard for high-quality, AI-driven creativity. The AI race is still in its infancy, yet it’s already shaping the trajectory of our future. The pressing question remains: Who will claim the lead? While the competition is currently centered between the United States and China, could other nations soon enter the fray, showcasing their technological ambitions?

Alternatively, will history take an unexpected turn? Could this rivalry transform into a collaboration reminiscent of the joint efforts during the Space Race, when adversaries came together to advance global progress? Only time will reveal the answer. For now, the world eagerly awaits as the AI race continues to unfold.

The Magic of JavaScript Closures: A Clear and Easy Guide

Yusuf Mubaraq — Wed, 08 Jan 2025 21:42:54 +0000

What Are Closures in JavaScript?

Think of a closure like a backpack you carry with you after a class. Inside the backpack, you have all the notes and materials you learned during the class. Even after the class ends, you still have access to everything in your backpack whenever you need it. Similarly, a closure allows a function to keep access to the variables and parameters from its outer scope, even after that outer function has finished running and those variables are no longer accesssible outside of that function.

The explanation above is a typical way to describe closures, but is it beginner-friendly for someone new to JavaScript? Not really. I found it quite confusing when I first encountered it too. That's why I've written this article to make closures as simple as possible for anyone to understand. We'll begin by covering the basics before diving deeper into the topic.

Understanding Scope in JavaScript

To understand what closures is, we have to take a brief look at scope in JavaScript. Scope refers to the accessibility of variables and functions in different parts of our code. It determines where we can access certain variables or functions within our program.

There are two primary types of scope: global scope and local scope. Variables declared in the global scope exist outside of any function or block, making them accessible throughout the entire code. In contrast, variables declared in the local scope, such as within a function or block, are only accessible within that specific function or block. The code below illustrates this explanation.

// GLOBAL SCOPE
let myName = "John Doe";

function globalScope() {
  console.log(myName);
}
globalScope(); //Output John Doe
console.log(myName); // Accessible here as well

// LOCAL SCOPE
function localScope() {
  let age = 30;
  console.log(age);
}
localScope(); //Output 30
console.log(age); //Output age is not defined (Not Accessible)

However, JavaScript uses a concept known as Lexical Scoping, which is crucial to understanding how closures work. Lexical Scoping means that the accessibility of variables is determined by the structure of our code at the time it is written. In simple terms, it’s like saying, "If a variable is declared inside a function, only that function and anything within it can access that variable."{https://javascript.info/closure}.

Lexical Scoping and Execution Context

To understand this more clearly, let's look at how JavaScript works behind the scenes. JavaScript uses something called an Execution Context, which is like a container that holds the code being run. It keeps track of variables, functions, and what part of the code is currently running. When a script starts, the Global Execution Context (GEC) is created. It’s important to note that there is only one Global Execution Context in a program.

The diagram above represents the Global Execution Context when our program begins. It consists of two phases: the Creation (or Memory) Phase and the Execution (or Code) Phase. In the Creation Phase, variables and functions are stored in memory—variables are initialized as undefined, and functions are fully stored. In the Execution Phase, JavaScript runs the code line by line, assigning values to variables and executing functions.

Now that we understand how JavaScript handles the execution context and lexical scoping, we can see how this directly ties into closures.

How Closures Work: An Example

A closure in JavaScript is created when an inner function retains access to the variables in its outer function's scope, even after the outer function has finished execution. This is possible because the inner function preserves the lexical environment it was defined in, allowing it to "remember" and use the variables from its outer scope.

Let’s look at the example below:

function outerFunction() {
    let outerVariable = 'I am John Doe';

    return function innerFunction() {
        console.log(outerVariable);
    };
}

const closureExample = outerFunction();
closureExample();  // Outputs: "I am John Doe"

Here is a guide on how the above code works. Whenever we call a function, the JavaScript engine creates a function execution context (FEC) specific to that function, which is created within the Global Execution Context (GEC). Unlike the GEC, there can be multiple FECs in a program. Each FEC goes through its own creation and execution phases and has its own variable and lexical environments. The lexical environment enables the function to access variables from its outer scope.

When outerFunction is called, a new FEC is created, Inside outerFunction, we define innerFunction, which has access to outerVariable due to lexical scoping. After outerFunction returns, the execution context of outerFunction is removed from the call stack, but the innerFunction retains access to outerVariable because of the closure. So, when we later call closureExample(), it can still log outerVariable even though the outerFunction has completed.

Real-World Applications of Closures

Let’s examine the following example:

function x(){
      let a = 5
     function y(){
         console.log(a)
      }
      a = 50
      return y;
    }
    let z = x();
    console.log(z)
    z();

What do you think the output of this code will be? Many of you might have guessed 5, but is that really the correct output? Actually, no, and here’s why. The function y() is referencing the variable a, not its initial value. When z() is called, it logs the current value of a, which is 50, due to the update made before returning the inner function. Let's explore another example:

function x(){
  let a = 10;
 function y(){
     let b = 20;
     function z(){
      console.log(a,b);
     }
     z();
  }
  y();
}
x();
This

code demonstrates the power of closures. Even in the innermost function, z(), it can still access variables from its parent scopes. If we inspect the browser and check the Sources tab, we can see that closures have formed on both x and y, which allows z() to access a and b from its parent contexts.

Advantages of Using Closures

Closures offer several advantages in JavaScript, especially when writing more flexible, modular, and maintainable code. Below are some of the key advantages:

1. Callback Functions: Closures are very powerful when dealing with asynchronous programming, such as callbacks, event listeners, and promises. They allow the callback function to maintain access to variables from the outer function even after the outer function has completed.

    function delayedLog(message, delay) {
      setTimeout(function() {
        console.log(message);
      }, delay);
    }
    delayedLog('Hello after 2 seconds', 2000); // Logs after 2 seconds

2. Modularity and Maintainability: Closures encourage modularity by allowing developers to write smaller, reusable chunks of code. Since closures can preserve variables between function calls, they reduce the need for repetitive logic and improve maintainability.

3. Avoiding Global Variables: Closures help reduce the need for global variables, thus avoiding potential naming conflicts and keeping the global namespace clean. By using closures, you can store data in function scope rather than globally.

Conclusion

Closures are a powerful concept in JavaScript that extend the capabilities of functions by allowing them to remember and access variables from their outer scope, even after the function has executed. This feature plays a significant role in creating more modular, flexible, and efficient code, particularly when handling asynchronous tasks, callbacks, and event listeners. While closures might seem complex at first, mastering them will enable you to write more sophisticated and optimized JavaScript. As you continue to practice, you’ll discover how closures can help in writing cleaner, more maintainable applications. Keep experimenting, and soon closures will become a natural part of your JavaScript toolbox.

Unlocking the Power of Generators in JavaScript

Yusuf Mubaraq — Mon, 06 Jan 2025 06:15:47 +0000

Introduction

Generators! No, JavaScript isn’t powering up physical generators. Instead, we’re talking about a special type of function that can pause and resume execution. These functions are incredibly useful for handling asynchronous code and generating values on demand.

When we say "special type of function," we mean generators are different from the regular functions we’re accustomed to. They have unique syntax and are invoked differently. Let’s take a look at an example to better understand this concept.

The example above demonstrates how a generator function is written. Notice the asterisk (*) symbol added to the function keyword before the function name. Inside the function, we encounter the yield keyword. What does it do? It acts as a special kind of return keyword, used to return a value each time the function pauses during execution.

The yield keyword enables the function to generate a sequence of values, one at a time, as they are requested. However, just like the await keyword can only be used within an async function, the yield keyword is exclusive to generator functions. It cannot be used outside of one or within a normal function. Now that we understand the syntax, let’s dig deeper!

If we were to log the example code to the console, what do you think would appear? You might expect some output, but in reality, the console remains empty. Why is that? As mentioned earlier, a generator function behaves differently from a regular function. It cannot be invoked or called like a standard function. Instead, it requires a specific approach to execute. Let’s see how to implement that below!

Let’s check the console again. This time, instead of the expected result, a generator object is printed. However, we still don’t see the actual output yet. Why? Let’s explore further!

A generator object is what you get when you call a generator function. This object acts as an iterator, allowing you to control the execution of the generator function. If we inspect the returned object, we’ll notice several properties and methods at play. However, for now, let’s focus on its prototype to understand its behavior more clearly.

Within the prototype, we can observe three key methods: next(), return(), and throw(). For now, let’s focus on the next() method. This method allows us to execute the code inside a generator function and retrieve its next yielded value. Let’s see how it works in practice!

Using the next() method ensures that the code inside the generator function is executed and its output is printed to the console.

As we can see, the console logs This is a generator example, followed by the result of the first yield. The latter includes two properties: value and done.

The value property represents the result returned by the yield statement.
The done property indicates whether the generator function has completed execution. If done is true, it means there are no more yield statements to execute. If false, it means there’s still code to be processed.

In this scenario, the done property is false because only the first yield has been executed. Remember what we mentioned earlier about generators: they give us the flexibility to control when code executes. To access the value of the remaining yield statements, we need to call the next() function again, twice in this case.

The code above sequentially logs 1, 2, and 3, with the done property showing false for each call. However, on the final call to the next() method, the generator returns undefined and true. This indicates that the generator has completed execution and there are no more yield statements to process.

Generator Use Cases

Here, we’ll explore some practical scenarios where generator functions can be effectively utilized in our day-to-day coding tasks.

Generators are a type of iterable, which means they can be iterated using loops or other iteration methods, such as the for...of loop. They provide a powerful way to handle sequences of data or asynchronous operations. Let’s demonstrate their usage with an example:

Another powerful use case for generators is to handle asynchronous operations, such as fetching data from the internet.

Here's an explanation of the above code. The fetchData() is an asynchronous generator function that yields the results of two API calls. The first yield fetches data from
"https://jsonplaceholder.typicode.com/posts/1", waits for the fetch promise to resolve and parses the response as JSON. The await ensures the data from the fetch call is resolved before yielding it. The second yield repeats the process for "https://jsonplaceholder.typicode.com/posts/2".

The IIFE(Immediately Invoked Function Expression) ensures the asynchronous function is defined and executed immediately. Inside the function, The for await...of loop is used to iterate over the values yielded by the fetchData generator. The main purpose of generator function for asynchronous call is the freedom to fetch any data whenever we want. We fetched both data above by iterating through them, but we can decide to make just one fetch call out of the two by using the method we implemented earlier.

The Return and Throw Method

Earlier, we examined the Prototype and its returned value. We’ve already discussed the next() method, so now let’s delve into the return method. This function behaves similarly to the standard return in a regular function. Once the return keyword is invoked, execution halts immediately, regardless of any remaining code, and the done property is set to true.

The throw() methods in a generator acts as if a throw statement is inserted in the generator's body at the current suspended position, which informs the generator of an error condition and allows it to handle the error, or perform cleanup and close itself.

There's something you might have overlooked in my code since the start of this article, I’m guessing you still haven’t figured it out. Let me save you the trouble: it’s the absence of arrow function syntax. And here’s why: we can’t use arrow functions with generators in JavaScript. Arrow functions lack their own this or arguments context and are specifically designed for concise, context-bound expressions.

Conclusion

JavaScript generators are a powerful feature that allows for controlled execution of code, making them invaluable for tasks like managing asynchronous operations, handling large datasets, or creating custom iterators. Their ability to pause and resume execution, coupled with features like yield, next(), and return(), provides a unique level of flexibility in coding. So go ahead, give generators a try, and add some extra flair to your JavaScript journey—happy coding!

AI in Remote Hiring: The Future of Global Talent Acquisition

Yusuf Mubaraq — Sun, 29 Dec 2024 23:01:23 +0000

Introduction

In a world filled with multi-talented professionals across various fields, the rise of remote work has transformed the global talent acquisition landscape, it has to some extent defeated geographical barriers, allowing significant access to a wealth of talent. Here are few statictics that shows the growing number of remote work.

According to the Pew Research Center, around 22 milion employed adults (aged 18 and over) in the U.S. work from home all the time , equal to roughly 14% of all employed adults. A study by Quantum Workplace revealed that 32% of employees prefer fully remote positions. Studies and surveys ha'/ve also consistently indicate that many workers are willing to accept pay cuts in exchange for the flexibility and convenience of remote work.
However, with this shift comes the challenge of identifying, evaluating, and engaging top talent efficiently. This is where Artificial Intelligence emerges as a game changer.

This article explores how AI is reshaping remote hiring, its role in addressing global recruitment challenges, and the exciting potential it holds for the future of talent acquisition. Whether you're a recruiter aiming to optimize hiring strategies or a professional navigating the job market, understanding AI's impact on remote hiring is essential in today’s connected world

Why AI is required in recruitment Process

Recruiting global talent presents unique challenges for HR teams, as they must navigate a range of logistical, cultural, legal and technological complexities. A recent Society for Human Resource Mangagement(SHRM) study found that 77% of recruiters reported difficulty recruiting for their full time positions. The traditonal recruitment process is becoming unsustainable with a competitive talent market and limited resources. In today's global workforce, remote role often attracts hundreds, if not thousands, of candidate from diverse locations. Sorting through these resumes manually is not only time-consuming but also prone to human error and biases. These in turn delays the hiring process which can take days or weeks, even months in some cases. This process sometimes leads to unintensionally ommission of qualified candidate and it may as well be riddled with biases by Human reviewers based on subjective factor.

These are many of the challenges that AI seeks to solve by automating and optimising screening processes. AI in remote hiring is transforming recruitment by automating repetitive tasks and enhancing candidate screening. But are you aware of the latest AI tools used by companies for reccruitment processes? let's discuss that in the next topic.

AI-Powered Software Used in Recruitment Processes

A wide range of AI tools is being utilized by companies and recruitment agencies to streamline their hiring processes. Here, we’ll highlight some of the most effective and widely used ones:

1. Zoho Recruit

Zoho Recruit is one of the leading AI-powered tools in the recruitment process. Designed specifically to help businesses and staffing agencies manage their hiring processes efficiently. It is so versatile that experts identified it as the Best Customer Relationship Management(CRM) solution for Small and Medium-sized Business in 2023.

It is also one of the most affordable solutions offering users a forever-free version as well as free trial. Zoho's Application Tracking System(ATS) helps to automate repetitive tasks and improve pipeline efficiency. The platform also allows the implementation of a candidate portal which simplies the hiring process.

Hiring companies can also automatically post to multiple job boards and social media sites.A notable mention is Zia, Zoho's AI chatbot that helps candidate apply for open position and stay up-to-date with their recruitment journey.

2. HireEZ

HireEZ is an AI-powered recruiting software designed to streamline and enhance the hiring process. It focuses on sourcing, engaging, and managing candidates, particularly for hard-to-fill roles. The platform combines advanced AI, machine learning, and data-driven insights to help recruiters find the best talent quickly and efficiently.

Think of the platform as a search engine for easing sourcing from various workplace. It is equipped with several features such as EZ Insight that helps in optimising talent sourcing process. EZ engagement also allows for candidates engagement and ability to contact candidates directly via email. It also enables easy sharing of availability information and schedule meetings with candidates in just few clicks.

3. Humanly

Humanly is an AI-powered recruiting software designed to streamline, optimise and reduce bias in the hiring process by automating candidate screening, engagement, and interview scheduling, freeing up your time to focus on strategic hiring decisions and building relationships with top talent. It is as well equipped with AI-powered chatbots that answer questions and manage scheduling. It also minimises unconscious bias with AI-powered interview ass
essments focusing on skills and qualification.

Challenges of the AI Recruitment Process

While AI brings significant benefits to the recruitment process, it also presents challenges that organizations must tackle to ensure fair, effective, and ethical hiring practices. One key concern is that, although AI offers the promise of objectivity, the algorithms are ultimately designed by humans. This means any biases or prejudices inherent in the creators can accidentally be embedded in the AI systems, potentially affecting the recruitment outcomes

The use of AI in recruitment entails the collection and analysis of vast amounts of sensitive candidate data, which has however raised concerns about privacy and security. A survey by Deloitte found 47% of organisations consider data Privacy and Security as the biggest challenge in implementing AI solutions for recruitment. By proactively addressing these challenges and implementing strategic measures, organisations can harness the full potential of AI to attract, engage, and retain the best.

Conclusion

In this article, we explore how AI has transformed the recruitment process in remote hiring, and how it has simplified and enhanced the recruitment process. In remote hiring, AI has played a significant role in streamlining the recruitment process, improving the candidate experience, and supporting data-driven decision making. In our study, we see how AI has empowered HR teams and recruiters to search for candidates across various platforms, assess the candidates’ skills and fit using AI tools, and how this has improved the efficiency and scalability of the recruitment process.

However, the more organisations embrace AI in their hiring process the more challenges that come with it, such as algorithmic bias, lack of transparency, and data privacy issues. In order to gain the right benefits of AI, organizations need to employ the use of artificial intelligence in the right way so that hiring processes are efficient and at the same time, ethical. These challenges can only be solved by the conduct of regular audits, full disclosure of the decisions made and close supervision by human beings.

Given the fact that remote work has already and will most likely continue to shape the future of work, AI is set to play an important role in helping organisations navigate the process of identifying and selecting the right candidates for their teams. Thus, the responsible and effective use of AI can help companies to create more effective teams and meet the needs of the modern world which is increasingly interconnected and based on the use of digital technologies.

A Practical guide to Async and Await for JavaScript Developers

Yusuf Mubaraq — Wed, 18 Dec 2024 08:15:00 +0000

Introduction

Async and Await are JavaScript keywords introduced in ECMAScript 2017 (ES8) that enable writing asynchronous code in a more readable, synchronous-like, and manageable manner. They simplify handling operations that take time to complete, such as fetching data from an API.

Before we dive in, let’s first understand the concepts of synchronous and asynchronous programming in JavaScript. In synchronous programming, tasks are executed sequentially, one after the other, in the order they appear. Each task must complete before the next one begins. On the other hand, asynchronous programming allows tasks to run in the background, enabling JavaScript to continue executing other tasks without waiting for the previous ones to finish.

As we know, JavaScript is a single-threaded language, meaning it can only execute one task at a time. If that's the case, how does JavaScript handle asynchronous code? This is made possible by the Event Loop, a key mechanism that works alongside the JavaScript runtime environment. The event loop enables asynchronous operations to run without blocking the main thread, ensuring that JavaScript stays responsive. Without further delay, grab a cup of coffee and let’s jump right into today’s topic!

What is Async?

To better understand this concept, we’ll take a more practical approach. Before the introduction of async and await, Promises were handled using the "old way," which was introduced in ES6 (ECMAScript 2015). Let’s explore the example below.

The code above demonstrates the traditional syntax for handling Promises. The Promise constructor is used to create a new Promise instance. It accepts a function (known as the executor function) as its argument, which includes two parameters: resolve and reject. This executor function contains the logic for the asynchronous operation. In this example, resolve is called immediately, signaling that the Promise has successfully completed with a specific value. Once the Promise is resolved, the .then method is triggered, executing its callback to log the result.

However, this syntax can be somewhat tricky to remember. The introduction of async/await simplified the process of handling promises, making it much easier to read and understand. Let’s look at an example below.

To implement an async function, we use the async keyword, which tells JavaScript that this is not a regular function but an asynchronous one. The second example shows how the same can be done using an arrow function.

Another important concept to note is the await keyword. Both async and await work together to simplify handling Promises. The awaitkeyword can only be used inside an asynchronous function—it cannot be used outside a function or within a regular function. It must always appear within a function marked as async. Now that we’ve covered the basics, let’s dive deeper into the concept!

How It Works Behind the Scenes

Many JavaScript developers use async/await regularly in their code, but only a few truly understand how it functions under the hood. That’s where this tutorial comes in. Let’s explore an example to break it down.

In this example, we use the .then method to better understand how Promises work compared to the async/awaitapproach. When the handlePromise() function is called, the code executes line by line. When JavaScript encounters the .then method, it registers the callback to the Microtask Queue and immediately moves to the next line, printing 'hello world'.

Once all synchronous tasks are completed, the JavaScript engine checks the Microtask Queue for pending tasks. After five seconds, the setTimeout completes, and its callback is pushed back to the call stack. At this point, the Promise is resolved, and the registered callback runs, logging the result.

In short, the JavaScript engine doesn’t wait, it moves directly to the next line of code. Now, does the same behavior apply when using async/await, or does it work differently? Let’s find out!

In the example above, when the handlePromise() function is called, the first line 'the start' is printed. JavaScript then encounters the awaitkeyword, which indicates that the function is asynchronous and involves a Promise. It identifies that the Promise will take five seconds to resolve due to the setTimeout. At this point, the handlePromise() function is suspended (removed from the call stack), and any code after the await inside the function is paused.

The JavaScript engine continues to execute the rest of the program. After five seconds, the Promise is resolved, the suspended function is returned to the call stack, and the remaining lines inside handlePromise() 'Promise is resolved' and 'the end' are executed in sequence.

It’s important to note that suspending the function doesn’t block the main thread. If there’s other code written outside the handlePromise() function, it will execute while the Promise is waiting to resolve.

The example below demonstrates this behavior in action:

In this example, the first output is the start. When JavaScript encounters the await keyword, it recognizes that the Promise will take five seconds to resolve. At this point, the function is suspended, and JavaScript moves on to execute any code outside the function. As a result, We are outside is printed next.

Once the Promise is resolved after five seconds, the handlePromise() function is restored to the call stack, and its remaining lines are executed, printing Promise is resolved followed by the end.

let's examine one more example, we'll try making an API call with async/await in other to understand the the concept better.

In the code above, the execution process follows the same principles discussed earlier. When JavaScript encounters the fetch function, it suspends the getData() functions and wait for the fetch call to return a response object, this object contains various properties such as the status, headers and body of the response. The function then resumes execution once the response is available.

The response body is the data we need, but it is in raw form (such as text or binary) and not immediately usable. To convert it into a JavaScript object for easier manipulation, we use the .json() method, which parses the raw JSON response. This process involves another Promise, which is why the second await is necessary. The function suspends again until the Promise resolves.

Once both Promises are fulfilled, the getData() function resumes, and the parsed data is printed to the console. A straightforward way to explain how fetch works, isn’t it? Now, back to our main discussion!. What if our API response fails? How do we manage errors with async/await? Let’s dive into this in the next section.

Handling Errors with Async/Await

Traditionally, errors in Promises were handled using the .catch method. But how can we handle errors when using async/await? This is where the try...catch block comes into play.

In the code above, the Promise is enclosed within a try block, which executes if the Promise resolves successfully. However, if the Promise is rejected, the error is caught and handled within the catch block.

But did you know we can still handle errors the traditional way? Here’s an example:

To handle errors in async/await using the traditional approach, you simply attach the catch method to the function, as demonstrated above. It functions in the same way as the try/catch block.

Conclusion

Async/await has revolutionized how JavaScript handles asynchronous operations, making code more readable and easier to manage compared to traditional methods like .then and .catch. By leveraging async and await, we can write asynchronous code that feels more synchronous, improving overall code clarity. While understanding the inner workings—such as the event loop and microtask queue, implementing async/await is straightforward and highly effective for modern JavaScript development. With proper error handling using try/catch or .catch, we can confidently manage both successful and failed promises.

Thanks for sticking around! I hope this article made async/await a bit clearer for you. Wishing you success in your coding adventures—go build something amazing!

A Brief History Of The Internet And The World Wide Web

Yusuf Mubaraq — Tue, 18 Jun 2024 13:37:36 +0000

The internet is a global network of interconnected computers that communicate through standardized protocols. It enables the exchange of data, information, and services through various technologies, such as email, websites, social media, and online applications. The World Wide Web(WWW) on other hand, commonly known as the web, is a system of interlinked hypertext documents and multimedia content that can be accessed via the internet. Created by Tim Berners-Lee in 1989, the web allows users to navigate through web pages using hyperlinks.

History of the Internet
Before 1957, computers primarily operated on a single task at a time. Early computers, such as the ENIAC (Electronic Numerical Integrator and Computer) and UNIVAC (UNIVersal Automatic Computer), were designed to process one job or task sequentially. This mode of operation is known as “serial processing. These early machines did not have the capability to handle multiple tasks simultaneously due to limited processing power and lack of advanced operating systems. Users would submit a job, which the computer would process to completion before starting the next job. This single-task approach was sufficient for the simpler computational needs and hardware limitations of the time. The shift toward handling multiple tasks began with the development of batch processing and later, time-sharing systems, which emerged in the late 1950s and 1960s.

The Cold War space race significantly contributed to the development of the internet through a combination of technological innovation. I remember taking a course on this particular topic in my history class in the uni. It was a proxy war between the United States and the Soviet Union. On October 4th 1957, the first satellite called “Sputnik one” was launched by the Soviet Union. The fear of missile launch from space awakened the technological consciousness of the United States, in which she founded the Advanced Research Project Agency(ARPA). One of ARPA’s projects was to develop robust, reliable communication systems that could withstand potential disruptions, such as a nuclear attack. This led to research into decentralized communication networks, which formed the basis of the ARPANET,

the precursor to the internet. Packet Switching was also key to the development of the ARPANET, allowed data to be broken into small packets, sent independently across the network, and reassembled at the destination.

The Cyclades also played a crucial role in the development of the internet. It was a pioneering computer network developed in France in the early 1970s, primarily led by computer scientist Louis Pouzin. Cyclades introduced and refined several key concepts, particularly in the realm of packet-switched networks.

February 28, 1990, marked a significant milestone in the development of the internet, specifically relating to the transition from the ARPANET to the modern internet. The transition from ARPANET to the broader internet was facilitated by the adoption of the Transfer Control Protocol(TCP)/Internet Protocol(IP) protocol suite, which became the standard for network communication. TCP/IP’s robustness, scalability, and ability to interconnect diverse networks were crucial in enabling the creation of a global network of networks.

The World Wide Web (WWW)

Thirty-five years ago the very first website went online, behind this invention is a computer scientist, Tim Berners-Lee, born in London on June 8th 1955. He came about it while working at CERN, the European Organization for Nuclear Research. Berners-Lee envisioned a system that would enable researchers to share information seamlessly across different computer systems.

To realize this vision, he developed three fundamental technologies: HTML (HyperText Markup Language), which allowed for the creation of web pages; URI (Uniform Resource Identifier), which later became URL (Uniform Resource Locator), providing a way to address and access web resources; and HTTP (HyperText Transfer Protocol), enabling the retrieval of linked resources across the web.

The first successful communication between a web browser and a server occurred in mid-November 1989, marking the birth of the web. By 1990, the first web page was created, hosted on Berners-Lee’s NeXT computer at CERN.

In 1993, the introduction of the Mosaic web browser, developed by Marc Andreessen and Eric Bina at the National Center for Supercomputing Applications (NCSA), significantly boosted the web’s popularity. Mosaic was user-friendly, supported images, and was available on multiple platforms, making it accessible to a broader audience. The web’s rapid expansion led to the development of dynamic and interactive content, search engines, e-commerce platforms, and social media, transforming how information was accessed and shared globally. The web’s rapid expansion led to the development of dynamic and interactive content, search engines, e-commerce platforms, and social media, transforming how information was accessed and shared globally.

The web’s evolution continued with the advent of Web 2.0 in the early 2000s, emphasizing user-generated content, interactivity, and collaboration. Technologies such as AJAX (Asynchronous JavaScript and XML) enabled more dynamic web applications, leading to the proliferation of platforms like Wikipedia, YouTube, and Facebook.

Today, the World Wide Web is an integral part of daily life, supporting a vast array of applications and services that connect people, businesses, and information worldwide. Its development has been marked by continuous innovation and adaptation, driven by the collaborative efforts of researchers, developers, and users across the globe.

Programming on a Budget: Leveraging the Power of Chromebooks

Yusuf Mubaraq — Sat, 08 Jun 2024 16:43:03 +0000

In a world where access to technology often defines opportunities, the pursuit of programming skills can sometimes feel like an exclusive club reserved for those with high-end laptops and deep pockets. However, in this age of innovation, accessibility to coding resources should not be limited by financial restriction. Enter Chromebooks – the affordable, budget-friendly laptops that are leveling the playing field for aspiring programmers from all walks of life.

Why You Should Consider Buying A Chromebook

In the programming world, powerful hardware has traditionally been seen as essential for smooth development. However, the rise of cloud-based Integrated Development Environments (IDEs) is changing this dynamic, especially for Chromebook users. This shift allows the demanding tasks of code compilation and execution to be handled in the cloud, reducing the reliance on local hardware. As a result, even the most affordable Chromebooks can become effective programming tools, tapping into the full potential of cloud-based IDEs without being restricted by their hardware specifications.

In this article, I'll share my experience with it such as the programming languages and the IDEs i installed on it, and i promise to make an honest and unbiased review. I was gifted an HP chromebook (HP 11.6" HD Display Chromebook Laptop, Intel Celeron Processor N3350, 4GB RAM, 32GB eMMC) back in December 2021 when i started my web development journey. I was used to using a windows laptop and this came as a new adventure to me. I had to surf the internet, youtube most times on how to use and whether it is suitable for programming. Eventually i unlocked the power of the machine when i successfully installed Linux on it, this was how our love journey began.

The integration of Linux into Chromebooks significantly enhances their capabilities, particularly for developers. Visual Studio Code was the first IDE I installed, and it worked seamlessly, with no lag while writing HTML, CSS, and JavaScript. Installing React and various libraries also did not affect its performance, giving me an edge over some friends with low-spec Windows laptops. I also installed Python, which ran smoothly. The terminal made installations quick and easy.

Last year, I decided to explore data science and needed to install Jupyter Notebook to run my code. Initially, I had issues installing it due to its larger memory requirements, so I had to allocate more space to the Linux environment. Once installed, it worked well, though I noticed occasional hanging when running Visual Studio Code concurrently, mostly due to insufficient memory space. The last IDE I installed was IntelliJ IDEA for Java development. My experience was less favorable because I had nearly exhausted my memory and had multiple IDEs running. Though I had to uninstall Jupyter Notebook to make space for IntelliJ IDEA. Overall, I believe a Chromebook with more memory would handle these tasks more smoothly.

Things You Should Consider Before Buying a Chromebook

1. Linux Compatibility: The first thing to check is whether the Chromebook is compatible with Linux, as this greatly enhances its capabilities for programming. Without it, the Chromebook is akin to a car without an engine.

2. Memory Space: Opt for a model with larger memory space. My 32GB variant was insufficient for many tasks, so consider models with more storage.

3. Screen Size: If you are interested in web development, particularly frontend or UI design, choose a Chromebook with a larger screen size. A 13 or 14-inch screen is recommended, ensuring compatibility across various screen sizes.

In conclusion, Chromebooks can be a surprisingly powerful and affordable option for programming, especially when enhanced with Linux. My journey with an HP Chromebook demonstrated its capability to handle various programming tasks smoothly, from web development to data science. While there are some considerations to keep in mind, such as ensuring Linux compatibility, opting for larger memory, and choosing an appropriate screen size, the benefits make it a worthwhile investment. For anyone seeking a budget-friendly yet efficient programming laptop, a Chromebook is certainly worth considering.

Optimizing User Experience: The Lazy Loading Approach in React

Yusuf Mubaraq — Fri, 31 May 2024 17:07:38 +0000

What is lazy loading in Reactjs?

Lazy loading in React is a powerful technique to optimize the performance and efficiency of web applications by delaying the loading of non-essential components until they are actually needed. This method not only enhances the initial load time, making the application feel faster and more responsive to users, but also reduces the overall resource consumption and bandwidth usage. Moreover, lazy loading aligns with best practices in modern web development, such as code splitting and efficient resource management, which are crucial for building scalable and maintainable applications. It also allows for better handling of large applications with complex component structures, ensuring that only the necessary code is delivered to the user at the right time.

Why Do We Implement Lazy Loading?

Imagine we're building a small-scale application with just a few components, such as a homepage, an about page, a contacts page, and some API calls. In a typical setup, all these components and files are bundled into a single JavaScript file, which is then loaded by the browser.

Let's illustrate this with a practical example. Start your React app and open the browser's Developer Tools by right-clicking and selecting "Inspect." Navigate to the "Network" tab, then click on the "JS" tab. Reload the webpage and observe the network activity. Notice which JavaScript files are loaded initially and pay attention to any additional files that load when you interact with the app. In a typical React application, the initial rendering of the webpage is driven by a single JavaScript file. While this approach is straightforward and works well for small applications, it can lead to inefficiencies as the application grows in size and complexity.

The big question: Is it suitable to have just one JavaScript file for our entire application?

For small-scale applications with just a few components, having a single JavaScript file might seem acceptable. However, consider large-scale applications like Amazon or eBay, which contain thousands of components and numerous features. If all of this were handled by a single JavaScript file, the file size would become significantly large, leading to increased load times and performance issues.

Therefore, it's crucial to break down the code into multiple JavaScript files or bundles. This approach, known as code splitting, helps optimize the application, improve load times, and enhance user experience. Without implementing such techniques, a large application would suffer from slow performance and other issues.

How Can We Implement This in Our React App?

Let's get started by opening our online code editor. I've already created a React app, set up the folder structure, and installed necessary libraries like react-router-dom for navigation.
In the src folder, I created a components folder containing all the component files. Inside this folder, there is a Homepage component that renders the homepage of the website. We'll focus on the Product component linked in the header, where we will implement the lazy loading feature.

We'll import the Products component into the App.jsx file, which manages all our routing. However, instead of using the standard import, we'll use React's lazy function to achieve this.


import React, { lazy } from “react”;
import {Routes, Route} from “react-router-dom”;

const Product = lazy(()=> import(“./components/Products”));
const App = ()=> {
return(
       <>
         //  //  //
         //  //  //
       </>
    )
}

export default App

Can you see the method we used to import the Products component into the App.jsx file? We created a variable named Products. Note that the first letter is capitalised because it is a component, not a regular variable. The lazy function takes a callback function, which includes the import function. Is this import the same as the standard import statement above? Absolutely not. This is different; it is called a dynamic import. The dynamic import function takes the path to the Products component as its argument.

Now let's go back to our browser and reload the page. Is the Products component visible in our network tab? Absolutely not.

But what if I told you that our JavaScript bundler does not yet include the code for the Products component? It hasn't loaded that code yet. Curious? Now, let's click on the Products link. Can you see the magic that just happened in our Network tab?

The Products component responded to our request. This means we're loading the Products page on demand and rendering it on the screen only when it's needed.

But why is our Product page displaying an error? When React attempts to load the page but cannot find the code, it suspends the process by throwing an error. However, there's a solution to this situation. React offers a component called "Suspense" to handle such errors. Let's put it into practice below:


import React, { lazy, Suspense } from “react”;
import {Routes, Route} from “react-router-dom”;

const Product = lazy(()=> import(“./components/Products”));
const App = ()=> {
return(
  <>
   <Routes>
    <Route path=“ / ”   element={<Home/>} />
    <Route path=“ / products ”   element={<Suspense fallback={<div>Loading….<div/>}><Products/><Suspense/>} />
   <Routes/>
 </>
    )
}

export default App

In the code snippet above, we import the Suspense component from React and then wrap it around our Products component. This instructs React to load the Products page only when necessary. Now, what's the purpose of the fallback attribute? As the name suggests, it determines what gets rendered on the screen before the Product component is activated. You can include JSX or a component inside it. Keep in mind that it might not be visible due to how quickly React renders our components on the screen. However, you can test it by slowing down the network or disabling it entirely.

In summary, implementing lazy loading in React is not just a performance optimization; it is a strategic approach to improve the overall user experience, manage application complexity, and ensure efficient use of resources. This makes it an essential tool in the toolkit of any React developer aiming to build high-performing, user-friendly web applications.

Diving into ReactJS: Understanding the Magic Behind Client and Server-side Routing.

Yusuf Mubaraq — Thu, 16 May 2024 22:27:34 +0000

What is Routing?

Routing in React.js refers to the process of managing navigation within a single-page application (SPA). In traditional multi-page web applications, each page corresponds to a different URL, and navigation between pages triggers a request to the server for a new HTML page. However, in SPAs built with React.js, all content is rendered on a single HTML page. Routing allows you to define different “routes” within your application based on the URL, so that different components are rendered based on the URL without a full page reload. This gives users a seamless browsing experience similar to traditional multi-page applications.

I’ll utilize the browser devtools to explore deeper into this article. Feel free to use any browser you prefer, but I’ll demonstrate using the Chrome browser. Simply right-click with your mouse or trackpad, select ‘Inspect,’ and then navigate to the Network tab.

What is Client-Side Routing?

Client-side routing refers to the management of page navigation or switching within the browser itself. For instance, when a user clicks a link that modifies the URL, the browser updates it without contacting the server, thus avoiding a full page refresh. This approach enables swift page transitions, with React Router being a widely used library for implementing client-side routing. To gain a better understanding of the client side, let’s begin by installing the React Router DOM package:

npm install react-router-dom

Once installed, import BrowserRouter from react-router-dom into your main.jsx file and enclose it around the parent component:


import { BrowserRouter } from “react-router-dom”;

<BrowserRouter>
   <App />
<BrowserRouter>

In the App component file, import Routes and Route from react-router-dom. To structure our routing page, let’s create a folder named components. Inside this folder, create two files: Home.jsx and RoutingExample.jsx, then import them into your App.jsx file. Wrap the files routing page inside the Routes property:


import react from “react”;

import { Routes, Route} from “react-router-dom”;
import Home from “./components/Home;
import RoutingExample from “./components/RoutingExample”;

const App = () => {
  return (
    <>
     <Routes>
       <Route path=“/“ element={<Home />}
       <Route path=“/routing-example“ element={<RoutingExample />/>
     </Routes>
    </>
)
}

Within the Home component, create a link that navigates to the RoutingExample page. Utilize the Link tag provided by react-router-dom:


import React from “react”;
import { Link } from “react-router-dom;

const Home = () => {

       return(
       <>
           <Link to=“/routing-example”>Client-side Routing</Link>
       </>
)
}

Remember the network tab I mentioned earlier? Let’s revisit it. On the count of one, two, three, click the link. Did you notice anything? Nothing happens inside the network tab that is no contact was made with the sever. The client-side routing ensures faster navigation between pages which made react router dom a widely used routing library.

Server-side routing on the other hand is managed by the server. When a user clicks a link, the browser sends a request to the server, which in turn responds with the relevant HTML page, leading to a complete page refresh. An example of this is the HTML anchor tag. This routing approach can lead to slower navigation due to the round-trips to the server involved. For server-side routing, you’ll need to utilise the HTML anchor tag. Begin by creating an index.html and routing.html file in your visual studio code or any code editor of your choice. In the index.html file, create a link using the traditional anchor tag with “Server-side Routing” as the inner text:

<a href=“routing.html”>Server-side Routing</a>

Return to your browser and revisit the network tab. Click on the link, and you’ll notice something remarkable: a full page refresh occurs before navigating to the routing.html page. This action triggers a request to the server, which then responds by providing the requested page.

In summary, client-side routing optimizes user experience with faster transitions and interactivity, while server-side routing focuses on SEO, initial load times, accessibility, and security. Combining both approaches can create a comprehensive solution that balances performance, SEO, and user experience.