This typically happens because the website is trying to fetch all the necessary data as soon as you land on the page. It could be that a API request is being processed, or multiple APIs are fetching data sequentially, causing delays in loading the page.

The result? A poor user experience. You might think, "How can such a large company not prioritize user experience? This is disappointing." Consequently, users often leave the site, affecting key metrics and potentially impacting revenue.

But what if you could fetch the data for these heavy pages ahead of time, so that by the time a user lands on the page, they can interact with it instantly?

This is where the concept of prefetching comes in, and that's exactly what we'll be diving into in this blog post. So without further ado, let's get started!

Table of Contents

• Prefetching as a Solution

• How Prefetching Improves User Experience

• Understanding The Problem

• Solution #1: Prefetching Data in the Parent Component

• Solution #2: Prefetch Data on Page load

• How to Implement Prefetching with React

• Too much prefetching can also cause slowness

• Summary

Prefetching as a Solution

Here’s the revised version with just the grammar and spelling corrected:

For the problem above, what we want is to fetch the data for a given page before it's loaded onto the website so that the user doesn’t need to fetch the data on page load. This is called prefetching. From a technical perspective, its definition is as follows:

It is a way to fetch the required data beforehand so that the main component doesn’t need to wait for the data, thus enhancing the experience.

This can improve the user experience, boosting the customer’s confidence in your website.

Prefetching is a simple yet elegant solution that is more user-centric than a standard process. To implement prefetching, we need to understand the user’s behavior on the website. That is, the most visited pages, or which components fetch data on small interactions (such as hover).

After analyzing such scenarios, it makes sense to apply prefetching to them. However, as developers, we should be mindful of using this concept. Too much prefetching can also slow down your website since you're trying to fetch a lot of data for future scenarios, which might block the fetching of data for the main page.

How Prefetching Improves User Experience

Let us look at couple of scenarios where prefetching is beneficial:

1. Loading data/page earlier for the most visited link from your landing page. For example, consider that you have a “contact us” link. Let’s assume that this is the link that users mostly check and it contains a lot of data when it loads. Rather than loading the data when the contact us page loads, you can simply fetch the data on the homepage so that you don’t have to wait at the Contact Us page for the data. You can read more about prefetching pages here.

2. Prefetching table data for later pages.

3. Fetching data from a parent component and loading it in the child component.

4. Prefetching data that needs to be displayed in a popover.

These are some of the ways to achieve prefetching in your application and how it helps improve the user experience.

In this blog post we will be discussing about the last scenario: “prefetching data that needs to be displayed in the popover”. This is a classic example where prefetching can be beneficial and provides a smoother experience to the user.

Understanding The Problem

Let me define the problem here. Imagine the following scenario:

1. You have a component that displays specific information.

2. There is an element inside this component that shows another popover/tooltip when you hover on it.

3. The popover fetches data when it loads.

Now imagine that the user hovers on the element and needs to wait for the data to be fetched and displayed in the popover. During this wait, they see the skeleton loader.

The scenario will look like this:

It’s just frustrating how long the user has to wait whenever they hover on the image:

To solve this problem, there are two solutions that can help you get started and optimize the solution according to your needs.

Solution #1: Prefetching Data in the Parent Component

This solution is inspired from Martin Fowler’s blogpost. It allows you to fetch the data before the popup appears, instead of fetching on component load.

The popup appears when you hover on it. We can fetch the data when the mouse enters the parent component. Before the actual component—the image—is hovered on, we’ll have the data for the popover and will pass it to the popover component.

This solution doesn’t remove the loading state all together but it helps to significantly lower the chances of seeing the loading state.

Solution #2: Prefetch Data on Page load

This solution is inspired by x.com where, for the popover component, they fetch the data partially on the main page load and fetch the rest of the data when the component mounts.

As you can see from the above video, the user’s profile details are viewed in the popover. If you look closely, the details related to followers are fetched later.

This technique is highly efficient when you have a lot of data to be displayed in the popover but fetching them can be costly on popover mount or on the main page load.

A better solution would be to partially load the required data on the main page and load the rest of the data when the component mounts.

In our example, we fetched the data for the popover when the cursor entered the image’s parent element. Now imagine that you need to fetch additional details once the popover data is loaded. So based on the above x.com’s method, we can fetch additional data on popover load. Here is the outcome of it:

Here, we do the following things:

• We fetch the main data which is just necessary to render the popover when mouse enters the parent component of the image.

• This gives us enough time to fetch the main data.

• On popover load, we fetch another data, which is the album count. While the user reads data like name and email, we’ll have the next data ready to be seen.

This way, we can make small and smart tweaks to minimize the blank staring of loaders on the screen 😊.

How to Implement Prefetching with React

In this section we’ll briefly go through the how to implement the above prefetching example app.

Project Setup

To get started with creating the prefetching app, follow the process below:

You can use vitejs (this is what I used) or create-react-app to create your app. Paste the command below in your terminal:

yarn create vite prefetch-example --template react-ts

Once the app has been created, you should have the following folder structure when you open the prefetch-example folder with VS Code.

Now let us dive into the components that we are going to be building for this app.

Components

In this example we are going to be using 3 components:

• PopoverExample

• UserProfile

• UserProfileWithFetching

PopoverExample Component

Let us start with the first component which is the PopoverExample. This component displays an image avatar and some text to the right side of it. It should look like this:

The purpose of this component is to serve as an example similar to the real life scenarios. The image in this component loads a popover component when it is hovered on.

Here’s the code for the component:

import { useState } from "react";
import { useFloating, useHover, useInteractions } from "@floating-ui/react";
import ContentLoader from "react-content-loader";
import UserProfile from "./UserProfile";
import UserProfileWithFetching from "./UserProfileWithFetching";

export const MyLoader = () => (
    <ContentLoader
        speed={2}
        width={340}
        height={84}
        viewBox="0 0 340 84"
        backgroundColor="#d1d1d1"
        foregroundColor="#fafafa"
    >
        <rect x="0" y="0" rx="3" ry="3" width="67" height="11" />
        <rect x="76" y="0" rx="3" ry="3" width="140" height="11" />
        <rect x="127" y="48" rx="3" ry="3" width="53" height="11" />
        <rect x="187" y="48" rx="3" ry="3" width="72" height="11" />
        <rect x="18" y="48" rx="3" ry="3" width="100" height="11" />
        <rect x="0" y="71" rx="3" ry="3" width="37" height="11" />
        <rect x="18" y="23" rx="3" ry="3" width="140" height="11" />
        <rect x="166" y="23" rx="3" ry="3" width="173" height="11" />
    </ContentLoader>
);
export default function PopoverExample() {
    const [isOpen, setIsOpen] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState({});

    const { refs, floatingStyles, context } = useFloating({
        open: isOpen,
        onOpenChange: setIsOpen,
        placement: "top",
    });

    const hover = useHover(context);

    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);

    const handleMouseEnter = () => {
        if (Object.keys(data).length === 0) {
            setIsLoading(true);
            fetch("https://jsonplaceholder.typicode.com/users/1")
                .then((resp) => resp.json())
                .then((data) => {
                    setData(data);
                    setIsLoading(false);
                });
        }
    };

    return (
        <div
            id="hover-example"
            style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                textAlign: "left",
            }}
            onMouseEnter={handleMouseEnter}
        >
            <span
                style={{
                    padding: "1rem",
                }}
            >
                <img
                    ref={refs.setReference}
                    {...getReferenceProps()}
                    style={{
                        borderRadius: "50%",
                    }}
                    src="https://cdn.jsdelivr.net/gh/alohe/avatars/png/vibrent_5.png"
                />
            </span>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged. It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including versions
                of Lorem Ipsum.
            </p>
            {isOpen && (
                <div
                    className="floating"
                    ref={refs.setFloating}
                    style={{
                        ...floatingStyles,
                        backgroundColor: "white",
                        color: "black",
                        padding: "1rem",
                        fontSize: "1rem",
                    }}
                    {...getFloatingProps()}
                >
                    {isLoading ? (
                        <MyLoader />
                    ) : (
                        <UserProfile hasAdditionalDetails {...data} />
                    )}
                    {/* <UserProfileWithFetching /> */}
                </div>
            )}
        </div>
    );
}

There are couple of things happening here, let me explain them step-by-step:

• We have a parent div named hover-example that contains an image and some text.

• Next, we conditionally rendered a div with class name of floating. This is the actual popover component that opens when you hover on the image.

  • We made use of the floating-ui library and its basic hover example to achieve the hover effect for the popover.

• Inside the popover we conditionally loaded the UserProfile and the skeleton loader. This loader appears when we are fetching the data for the user’s profile. More on this later.

• We made use of the react-content-loader library in the MyLoader component. This library also has a website that helps you to create loaders, you can check it out here.

UserProfile Component

Now that we have defined our Popover example, it is time for us to get into the details of the UserProfile component.

This component appears inside the popover component. The purpose of this component is to load the name email phone website details which are fetched from JSON placeholder API.

To demonstrate the prefetching example, we have to make sure that the UserProfile component only acts as a presentational component; that is, no explicit fetching logic is present inside of it.

The key thing to note about this component is that fetching the data happens from the parent component which is the PopoverExample component. In this component, we start fetching the data when the mouse enters this component (the mouseenter event). This is the solution #1 we discussed previously.

This gives you enough time for fetching the data until the user hovers on the image. Here’s the code:

import { useEffect, useState } from "react";
import ContentLoader from "react-content-loader";

const MyLoader = () => (
    <ContentLoader
        speed={2}
        viewBox="0 0 476 124"
        backgroundColor="#d1d1d1"
        foregroundColor="#fafafa"
    >
        <rect x="4" y="43" rx="0" ry="0" width="98" height="30" />
    </ContentLoader>
);

export default function UserProfile(props: Record<string, string | boolean>) {
    const { name, email, phone, website, hasAdditionalDetails } = props;
    const [isLoading, setIsLoading] = useState(false);
    const [additionalData, setAdditionalData] = useState(0);

    useEffect(() => {
        if (hasAdditionalDetails) {
            setIsLoading(true);
            fetch("https://jsonplaceholder.typicode.com/albums")
                .then((resp) => resp.json())
                .then((data: Array<unknown>) => {
                    const albumCount = data.reduce((acc, curr) => {
                        if (curr.userId === 1) acc += 1;

                        return acc;
                    }, 0);
                    setAdditionalData(albumCount);
                })
                .finally(() => {
                    setIsLoading(false);
                });
        }
    }, [hasAdditionalDetails]);

    return (
        <div id="user-profile">
            <div id="user-name">name: {name}</div>
            <div id="user-email">email: {email}</div>
            <div id="user-phone">phone: {phone}</div>
            <div id="user-website">website: {website}</div>
            {hasAdditionalDetails && (
                <>
                    {isLoading ? (
                        <MyLoader />
                    ) : (
                        <div id="user-albums">Album Count: {additionalData}</div>
                    )}
                </>
            )}
        </div>
    );
}

This component makes use of the hasAdditionalDetails prop. The purpose of this prop is to load additional data when the component mounts. It illustrates the solution #2 mentioned above.

UserProfileWithFetching Component

This component is pretty similar to that of the UserProfile component. It just contains the logic for fetching data when the component loads. The purpose of this component is to show what the general solution without the prefetching technique would look like.

So this component will always load the data when the component mounts, which displays the skeleton loader.

Here is the code:

import { useEffect, useState } from "react";
import { MyLoader } from "./PopoverExample";

export default function UserProfileWithFetching() {
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState<Record<string, string>>({});

    useEffect(() => {
        setIsLoading(true);
        fetch("https://jsonplaceholder.typicode.com/users/1")
            .then((resp) => resp.json())
            .then((data) => {
                setData(data);
                setIsLoading(false);
            });
    }, []);

    if (isLoading) return <MyLoader />;

    return (
        <div id="user-profile">
            <div id="user-name">name: {data.name}</div>
            <div id="user-email">email: {data.email}</div>
            <div id="user-phone">phone: {data.phone}</div>
            <div id="user-website">website: {data.website}</div>
        </div>
    );
}

The entire code for this app can be found here.

Too much prefetching can also cause slowness

A word of advice, too much prefetching is not good because:

• It might slow your app down.

• It can degrade user experience if prefetching is not applied strategically.

Prefetching needs to be applied when you know the behavior of the user. That is, you are able to predict the user movement by metrics and be able to tell if they visit a page often. In that case, prefetching is a good idea.

So remember to always apply prefetching strategically.

Summary

That’s all folks! Hope you like my blog post. In this blogpost, you learned that implementing prefetching can significantly enhance your web application’s speed and responsiveness, improving user satisfaction.

For further reading, please refer to the below articles:

• Prefetching pages

• Preload, Prefetch And Priorities in Chrome

• What not to prefetch

For more content, you can follow me on Twitter, GitHub, and LinkedIn.

At first these configuration choices might look like some sort of magic. But once you start to understand their purpose, it becomes clear that these configurations make sense.

Tools such as ESLint, Prettier, Git hooks, and others can help you maintain your code efficiently and judiciously. In this article, we will be diving into these tools that make your code maintainable and that can help you to boost your (and your team's) productivity as well.

So without further ado, let’s get started.

Table of Contents:

• Prerequisites
• What Tools and Configs Are We Looking At?
• Why These Conventions Are Useful
• How to Setup Coding Conventions
• What is ESLint?
• What are Git Hooks?
• Set Up the Project
• Rule #1: no-unused-vars
• Rule #2: no-console
• Rule #3: no-duplicate-imports and Sorting Imports
• How to Set Up Git Hooks
• Gitleaks: Remove Secrets Before Commits
• Run Unit Tests Before Commits
• Summary

Prerequisites

Having some knowledge on the below topics might help you gain insights from this article. So I highly recommend that you go through the below resources (or make sure you're familiar with the tools/concepts listed):

• Basics of ESLint
• Setting up a simple JS project with npm or yarn
• Bash Scripting
• Testing code with Jest

What Tools and Configs Are We Looking At?

I have seen many repositories that enforce their own strict conventions – and I totally agree with them. One such example I found is the Cesium repository and their style guides.

Taking inspiration from various other repositories, we are going to dive into the following guidelines in this article to help you have a better developer experience:

• No console statements
• No unused imports and variables
• Sorting import statements
• Check if any passwords, API keys, or secrets are being pushed before a commit
• Check if any tests are failing before pushing to a commit

Why These Conventions Are Useful

I found these rules to be useful because they increase your productivity as a dev. They also align development teams so that everyone follows the same conventions/coding standards.

These conventions have also made me vigilant about writing good code and following coding standards. Now it has become my habit to think in these terms and standards because, for example, having unused imports and console statements clutters your code unnecessarily.

I find sorting imports makes them more readable and easy to manage. I now have a habit of looking at the imports in a React component based on:

• Library imports
• Relative imports

I've also found tools that check if passwords or secrets are being pushed to be super useful, since they might appear later in the commit history.

But above all, I like having a rule to check if any tests are failing or not before making a commit. I believe that this is a very smart strategy, because in this case you're checking beforehand for any unit test failures – so you'll know if anything needs to get fixed. This also avoids overloading the CI pipelines that you're running on remote repositories

How to Setup Coding Conventions

Before we dive into incorporating these tools into your project, I would like to categorize them into the following:

• ESLint-based rules
• Git hooks

Let's first understand these categories.

What is ESLint?

ESLint is a highly configurable JavaScript linter that helps you detect and fix the problems in your JavaScript code. Each configuration from plugins to rules and more are checked against your code and it applies the value against that rule if the condition is met.

You can read more about ESLint’s core concepts here.

What are Git Hooks?

Git hooks is a feature of Git that helps Git tap into its workflows so that some custom actions can be performed based on certain events. For example, you can run a script that will prettify some staged changes before making a commit.

There are multiple local Git hooks available to you. Some of them are below:

applypatch-msg.sample       pre-push.sample
commit-msg.sample           pre-rebase.sample
post-update.sample          prepare-commit-msg.sample
pre-applypatch.sample       update.sample
pre-commit.sample

You can read more about Git hooks here.

Now that we know why we're dividing up these conventions into these categories, let's start our journey of understanding the rules and tools that you're going to learn about that you can use in your projects.

Set Up the Project

To demonstrate all the rules and tools that we discussed above, we will need a simple vanilla JavaScript project. I've chosen a vanilla JS project because creating a React-based Vite project would be overkill for this guide.

So to start creating the project, first create a directory named eslint-hook-examples with the below command:

mkdir eslint-hook-examples
cd eslint-hook-examples

Inside this folder run the below command to initialize a vanilla JS project:

yarn init

Answer the question stated in the prompt and you should be good to go.

Now let's create a file named index.js inside this project and place the following content in it:

import { get, debounce } from "lodash";
import { throttle } from "lodash";

const num = 1;
const x = 2;

console.log({ num });

I have created the above code keeping in mind that I want to demonstrate different ESLint rules and Git hooks.

Now you need to add ESLint to your project. You can do that by running the following command:

yarn add --dev eslint @eslint/js

Next, you need to create a file named eslint.config.js into your root directory – that is, where you have your package.json file. Place the following content inside this file:

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "warn",
    },
  },
];

ESLint works on the configuration files that we set in the eslint.config.js file. This format of configurations is called a flat file format configuration. This is now supported with newer versions of ESLint, greater than v 9. Versions below 9 use a different file naming convention .eslintrc file which is placed inside the root dir of the project.

You can read more about flat file configuration here.

The above content of the eslint.config.js file loads the recommend configs for JavaScript with the help of js.configs.recommended. It also introduces another object that defines the rules that this configurations enables.

Right now it enables no-unused-vars which is set to a warn value. This warn value tells ESLint to show warning message while linting. You can also set this value to error if you want the linter to show this case as an error.

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "error",
    },
  },
];

Let's give this setup a spin and run our ESLinting on index.js file. To do that, run the following command:

npx eslint ./index.js

Output of running ESLint CLI

After running the linter, you'll get the above issues. All our unused variables are getting flagged under the no-unused-vars rule that you set in your eslint-config.js file.

So this is how linting works. But wouldn’t it be awesome if you could get these error messages in your IDE itself with a squiggly line below each variable name that is unused? Well, yes – it's absolutely possible. In VS Code you can do this by adding the ESLint VS code extension.

Once the extension is installed in your VS Code, you'll want to configure it so that it picks up the configuration file that you have created (eslint.config.js).

To configure your extension, follow the gif/steps below to go through the settings of the extension.

VSCode ESLint Extension

• Click on the VSCode's extension
• Click on the ESLint extension
• Then below the extension name, click on the gear ⚙️ icon.
• Next, click on the extension settings from the dropdown
• Finally, click on settings.json.

Inside the settings.json file, add the following code at the bottom of the file:

"eslint.options": {
         "overrideConfigFile": "./eslint.config.js" 
    },

This makes sure that the extension picks up the config file that you created at the project’s root location.

A quick thing to note is that all the rules can also be set to warn so that VSCode can give warning lints when the rule is met.

Here is how the configured extension will look like on a file:

Linter when configured

Let's now dive into our first rule: the no unused variable rule.

Rule #1: no-unused-vars

_Photo by [Unsplash](https://unsplash.com/@v2osk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">v2osk on <a href="https://unsplash.com/photos/assorted-armchair-on-wall-near-door-1hUY8SpJ8Cw?utm_content=creditCopyText&utm_medium=referral&utmsource=unsplash)

This is one of those ESLint rules that doesn’t allow you to keep unused variables in your codebase. You can read more about this rule here.

To setup this rule in your codebase, you'll add it in the rules section of the eslint.config.js file:

export default [
  {
    rules: {
      "no-unused-vars": "error",
    },
  },
];

We already looked at this rule in the setting up the project section. But there is no harm in re-visiting it.

💡 NOTE: This rule is already present in the js.configs.recommended which consists of all the recommended ESLint rules

In action, this rule will highlight your unused variables like below:

Output of rule#1 is configured

Rule #2: no-console

I find this rule super useful because unnecessary logs that aren’t important shouldn’t be present in the codebase. We generally just add these logs for debugging purposes.

This can be dangerous because console.log statements can reveal sensitive personal data from your users in the browser’s console if you are dealing with personal data. So you have to be careful about that.

For example, the chance is high that you might forget to remove a console statement. Later the same thing will bite you when audits happen.

I understand that these logs are helpful in development mode. So in those cases where the logs are environment-dependent, it's better if you wrap these console.log statements with a custom wrapper that helps you to enable/disable the logs based on the environment.

So to avoid all this hassle, ESLint has the no-console rule. This rule will provide linting whenever it finds console statement in your code base.

To configure this rule, you need to do the same thing that we did earlier:

export default [
  {
    rules: {
      "no-unused-vars": "error",
      "no-console": "error", // <---- Add rule here
    },
  },
];

In action, this rule will lint your codebase like below:

console.log becomes an error when rule #2 is configured

Rule #3: no-duplicate-imports and Sorting Imports

What I love about this rule is that it helps you to keep your imports super readable. Have you seen a big React component file that has all its imports and that looks messed up? Yeah it's not fun.

You might even have different imports that are from the same library. These kinds of ways of importing libs can be chaotic and hard to follow. This is where the no-duplicate-imports ESLint rule and eslint-plugin-simple-import-sort ESLint plugin comes into play.

no-duplicate-imports is an ESLint rule that states that all the imports from a single module can be grouped into a single import statement.

Consider the following example:

import { get, set } from 'lodash';
import { zip } from 'lodash'; // <----- error as per the no-duplicate-imports
import React from 'react';

As you can see, the imports in the first two lines belong to the same module – that is, the Lodash library. If the rule is followed, then the code will look like this:

import { get, set, zip } from 'lodash';
import React from 'react';

ESLint doesn’t have any rule that will help you sort your imports. In this case, you can get help from different community-based plugins on awesome-eslint.

awesome-eslint is a repository of ESLint configs, plugins, parsers, formatters, and so on. I found this plugin called eslint-plugin-simple-import-sort that helps you sort your imports alphabetically, with library imports first and then the relative imports.

Here is a snippet of the example from the actual plugin repo:

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

import styles from "./styles.css";
import type { User } from "../../types";
import { getUser } from "../../api";

import PropTypes from "prop-types";
import classnames from "classnames";
import { truncate, formatNumber } from "../../utils";

⬇️

import classnames from "classnames";
import PropTypes from "prop-types";
import React from "react";

import { getUser } from "../../api";
import type { User } from "../../types";
import { formatNumber, truncate } from "../../utils";
import Button from "../Button";
import styles from "./styles.css";

You can also set the sorting order of this plugin to something different, which you can read more about here.

Let's incorporate these rules and plugins in our project. First, you'll add the no-duplicate-imports rule in your config:

export default [
    {
        rules: {
            "no-duplicate-imports": "error", // <---- HERE
            "no-unused-vars": "error",
            "no-console": "error",
        },
    },
];

It's very similar to the rules that we configured earlier. We set the rule’s value to be error.

Next, start with configuring the eslint-plugin-simple-import-sort plugin in your project. First, install this plugin with the following command:

yarn add --dev eslint-plugin-simple-import-sort

Once this is installed, make sure this plugin is enabled by adding it into your eslint.config.js file like below:

import simpleImportSort from "eslint-plugin-simple-import-sort";

export default [
  {
    plugins: {
      "simple-import-sort": simpleImportSort, // <--- add plugin
    },
    rules: {
      "no-duplicate-imports": "error",
      "no-unused-vars": "error",
      "no-console": "error",
      "simple-import-sort/imports": "error", // <--- refer the rule of the plugin
    },
  },
];

In this code, we first import the plugin as simpleImportSort. Then in the exported array, just above the rules property, we add the plugins property. This property will consist of all the plugins that we want to enable in the form of key being the plugin namespace and value being the plugin object.

In the above code, the simple-import-sort is the plugin namespace and its value is the plugin object which is simpleImportSort.

Now to use the rules that are present inside the plugins, all you have to do is refer to the plugin namespace followed by the rule name as the key and value to be the error – in our case inside the rules section.

In our config, we refer to the rule imports of the simple-import-sort plugin space as simple-import-sort/imports.

Once you've added this rule into the config, you can see it in action as below:

Imports getting sorted

You can also configure this sorting of imports when you save your code by enabling the codeActionsOnSave in the settings of the ESLint VSCode extension:

{
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.sideBar.location": "right",
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.colorTheme": "Default Dark+",
    "editor.stickyScroll.enabled": true,
    "prettier.useTabs": true,
    "editor.formatOnSave": true,
    "window.zoomLevel": 1,
    "eslint.options": {
         "overrideConfigFile": "./eslint.config.js" 
    },
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": { //< ------ Add this property
        "source.fixAll.eslint": "explicit"
    }
}

Now that you understand and have added the ESLint rules and plugins, let's now understand and implement Git hooks.

How to Set Up Git Hooks

Git hooks are nothing but Git features on steroids. All the details and the origin or Git hooks are out of the scope of this article, so I highly recommend that you read more about them here.

There are many libraries out there that will help you manage your Git hooks. I will use Husky here. To install Husky in your codebase, run the below commands:

yarn add --dev husky
# Add pinst ONLY if your package is not private
yarn add --dev pinst

Once it's installed, make sure to initialize it by doing the following:

npx husky init

This makes sure that it creates the .husky folder that consists of the precommit script. It also adds the prepare script inside the package.json file.

Now that you've configured Husky in your project, we'll implement our first pre-commit hook feature.

Gitleaks: Remove Secrets Before Commits

Gitleaks is a tool that analyses your codebase for any API Keys, secrets, or passwords. According to the repository:

"Gitleaks is a SAST tool for detecting and preventing hardcoded secrets like passwords, API keys, and tokens in Git repos. Gitleaks is an easy-to-use, all-in-one solution for detecting secrets, past or present, in your code."

Let's now implement Gitleaks in our project with the help of precommit hooks with Husky.

First, install Gitleaks with the following command:

brew install gitleaks

Once this is installed, start by editing the precommit script file that is present inside the .husky folder.

Our aim here is to check that all the files that are staged are being analysed by the Gitleaks tool before the commit happens. The precommit hook is the best option where you can run different scripts before any commit happens.

Gitleaks already has one example in the Python precommit hook. It checks if the Gitleaks hook is enabled. If it is enabled, then it runs the Gitleaks protect function on the staged files. You can find that code here.

I converted this script into a bash script with the help of ChatGPT. Here is the result that it gave me:

#!/bin/bash

# Helper script to be used as a pre-commit hook.

gitleaksEnabled() {
    # Determine if the pre-commit hook for gitleaks is enabled.
    local out
    out=$(git config --bool hooks.gitleaks)
    if [ "$out" == "false" ]; then
        return 1
    fi
    return 0
}

# Check if gitleaks is installed
if ! command -v gitleaks &> /dev/null; then
    echo 'Error: gitleaks is not installed on your system.'
    echo 'Please install gitleaks to use this pre-commit hook.'
    exit 1
fi

if gitleaksEnabled; then
    gitleaks protect -v --staged
    exitCode=$?
    if [ $exitCode -eq 1 ]; then
        echo 'Warning: gitleaks has detected sensitive information in your changes.
To disable the gitleaks precommit hook run the following command:

    git config hooks.gitleaks false
'
        exit 1
    fi
else
    echo 'gitleaks precommit disabled (enable with `git config hooks.gitleaks true`)'
fi

In this script, I also asked ChatGPT to add an additional feature to check if Gitleaks is installed in the system or not. If it isn’t, then the precommit hook stops its execution with exit code 1.

Now to try out your precommit hook, you should first stage the changes:

git add .

Next, commit the changes as follows:

git commit -m 'feat: added gitleaks precommit hook'

This will run the precommit hook that you defined. It will look like below:

gitleaks tool running before commit

Run Unit Tests Before Commits

Another practical use of Git hooks is running unit tests on staged files. This is helpful as the check occurs locally and isn't pushed to the remote repository.

While running the unit test on CI isn't an issue, executing the test on staged and related files can save some time. This allows the CI to focus on running the complete unit test suite before merging the commit to the release branch.

So below is the flow for using the precommit hook that will run the unit tests on staged files:

• Find the staged files that have *.test.js/ts file extensions
• Run these staged tests along with their related code
• If there are any test failures or errors while testing, then exit the precommit hook (so the commit doesn't happen).

Step 1: Find the files that are staged

The first step is to find all the file names that are staged with the extension *.test.js. To do that, you can use the git diff command:

git diff --cached --name-only --diff-filter=ACM | grep '\\.test\\.js$'

git diff helps you find the difference between the modified changes and the current file. You can read more about git diff and its options here.

Next, using the pipe symbol, we filter the output of the previous git diff command with the help of grep. We tell grep to find all the file names that end with the .test.js extension.

Step 2: Run the unit test on staged files

Now to run the unit test, make sure that you have installed Jest in your project. To run the unit test on the staged files and the files related to it, run the below command:

yarn run test --coverage --bail --findRelatedTests <staged-files-ending-with-.test.js>

The above command will run the test on the current staged files and the files related to it with the --findRelatedTests option. It will also provide a coverage report with the --coverage option and will interrupt the tests when any failure is found with the --bail option.

Now the main part of the above command that is you need to provide the files that are staged with the .test.js extension. To do that, use the command in step 1. Since you're using a bash script, store step 1’s output in a variable and pass it on to the unit test command:

# List the staged *.test.js files
stagedTestFiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\\.test\\.js$')

yarn run test --coverage --bail --findRelatedTests $stagedTestFiles

You will add the above commands in your precommit script. The final pre-commit hook script will look like this:

#!/bin/bash

# Helper script to be used as a pre-commit hook.

gitleaksEnabled() {
    # Determine if the pre-commit hook for gitleaks is enabled.
    local out
    out=$(git config --bool hooks.gitleaks)
    if [ "$out" == "false" ]; then
        return 1
    fi
    return 0
}

# For ============================= UNIT TESTING =============================
# List the staged *.test.js files
stagedTestFiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\\.test\\.js$')

if [ -n "$stagedTestFiles" ]; then
    echo "Staged *.test.js files:"
    yarn run test --coverage --bail --findRelatedTests $stagedTestFiles
else
    echo "No *.test.js files are staged."
fi

# Check if gitleaks is installed
if ! command -v gitleaks &> /dev/null; then
    echo 'Error: gitleaks is not installed on your system.'
    echo 'Please install gitleaks to use this pre-commit hook.'
    exit 1
fi

# For ============================= CHECKING SECRETS =============================
if gitleaksEnabled; then
    gitleaks protect -v --staged
    exitCode=$?
    if [ $exitCode -eq 1 ]; then
        echo 'Warning: gitleaks has detected sensitive information in your changes.
To disable the gitleaks precommit hook run the following command:

    git config hooks.gitleaks false
'
        exit 1
    fi
else
    echo 'gitleaks precommit disabled (enable with `git config hooks.gitleaks true`)'
fi

To test the precommit hook on the unit test, I created a sample test file: index.test.js:

const sum = 1 + 2;

describe("test suite", () => {
    it("check sum suit", () => {
        expect(sum).toBe(3);
    });
});

Here is how the precommit hook generates the output when the test passes and fails.

Note: Here I tried to purposefully generate the error in the index.test.js file.

Run the below command to see the output:

git commit -m 'test commit'

Failed Unit Tests

Passing Unit Tests

Summary

To summarise, here's what you learned about in this article:

• What ESLint is and how you can configure it with rules and plugins
• We also looked at VSCode’s ESLint extension and configured it to use our existing flat configuration file
• We learned about Git hooks and how you can use Husky to manage your hooks.
• We looked into how you can remove secrets and perform unit testing before any commit.

I learned a lot while writing this guide, and I hope you got a lot out of it!

You can find the final code here.

Thanks a lot for reading my article! You can follow me on Twitter, GitHub, and LinkedIn.

In this tutorial, I’ll guide you through the process of creating an image carousel component that looks just like the ones you see on many OTT platforms (think Netflix).

We'll start by creating atomic components, such as Tags,Description, Title, and so on that will display various information about each movie title. Then, we'll stitch these components together via a compound pattern to create a Banner component that displays each movie title in the form of an image. Finally, we'll use the HeroBanner component to build the image carousel component using the Swiper package.

By the end of this post, you'll have the knowledge and skills to create a beautiful and functional image carousel component that will impress your users. Let's get started!

Table of Contents

• Prerequisites
• How to Build the Banner component
• How to Build the Individual Components
• How to Stitch All the Components Together with the Compound Pattern
• How to Build the Image Carousel Component
• Summary

Prerequisites

Before heading on to the next sections, make sure you're comfortable with the following topics:

• CSS – An Intermediate knowledge of CSS is required to style the small components that we will be creating in this Post.
• Styled components – You'll need to be familiar with what styled-components are since we will be using it to create a version of a component that contains static/dynamic css in it. You can learn more about styled-components here.
• Compound pattern – We'll use this pattern to stitch individual components together so that they can be used later in a convenient way. You can read more about compound pattern here.
• TypeScript – We'll use TypeScript in this entire tutorial. It provides good type-safety on top of JavaScript. Having some basic knowledge of it will definitely be fruitful here.

How to Build the Banner Component

The below gif represents an image carousel component. If you don’t know what an image carousel is, then let me give you a brief overview.

An image carousel is a component that consists of images that rotate a fixed number of times or can be rotated with the help of navigation icons.

In this tutorial, we'll create this component. But before jumping into the image carousel, we'll start with a very basic component which is the Banner component.

Banner Component is going to be a component that will help us to display:

• Title
• Tags
• Description
• Background image

After that, with the help of styled-components and CSS, we'll make it look beautiful just like we see on most OTT platforms.

Building this component involves the below steps:

1. Building the individual components
2. Stitching all the components together with the compound pattern

How to Build the Individual Components

Our banner component will comprise of some basic smaller components that cannot be further broken down. These components are known as atomic components. Let's first build the simplest component which is the Title component:

First, create a functional component like below:

const Title = (props: { title: string }) => <div>{props.title}</div>;

We'll also need to style this component. We create a styled div component and place it inside the above Title component like this:

const StyledTitle = styled.div`
  font-size: 28px;
  font-weight: 600;
  color: white;
`;

const Title = (props: { title: string }) => (
  <StyledTitle>{props.title}</StyledTitle>
);

The next component in our line-up is the Tags component. It's a div element that maps over the string (tags) and displays them in the span element:

Create a functional component that accepts an array of strings as a prop and displays them in the span element with a map function:

const Tags = (props: { tags: string[] }) => {
  return (
    <div>
      {props.tags.map((tag: string, index: number) => (
        <span key={`tag-${tag}-index`}>{tag}</span>
      ))}
    </div>
  );
};

Now let's create a styled div component that acts as a replacement for the above div element. We create this wrapper component to apply styles to the children's elements:

const StyledTag = styled.div`
  padding: 0.5rem 0;

  & span {
    margin-right: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
  }
`;

Finally, we stitch these components together:

const Tags = (props: { tags: string[] }) => {
  return (
    <StyledTag>
      {tags.map((tag: string, index: number) => (
        <span key={`tag-${tag}-index`}>{tag}</span>
      ))}
    </StyledTag>
  );
};

Similarly, we create another component called the Description component. It helps to display the description of the movie title. It’s also a functional component that accepts a description prop and displays it using a styled-component:

const StyledDescription = styled.div`
  text-align: start;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  max-width: 50%;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
`;

const Description = (props: { description: string }) => (
  <StyledDescription>{description}</StyledDescription>
);

Finally, we'll create the Banner component. The purpose of this component is to display the background image of the movie title along with the children passed to it. Let's create a very basic version of this component:

const Banner = (props) => {
  return (
    <div
      style={{
        backgroundImage: `url(${props.image})`,
        width: "100%",
        height: "400px",
      }}
    >
      <div>{props.children}</div>
    </div>
  );
};

<Banner image="https://m.media-amazon.com/images/M/MV5BZjRlNDUxZjAtOGQ4OC00OTNlLTgxNmQtYTBmMDgwZmNmNjkxXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg">
  <h1 style={{ color: "yellow" }}>Die hard</h1>
</Banner>;

If we execute this component, it does what we expect it to do, “Show a background Image along with children component” like below:

But the style seems to be off – we don’t want this component to look this ugly. What we need is to apply CSS to get things in the right places at the right positions 🙂 (pun intended).

We want the movie poster to be at the right and all the children components should be to the left of it. Now let's create a styled component to do this:

const StyledContainer = styled.div`
  height: 400px;
  width: 100%;
  display: flex;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 60%, transparent),
    url(${(props) => props.image});
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 10px;
  }
`;

const Banner = (props) => {
  return (
    <StyledContainer image={props.image}>
      <div>{props.children}</div>
    </StyledContainer>
  );
};

<Banner image="https://m.media-amazon.com/images/M/MV5BZjRlNDUxZjAtOGQ4OC00OTNlLTgxNmQtYTBmMDgwZmNmNjkxXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg">
  <h1 style={{ color: "yellow" }}>Die hard</h1>
</Banner>;

We have created a new styled component called StyledContainer. It consists of CSS that will align the image to the right and apply a black gradient around the container so that only the movie title is visible.

Next, in the & > div section we make sure the all the children components are aligned to the left. Here is what it will look like:

Yupiee! our Banner component is all set. Let's now test this banner component with all the components that we created above. Place the Title, Tags, and Description component inside the Banner component like below:

<Banner image="https://m.media-amazon.com/images/M/MV5BZjRlNDUxZjAtOGQ4OC00OTNlLTgxNmQtYTBmMDgwZmNmNjkxXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg">
  <Title title="Die Hard" />
  <Tags tags={["Action", "Thriller"]} />
  <Description description="NYPD cop John McClane's plan to reconcile with his estranged wife is thrown for a serious loop when, minutes after he arrives at her office, the entire building is overtaken by a group of terrorists. With little help from the LAPD, wisecracking McClane sets out to single-handedly rescue the hostages and bring the bad guys down." />
</Banner>;

This is how our Banner component will look like.

How to Stitch All the Components Together with the Compound Pattern

We want our Banner component to be easy to use, and it should be flexible. We can stitch the Title, Tags, and Description components into the Banner component with the help of a compound pattern.

Components created with this pattern share the state and logic between their internal components. An example of such a compound pattern is a Menu component provided by semantic UI.

<Menu>
  <Menu.Item />
</Menu>;

The advantage of using such a pattern is that we just need to import one component – in our case we will just import the Banner component. All its internal components can be used directly like below:

<Banner.Title />
<Banner.Tags />
<Banner.Description />

Now let's start doing the same for our Banner component.

Since we have all the components ready, I have placed the same inside one file:

import "./styles.css";
import styled from "styled-components";
import React from "react";

export type BannerProps = {
  title: string,
  tags: string[],
  description: string,
  image: string,
};

const StyledTitle = styled.div`
  font-size: 28px;
  font-weight: 600;
  color: white;
`;

const StyledTag = styled.div`
  padding: 0.5rem 0;

  & span {
    margin-right: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
  }
`;

const StyledDescription = styled.div`
  text-align: start;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  max-width: 50%;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
`;
const Container = styled.div`
  height: 400px;
  width: 100%;
  display: flex;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 60%, transparent),
    url(${(props: Pick<BannerProps, "image">) => props.image});
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 10px;
  }
`;

const Title = ({ title }: Pick<BannerProps, "title">) => (
  <StyledTitle>{title}</StyledTitle>
);

const Tags = ({ tags }: Pick<BannerProps, "tags">) => {
  return (
    <StyledTag>
      {tags.map((tag) => (
        <span key={`tag-${tag}`}>{tag}</span>
      ))}
    </StyledTag>
  );
};

const Description = ({ description }: Pick<BannerProps, "description">) => (
  <StyledDescription>{description}</StyledDescription>
);

const Banner = (props: any) => {
  return (
    <Container image={props.image}>
      <div>{props.children}</div>
    </Container>
  );
};

Banner.Title = Title;
Banner.Tags = Tags;
Banner.Description = Description;

export default Banner;

Quick explanation of the above code:

First, we create the typings for the Banner Component called BannerProps. It looks like this:

export type BannerProps = {
  title: string;
  tags: string[];
  description: string;
  image: string;
};

Next, we place all the atomic components that we created here. We also make sure that we use the BannerProps type in each function definition of the atomic components, for example:

const Title = ({ title }: Pick<BannerProps, "title">) => (
  <StyledTitle>{title}</StyledTitle>
);

As you can see, we use the Pick utility function of TypeScript to pick up only the title prop from the Banner props.

Lastly, we stitch all these components by creating a new property to the Banner component like below and export this component:

Banner.Title = Title;
Banner.Tags = Tags;
Banner.Description = Description;

export default Banner;

NOTE: For the purpose of this tutorial, we are using the compound pattern, but you can use these atomic components independently. I chose to use the compound pattern here to teach you how to use it. You can apply it in different scenarios like when building a select button or a menu component.

Nice job – we have finally stitched all our atomic components into a single Banner component. In the next section, we are going to talk about using this component.

How to Build the Image Carousel Component

Finally, we have arrived at the point where we can build the image carousel component. In this section we are going to do the following things:

• Build a Banner Tile component that will act as a single image inside the carousel
• Build the image carousel component.

Let's create the Banner Tile component first. The intention of this component is to use the Banner component.

First, we will start by creating sample data which we can iterate over. Create a file named sampledata.json and place the following content inside it:

{
  "data": [
    {
      "title": "The Last of Us",
      "genres": ["Drama"],
      "cover_url": "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
      "description": "Twenty years after modern civilization has been destroyed, Joel, a hardened survivor, is hired to smuggle Ellie, a 14-year-old girl, out of an oppressive quarantine zone. What starts as a small job soon becomes a brutal, heartbreaking journey, as they both must traverse the United States and depend on each other for survival."
    },
    {
      "title": "Fight Club",
      "genres": ["Drama", "Thriller", "Comedy"],
      "cover_url": "https://www.themoviedb.org/t/p/w300_and_h450_bestv2/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg",
      "description": "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground fight clubs forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion."
    },
    {
      "title": "Creed III",
      "genres": ["Drama", "Thriller"],
      "cover_url": "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/cvsXj3I9Q2iyyIo95AecSd1tad7.jpg",
      "description": "After dominating the boxing world, Adonis Creed has been thriving in both his career and family life. When a childhood friend and former boxing prodigy, Damien Anderson, resurfaces after serving a long sentence in prison, he is eager to prove that he deserves his shot in the ring. The face-off between former friends is more than just a fight. To settle the score, Adonis must put his future on the line to battle Damien - a fighter who has nothing to lose."
    },
    {
      "title": "Die Hard",
      "genres": ["Action", "Thriller"],
      "cover_url": "https://www.themoviedb.org/t/p/w1280/yFihWxQcmqcaBR31QM6Y8gT6aYV.jpg",
      "description": "NYPD cop John McClane's plan to reconcile with his estranged wife is thrown for a serious loop when, minutes after he arrives at her office, the entire building is overtaken by a group of terrorists. With little help from the LAPD, wisecracking McClane sets out to single-handedly rescue the hostages and bring the bad guys down."
    }
  ]
}

NOTE: I used the themoviedb.org to get the above data.

Next, create a file named BannerTile.tsx inside the components directory. Then create a functional component that makes use of the Banner component like below:

import Banner, { BannerProps } from "./Banner";

export default function BannerTile(props: BannerProps) {
  const { title, image, tags, description } = props;
  return (
    <Banner image={image}>
      <Banner.Title title={title} />
      <Banner.Tags tags={tags} />
      <Banner.Description description={description} />
    </Banner>
  );
}

Now to test this component, we can use sampledata.json. Go through the following steps to test the BannerTile component:

First, we should import the data from the sampledata.json:

const sampleData = require('./sampledata.json');

Next, we iterate over this data with the map function. We also make sure that we call the BannerTile component on each of the data:

<div>
  {sampleData.data.map((item: SampleData, index: number) => (
    <BannerTile
      key={`key-${item.title}-${index}`}
      title={item.title}
      tags={item.genres}
      image={item.cover_url}
      description={item.description}
    />
  ))}
</div>;

The output after running this code will look like the below:

To implement the image carousel we can use a package called Swiper. We just need to place all the BannerTiles inside the component that is provided by the swiper. Now without any further delay, let's get started.

To install the swiper package, use the below command:

npm i swiper

Now let's create a new file named HeroBanner.tsx. This file will contain the HeroBanner component. The purpose of this component is to iterate over the movie data and display them via the image carousel and the BannerTile component.

Once we have installed the swiper library we can start consuming it. As per the swiper.js documentation, we need to import the CSS provided by it:

import "swiper/css";
import "swiper/css/navigation";

Next, we also need to import the components from swiper.js that will help us to build the image carousel. Import the following components:

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";

Now let's also import the BannerTile, the types associated with the Banner, and the sampleData from the sampledata.json:

import "swiper/css";
import "swiper/css/navigation";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";

import BannerTile from "./BannerTile";
import { BannerProps } from "./Banner";

const sampleData = require("../utilities/sampledata.json");

The sampleData that we imported just now only contains the title, genres, cover_url, and description. This is the perfect time to make use of the type BannerProps to filter out only the types that we need.

type SampleData = Pick<BannerProps, 'title' | 'description'> & {
    genres: string[];
  cover_url: string;
}

Now let's start with actually building this component. Create a functional component called HeroBanner and place the following code inside it:

const HeroBanner = () => (
  <Swiper navigation modules={[Navigation]} slidesPerView={1}>
    {sampleData.data.map((item: SampleData, index: number) => (
      <SwiperSlide key={`key-${item.title}-${index}`}>
        <BannerTile
          title={item.title}
          tags={item.genres}
          image={item.cover_url}
          description={item.description}
        />
      </SwiperSlide>
    ))}
  </Swiper>
);

In the HeroBanner component we do the following things:

• We use the Swiper component provided by the swiper.js library that acts as a wrapper container around all the images, that is the BannerTile component. We made sure that there is only one slide per view.
• While mapping over the sampleData we make sure that each of the BannerTile component is wrapped by the SwiperSlide component.

To know more about the swiper’s React components you can refer to their documentation.

The final output will look something like the below:

We finally got what we wanted: an image carousel component that just looks and functions like the ones on popular OTT platforms.

But there is one last thing we need to do here. We need to make sure that the left and the right arrow are white so they stand out. To do that we make use of styled-components:

export const StyledSwiper = styled(Swiper)`
  & .swiper-button-next,
  .swiper-button-prev {
    color: white;
  }
`;

Now we edit our HeroBanner component. We replace the Swiper component with the StyledSwiper component like below:

const HeroBanner = () => (
  <StyledSwiper navigation modules={[Navigation]} slidesPerView={1}>
    {sampleData.data.map((item: SampleData, index: number) => (
      <SwiperSlide key={`key-${item.title}-${index}`}>
        <BannerTile
          title={item.title}
          tags={item.genres}
          image={item.cover_url}
          description={item.description}
        />
      </SwiperSlide>
    ))}
  </StyledSwiper>
);

Here is how it will look:

Now that looks nice

Summary

This is how you can create an image carousel for movie titles. In this tutorial, you learned:

• How to create atomic components
• How to stitch all the components together via the compound pattern
• How to create a BannerTile component that displays the information related to each movie
• How to build an image carousel component with swiper.js

The entire code for this tutorial can be found here.

Thank you for reading!

Follow me on twitter, github, and linkedIn.

But later, they'll find that they need to make changes to the file and doing so becomes a humungous task. Then they'll have to re-work things to separate these two parts.

This comes from not knowing about the separation of concerns and the presentation and container components pattern. That's why I'm going to teach you about them so you can mitigate this problem early in your project's development lifecycle.

In this article, we are going to dive into container and presentational components and briefly touch on the concept of separation of concerns.

Without further ado, let's get started!

Table of Contents

• What is the separation of concerns?
• What are presentation and container components?
• Why do we need these components?
• Presentation and container component example
• How to replace container components with React hooks
• Summary

What is the Separation of Concerns?

Separation of concerns is a concept that is widely used in programming. It states that logic that performs different actions should not be groupled or combined together.

For example, what we discussed in the introduction section violates the separation of concerns, because we placed the logic of fetching the data and presenting the data in the same component.

To solve this and to adhere to the separation of concerns, we should separate these two pieces of logic – that is, fetching data and presenting it on the UI – into two different components.

This is were the container and presentation component pattern will help us solve this issue. In the following sections, we are going to dive deep into this pattern.

What are Container and Presentational Components?

To achieve a separation of concerns we have two types of components:

• Container components
• Presentational components

Container components

These are the components that provide, create, or hold data for the children components.

The only job of a container component is to handle data. It does not consist of any UI of its own. Rather, it consists of presentational components as its children that uses this data.

A simple example would be a component named FetchUserContainer that consists of some logic that fetches all the users.

Presentational components

These are the components whose primary responsibility is to present the data on the UI. They take in the data from the container components.

These components are stateless unless they need their own state for rendering the UI. They do not alter the data that they receive.

An example of this would be a UserList component that displays all the users.

Why Do We Need These Components?

To understand this, let's take a simple example. We want to display a list of posts that we fetch from the JSON placeholder API. Here is the code for the same:

import { useEffect, useState } from "react";

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

/**
 * An example of how we shouldn't combine the logic and presentation of data.
 */
export default function DisplayPosts() {
  const [posts, setPosts] = useState<Post[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

// Logic
  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data);
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

// Presentation
  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <ul>
      {posts.map((post: Post) => (
        <li key={`item-${post.id}`}>
          <span>{post.title}</span>
        </li>
      ))}
    </ul>
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

Here is what this component does:

• It has 3 state variables: posts, isLoading, and error.
• We have a useEffect hook that consists of the business logic. Here we are fetching the data from the API: [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) with the fetch API.
• We make sure that when the data is fetched, we store it in the posts state variable using setPosts.
• We also make sure that we toggle the isLoading and error values during the respective scenarios.
• We put this entire logic inside an async IIFE.
• Finally, we return the posts in the form of an unordered list and map through all the posts that we fetched earlier.

The problem with the above is that the logic of fetching the data and displaying the data is coded into a single component. We can say that the component is now tightly coupled with the logic. This is the exact thing that we don’t want.

Below are some reasons as to why we require container and presentational components:

• They help us create components that are loosely coupled
• They help us maintain separation of concerns
• Code refactoring becomes much easier.
• Code becomes more organized and maintainable
• It makes testing much easier.

Presentation and Container Component Example

Ok, enough talk – let’s get things working by starting off with a simple example. We are going to use the same example as above – fetching the data from a JSON placeholder API.

Let's understand the file structure here:

• Our container component will be PostContainer
• We will be having two presentation components:
  • Posts: A component that has an unordered list.
  • SinglePost: A component that renders a list tag. This will render each element of the list.

Note: We are going to store all the above components in a separate folder named components.

Now that we know which things go where, let's start off with the container component: PostContainer. Copy-paste the below code into the components/PostContainer.tsx file

import { useEffect, useState } from "react";
import { ISinglePost } from "../Definitions";
import Posts from "./Posts";

export default function PostContainer() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <Posts posts={posts} />
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

From the example we saw in the previous section of this article, the above code just contains the logic of fetching the data. This logic is present in the useEffect hook. Here this container component passes this data to the Posts presentational component.

Let's have a look at the Posts presentational component. Copy-paste the below code in the components/Posts.tsx file:

/**
 * A presentational component
 */

import { ISinglePost } from "../Definitions";
import SinglePost from "./SinglePost";

export default function Posts(props: { posts: ISinglePost[] }) {
  return (
    <ul
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
      }}
    >
      {props.posts.map((post: ISinglePost) => (
        <SinglePost {...post} />
      ))}
    </ul>
  );
}

As you can see, this is a simple file that consists of a ul tag – an unordered list. This component then maps over the posts that are being passed as props. We pass each to the SinglePost component.

There is another presentational component that renders the list tag, that is the li tag. It displays the title and the body of the post. Copy-paste the below code in the components/SinglePost.tsx file:

import { ISinglePost } from "../Definitions";

export default function SinglePost(props: ISinglePost) {
  const { userId, id, title, body } = props;
  return (
    <li key={`item-${userId}-${id}`} style={{ width: 400 }}>
      <h4>
        <strong>{title}</strong>
      </h4>
      <span>{body}</span>
    </li>
  );
}

These presentational components, as you can see, just display the data on the screen. That’s all. They don’t do anything else. Since they are just displaying the data here, they will also have their own styling.

Now that we have setup the components, let's look back on what we have achieved here:

• The concept of separation of concerns is not violated in this example.
• Writing unit tests for each component becomes easier.
• Code maintainability and readability are much better. Thus our codebase has become much more organized.

We have achieved what we wanted here, but we can further enhance this pattern with the help of hooks.

How to Replace Container Components with React Hooks

Since React 16.8.0, it has become so much easier to build and develop components with the help of functional components and hooks.

We are going to leverage these capabilities here and replace the container component with a hook.

Copy-paste the below code in the hooks/usePosts.ts file:

import { useEffect, useState } from "react";
import { ISinglePost } from "../Definitions";

export default function usePosts() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return {
    isLoading,
    posts,
    error
  };
}

Here we have,

• Extracted logic that was present in the PostContainer component into a hook.
• This hook will return an object that contains the isLoading, posts, and error values.

Now we can simply remove the container component PostContainer. Then, rather than passing the container's data to the presentational components as a prop, we can directly use this hook inside the Posts presentational component.

Make the following edits to the Posts component:

/**
 * A presentational component
 */

import { ISinglePost } from "../Definitions";
import usePosts from "../hooks/usePosts";
import SinglePost from "./SinglePost";

export default function Posts(props: { posts: ISinglePost[] }) {
  const { isLoading, posts, error } = usePosts();

  return (
    <ul
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
      }}
    >
      {isLoading ? (
        <span>Loading...</span>
      ) : posts ? (
        posts.map((post: ISinglePost) => <SinglePost {...post} />)
      ) : (
        <span>{JSON.stringify(error)}</span>
      )}
    </ul>
  );
}

By making use of hooks we have eliminated an extra layer of component that was present on top of these presentational components.

With hooks, we achieved the same results as that of the container/presentational components pattern.

Summary

So in this article, we learned about:

• Separation of concerns
• Container and presentational components
• Why we need these components
• How hooks can replace container components

For further reading I would highly recommend going through the react-table:. This library extensively uses hooks and it has great examples.

You can find the entire code for this article in this codesandbox.

Thanks for reading!

Follow me on Twitter, GitHub, and LinkedIn.

We will also look into some of the use cases that demonstrate how you can use proxy objects to solve various problems.

Without further ado, let’s get started.

Table of Contents

• Prerequisites
• What is a proxy?
• How to restrict an object to have a specific property
• A small detour – what is the Reflect API?
• Array slicing like Python
• Disadvantages of using proxies
• Summary

Prerequisites

I would highly recommend going through the following topics to follow along with this tutorial:

• Basics of JavaScript.
• Object instance methods.
• How to use the apply function in JavaScript.

What is a proxy?

From merriam-webster:

A proxy may refer to a person who is authorized to act for another or it may designate the function or authority of serving in another’s stead.

So a proxy is nothing but a mediator that speaks or operates on behalf of the given party.

In terms of programming, the word proxy also means an entity that acts on behalf of an object or a system. Since we have this term sorted out, let's understand what it signifies in JavaScript.

In JavaScript, there is a special object called a Proxy. It helps you create another object on behalf of the original object.

This new proxy object will act as a mediator between the real world and the original object. In this way, we will have more control over the interaction with the original object.

Using a proxy is a powerful way to interact with the object rather than interacting directly with it.

Here is the syntax for declaring a proxy object:

new Proxy(<object>, <handler>)

The Proxy takes two parameters:

• <object>: The object that needs to be proxied.
• <handler>: An object that defines the list of methods that can be intercepted. These are also called traps.

Let's have a look at a simple example:

const books = {
    "Deep work": "Cal Newport",
    "Atomic Habits": "James Clear"
}
const proxyBooksObj = new Proxy(books, {
    get: (target, key) => {
        console.log(`Fetching book ${key} by ${target[key]}`);
        return target[key];
    }
})

Here we would like to intercept the get functionality of the object books so we can log the book name and the author of the book to the console.

To achieve this, we created a new proxy object called proxyBooksObj. This object is constructed using the Proxy function that we saw earlier. It takes books as the object to be proxied, and an object that consists of handler functions that need to be trapped.

Since we need to intercept the get functionality, we added a get property that accepts a function. This handler function will accept a function that takes in target key.

This was a pretty simple example of proxy in JavaScript. There are various use cases of a proxy – for example, it can help in validation, formatting, notification, and debugging.

To learn more about the available handlers/traps here is the list.

Now let's look at an example that will provide us with more clarity on how proxies work.

How to Restrict an Object to Have a Specific Property

Sometimes it can be useful to restrict users so that they only have a specific property, just like what useRef does in React. It only allows editing the current property of the object that is returned by useRef.

Let's create a proxy function that will allow the user to only update the current property and not allow them to create any other properties.

const data = {};

const newProxy = new Proxy(data, {
  set: function (target, key, value) {
    if (key === "current") {
      Reflect.set(target, key, value);
      return true;
    }
    return false;
  }
});

newProxy.current = 1;
newProxy.point = 1; // Throws error

Here, since we are dealing with assigning a new value to an existing property or creating a new property, we use the set trap function. We need to tap into the set’s internal behavior of the object.

The set handler function will take in the target, key, and value where the target will be the target object, and the key and value are the property and the actual value.

We make sure that the key is current. When it is, we set the value to that property and return true.

It is important that we return true because this handler function expects to follow some invariants. If we do not want to set the value then we should return false.

There is also something to note about each trap function available inside the proxy that is invariant. Invariant is nothing but a condition that needs to be followed by every trap function so that the basic functionality doesn’t change.

Quoting from MDN’s Meta-programming guide:

Semantics that remain unchanged when implementing custom operations are called invariants

A small detour – what is the Reflect API?

We can also make use of the Reflect API here. JavaScript provides a built-in object that has a set of functions that can help intercept JavaScript operations. This can be operations such as set, get, apply, and so on.

To know more about the methods the Reflect API provides, you can go through the following link.

With this API, it makes it really simple to manipulate the target object present inside the proxy. A fun fact about Reflect API is that it is not an object that can be instantiated. All the methods provided by it are static.

In the previous example, we tried to return the value present at the property of the object directly by accessing the original object like this: target[key].

Instead, here we can make use of get method of Reflect. So now our above example will look something like this:

const books = {
    "Deep work": "Cal Newport",
    "Atomic Habits": "James Clear"
}
const proxyBooksObj = new Proxy(books, {
    get: (target, key) => {
        console.log(`Fetching book ${key} by ${target[key]}`);
        return Reflect.get(target, key);
    }
})

Now we know that we can make use of Reflect, but a question arises - why use Reflect?

We use Reflect because it allows us to implement the default behavior of the functions that were present on the original object. Rephrasing in technical terms, this allows us to implement the default forwarding behavior inside the trap functions.

Also with Reflect we can access internal functions and apply them to the proxy-wrapped object.

So it's beneficial for us to use Reflect APIs inside our proxy.

Array Slicing Like Python

Python is a really cool language. A really awesome feature it provides is the way you can slice your arrays. Even Python’s NumPy library provides this feature of slicing the array.

You can simply provide a start index (optional) and end index (optional) separated by a colon. Here is the syntax for slicing an array in Python:

arr[<start>:<end>]

From the above syntax it is clear that start and end signify the start and end (exclusive) index positions for slicing.

Here is an example of how you can slice an array in Python:

data = [1,2,3,4]
print(data[1:3]) # Output: [2, 3]

Here is how you can do the same in JavaScript:

const data = [1,2,3,4]
console.log(data.slice(1,3)) // Output: [2, 3]

You need to use the slice function to slice the data array from index position 1 to index position 3.

Note that slicing an array excludes the end index provided in the slice function or in Python’s slicing mechanism.

Wouldn’t it be great if we could achieve Python’s slicing mechanism in JavaScript as well?

We have again the Proxy object in JavaScript to the rescue. As we have established in an earlier section, proxies are a wrapper around the original object. They help you manage the interaction with the original object.

Let's again create this proxy object – but this time so that it has the slicing mechanism. Below is the code for implementing the slicing mechanism in JavaScript:

const arr = [1,2,3,4];

const arrProxy = new Proxy(arr, {
  get: function (target, key) {
    if (typeof key === "string" && key.includes(":")) {
      let [start, end] = key.split(":");
      if (start === "") {
        start = 0;
      } else if (end === "") {
        end = target.length;
      } else {
        start = parseInt(start, 10);
        end = parseInt(end, 10);
      }

      return Reflect.apply(Array.prototype.slice, target, [start, end]);
    }
    return Reflect.get(target, key);
  }
});

console.log(arrProxy["1:3"]) // [2,3]

Ok a lot of code here, but let's take a step back and understand what’s happening:

• We created a new proxy object on top of the array arr. Since we are planning to achieve slicing by providing the start and end position separated by a colon, we need to make some modifications on how to do the get functionality of an array.
• To do this, we are going to make use of the get trap function that modifies the get mechanism for an array. We make sure to add this trap function as a get property inside the handler object of the Proxy.
• A get trap function accepts target and key as it arguments. We make use of this to write our logic.
• Since we are doing something like this arrProxy["1:3"], in this case, the key is going to be of type string and it’s going to include: in it. Our main condition will be to distinguish on this same condition.

if (typeof key === "string" && key.includes(":"))

Next, we write some conditions that are requirements for the slicing mechanism in Python. Below are the requirements:

• Whenever the start index is not provided we should set start to 0.
• Whenever the end index is not provided we should set end to the original array’s length.
• If both of them are provided, then we convert them to integers.

To do this, we need to make use of the slice function in JavaScript.

We will be using the Reflect API’s apply method, to execute the function slice with this context (target) being the original array and arguments to the slice function being [start, end].

In the end, if the key argument is of any other data type apart from a string, then we directly return the array with the help of Reflect.get.

Disadvantages of Using Proxies

We now know how a proxy works along with its use cases. But it is also important to know some disadvantages of using proxies.

First of all, while it's cool to use proxies, it is a really really bad choice in scenarios where performance is a critical factor.

Second, no operation proxy forwarding is the mechanism of forwarding all the functionality of the target using a proxy. Here is what proxy forwarding looks like:

const data = {};
const newData = new Proxy(data, {}); // No trap function.

data.point = { x: 1, y: 2};

console.log(data);

This works just fine on regular objects but it won’t work for objects such as DOM nodes or objects that have internal slots.

For example, doing something like the below will generate an error:

const x = document.createElement("div")
x.className = "hello"

const domProxy = new Proxy(x, {});

console.log(domProxy.getAttribute("class")); // Throws typeError

This happens because the this value refers to the proxy object rather than referring to the original object. We can solve this by a get trap function that helps refer to the original object.

const y = new Proxy(x, {
  get(target, key) {
    const value = Reflect.get(target, key);
    if(typeof value === "function"){
      return value.bind(target)
    }
    return value;
  }
});

console.log(y.getAttribute("class")); // Output: hello

Summary

In this article, we learned about proxies in JavaScript along with their use cases. We also took a peek into some disadvantages of proxies.

If you like the idea of using proxies, then you can take it up a notch and try using them in various scenarios of validation or replicating some library functions such as lodash’s get and set functions.

That’s all. Thanks for reading.

Follow me on Twitter, GitHub, and LinkedIn.

To help you do this, you'll often use some sort of state management library like Redux, React Context, or Recoil.

But in this article we are going to learn about global state management with the help of design patterns.

We will look at what design patterns are, and we'll focus on the singleton design pattern in particular. Finally we will look at an example of the singleton design pattern along with its advantages and disadvantages.

So without any further ado, let's get started.

Table of Contents

• Prerequisites

• What is a design pattern?

• What is the singleton design pattern?

• Pros and cons of the singleton design pattern

• Summary

Prerequisites

Before going through this article, I would highly recommend being familiar with the content in the following articles:

• What are classes in JavaScript?

• How to access DOM elements

• How object freeze works

What is a Design Pattern?

Design patterns provide conceptual solutions to common problems

A design pattern is a set of generalised instructions that provide a solution to commonly occurring problems in software design.

You can think about design patterns as a website that consists of multiple design templates you can use to build a site based on your specific needs.

So, now the question is – why is it important to know design patterns? Well, using design patterns has several benefits, such as:

• These patterns are proven – that is, these instructions are tried and tested, and they reflect the experience and insights of many developers.

• They're patterns that you can re-use easily.

• They are highly expressive.

Note that design patterns provide just a conceptual solution to a recurring problem in an optimised way. It does not provide a piece of code that you can use in your project.

So now that we know what design patterns are, let's dive into our very first design pattern.

What is the Singleton Design Pattern?

Singleton design pattern exposes a single instance that can be used by multiple components

Singleton is a design pattern that tells us that we can create only one instance of a class and that instance can be accessed globally.

This is one of the basic types of design pattern. It makes sure that the class acts as a single source of entry for all the consumer components that want to access this state. In other words, it provides a common entry point for using global state.

So a singleton class should be one which:

• Ensures that it creates only one instance of the class

• Provides a global access point to the state.

• Makes sure that the instance is only created the first time.

Example of the Singleton Design Pattern

To understand this concept in a better way, let's look at an example. This example is a simple React application that demonstrates how the global state value is used across the components, how it is being changed, and how the same value gets updated in all the components. Let's get started.

Before we start with the actual implementation, let's have a look at the folder structure:

.
├── index.html
├── package.json
└── src
    ├── componentA.js
    ├── componentB.js
    ├── globalStyles.js
    ├── index.js
    ├── styles.css
    └── utilities.js

Here are the details of each file:

• componentA.js is a consumer component that uses the singleton class to access the global state object and manipulate it.

• componentB.js is similar to above component, as it has to access the global state object and can manipulate it.

• globalStyles.js is a module that consists of the singleton class and exports the instance of this class.

• index.js manages global JS operations, that is JavaScript changes that are required for other DOM elements.

• styles.css manages the styling of the application. Consists of basic CSS.

• utilities.js is a module that exports some utility functions.

• index.html consists of HTML code for the components that are required in the project.

• package.json is a boilerplate configuration emitted by the npm init command.

Now that we know what each file does, we can start off by implementing them one by one.

But before we dive into this example, we need to understand the code flow. The aim of our example is to build a JavaScript application that demonstrates how the global style color is consumed by each of the components and how each component changes it.

Each component consists of a color-picker. When you change the global style color property via the color picker present inside each component, it automatically appears in other components and in the global state.

First, let's create a file: index.html. Then paste the below code into this file:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div class="global-state">
      <h3>Global State</h3>
      <h4>Color</h4>
      <span id="selected-color"></span>
    </div>
    <div class="contents">
      <div class="component-a">
        <strong>Component A</strong>
        <div>Pick color</div>
        <span id="selected-color">black</span>
        <input type="color" id="color-picker-a" />
      </div>
      <div class="component-b">
        <strong>Component B</strong>
        <div>Pick color</div>
        <span id="selected-color">black</span>
        <input type="color" id="color-picker-b" />
      </div>
    </div>
    <script src="src/index.js"></script>
    <script src="src/componentA.js"></script>
    <script src="src/componentB.js"></script>
  </body>
</html>

Here at the top, we load our CSS via <link rel="stylesheet" href="./src/styles.css" />.

Then we have divided our application in two parts via two classes:

• .global-state: This will represent the HTML code for showcasing the current global state of the application.

• .contents: This will represent the HTML code that represents the two components.

Each of the components (component-a and component-b) has a color picker input element.

Both of these components have a span with class selected-color element that will help display the current value of global state variable color.

As you can see on a change of the color picker inside componentA, the following values are also changing:

• Value inside the .selected-color span element inside the componentB and Global state.

• Value of the color picker of componentA and componentB.

We will see later how all these values are changing. But for now it is important for us to understand that if we change the global state value from one component, then the singleton classes make sure that the instance value is updated and all the components that are consuming this instance get the same value since they are referring to the same instance.

Next, we create a file named globalStyles.js. Copy-paste the below code in it:

let instance;
let globalState = {
  color: ""
};

class StateUtility {
  constructor() {
    if (instance) {
      throw new Error("New instance cannot be created!!");
    }

    instance = this;
  }

  getPropertyByName(propertyName) {
    return globalState[propertyName];
  }

  setPropertyValue(propertyName, propertyValue) {
    globalState[propertyName] = propertyValue;
  }
}

let stateUtilityInstance = Object.freeze(new StateUtility());

export default stateUtilityInstance;

The above piece of code is a module that has a singleton class StateUtility and default exports the instance of the same class.

Let's dive deeper into the class StateUtility to understand how it resolves to become a singleton class:

• It consists of constructor and two class methods called getPropertyByName and setPropertyValue. Both of these class method are pretty self explanatory: one gets the property's value and the other sets its value.

• Next, we have the constructor function. It is a function that gets invoked whenever we create a new of object of this class.

• But here is a catch: for a class to be a singleton we need to make sure that it creates only one instance, and that's all.

• To make sure that this happens, we simply create a global variable called instance. We define it at the top of the module. This variable acts as a checker. We add a condition in the constructor function such that if instance variable has any value (that is, the object of the StateUtility class) then throw an error or else assign instance to the current class instance (the this object).

• In this example, we implemented the class StateUtility so that it can expose and alter the globalState variable.

• We make sure that we don't expose the globalState. We expose them using the class methods of StateUtility. In this way, we protect the global state from being altered directly.

• Finally, we create the instance of the class as follows: let stateUtilityInstance = Object.freeze(new StateUtility());.

• We have used Object.freeze so that no other class/component/module is able to modify the exposed stateUtilityInstance.

Then let's create a file called componentA.js inside the src folder. Copy-paste the below code in this file:

import {
    setAllSelectedColor
} from "./utilities";
import globalStyle from "./globalStyles";

// Get respective dom elements
const selectedColor = document.querySelectorAll("#selected-color");
const colorPickerA = document.getElementById("color-picker-a");
const colorPickerB = document.getElementById("color-picker-b");

// Event handler whenever a change event occurs
colorPickerA.onchange = (event) => {
    // set the color property of the global state with current color picker's value;
    globalStyle.setPropertyValue("color", event.target.value);
    const color = globalStyle.getPropertyByName("color");

    // A function thats sets the value of all the #selection-color dom elements;
    setValueOfSimilarElements(selectedColor, color);

    // make sure to set the component B's color picker value is set to color picker A;
    // this is done to make sure that both of the color picker have same value on change;
    colorPickerB.value = color;
};

Here is the breakdown of the above piece of code:

• The aim of this code is to make sure that we attach the onChange handler for the color picker that is present inside the component-a. In this case, componentA's color picker is identified by id: #color-picker-a.

• We need to make sure that this handler:

  1. Sets the value for the property color of the globalState.

  2. Fetches the same property again.

  3. Applies the same value to different areas of the DOM.

  4. Also makes sure that we set the other color picker's value to the global state.

Now, let's take a look at all these steps one-by-one:

• First, let's fetch all the required DOM elements.

• What we are planning here is to update all the color pickers and span elements with id #selected-color with the value of the current globalState property color whenever the on change event occurs.

• In case of componentA, once we change the color via the color picker we need to update the same value in 2 span elements (#selected-color) – that is, one span element of componentB and one span element present in the .global-state div container.

• We do this because we want to keep all the components in sync and demosntrate that the value of the global state remains the same across all the components.

• We then go ahead and update the color property of the global state using the StateUtility's class method setPropertyValue. We pass on to it event.target.value as this contains the current value present inside the #color-picker-a color picker input.

• Once the value is set, we fetch the same property again by using getPropertyByName. We do this to demonstrate that the property color of the global state has been updated and is ready to be used.

• Then, we use the setValueOfSimilarElements utility function to update all the elements that are having same class/id name with some value. In this case we update all the #selected-color elements with value color.

• Finally, we update the the value of the opposite color picker, that is componentB's color picker #color-picker-b.

We do the same thing for componentB. We create a file called componentB.js and update it with the following code:

import {
    setValueOfSimilarElements
} from "./utilities";
import globalStyle from "./globalStyles";

// Get respective dom elements
const selectedColor = document.querySelectorAll("#selected-color");
const colorPickerA = document.getElementById("color-picker-a");
const colorPickerB = document.getElementById("color-picker-b");

/**
 * Event handler whenever a change event occurs
 */
colorPickerB.onchange = (event) => {
    // set the color property of the global state with current color picker's value;
    globalStyle.setPropertyValue("color", event.target.value);

    const color = globalStyle.getPropertyByName("color");

    // A function thats sets the value of all the #selection-color dom elements
    setValueOfSimilarElements(selectedColor, color);

    // make sure to set the component A's color picker value is set to color picker B;
    // this is done to make sure that both of the color picker have same value on change;
    colorPickerA.value = color;
};

We do the same thing as of what we did inside the componentA file, but in this case we update the value of the color picker present inside componentA (that is, we update the value of element #color-picker-a).

Here is how our application will look like:

Here is the link to the code:

Pros and Cons of the Singleton Design Pattern

Here are some of the pros of using the Singleton design pattern:

• It makes sure that only a single instance of the class is created.

• We get a single access point to the instance that can be accessed globally.

Here are some cons of the Singleton design pattern:

• It violates the single responsibility principle. That is, it tries to solve two problems at the same time. It tries to solve the following problems: Ensure that a class will have only one instance, and assigning a global access point to the singleton class instance.

• It is difficult to write unit test cases for singleton classes. This is because the order of execution can change the value present in the global state, so the order of execution is important.

• While writing unit tests, there is a risk of another component or a module might be changing the global state value/instance. In such scenarios, it becomes difficult to debug the error.

Summary

The singleton design pattern can be useful in creating a global state that can be accessed by any component.

So to talk about singleton pattern in brief:

• It is a pattern that restricts the class to create only one instance.

• Singleton pattern can be considered the basics of global state management libraries such Redux or React Context.

• They can be accessed globally and acts as a single access point for accessing the global state.

That's all.

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

We will also implement an example that showcases how you can create your own map function with the apply function.

Without further ado, let's get started.

Table of Contents

• Prerequisites

• Definitions

• How to use the call function in JavaScript

• How to use the apply function in JavaScript

• How to use the bind function in JavaScript

• How to create your own map function

• Summary

Prerequisites

Here are some of the things you should understand to get the most out of this article:

• Functions

• Function Prototypes

• This keyword

Definitions

Let's look at the functions we'll be studying here a bit more closely to understand what they do.

Call is a function that helps you change the context of the invoking function. In layperson's terms, it helps you replace the value of this inside a function with whatever value you want.

Apply is very similar to the call function. The only difference is that in apply you can pass an array as an argument list.

Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.

Now we will look at some basic examples of the call, apply, and bind functions. Then we will look at an example were we will be constructing our own function similar to the map function.

How to Use the Call Function in JavaScript

call is a function that you use to change the value of this inside a function and execute it with the arguments provided.

Here is the syntax of the call function:

func.call(thisObj, args1, args2, ...)

Where,

• func is a function that needs to be invoked with a different this object

• thisObj is an object or a value that needs to be replaced with the this keyword present inside the function func

• args1, args2 are arguments that are passed to the invoking function with the changed this object.

Note that if you invoke a function without any thisObj argument, then JavaScript considers this property to be a global object.

Now that we have some context around what the call function is, let's start off by understanding it in more detail with some examples.

How to call a function with different contexts in JS

Consider the below example. It consists of 3 classes – Car, Brand1, and Brand2.

function Car(type, fuelType){
    this.type = type;
    this.fuelType = fuelType;
}

function setBrand(brand){
    Car.call(this, "convertible", "petrol");
    this.brand = brand;
    console.log(`Car details = `, this);
}

function definePrice(price){
    Car.call(this, "convertible", "diesel");
    this.price = price;
    console.log(`Car details = `, this);
}

const newBrand = new setBrand('Brand1');
const newCarPrice = new definePrice(100000);

If you look carefully, you can see that we use the call function to invoke the Car function on two occasions. Firstly, in the setBrand and then in the definePrice functions.

In both of these functions, we invoke the Car function with this object representing to the respective functions themselves. For example, inside setBrand, we call the Car function with the this object belonging to its context. The case is similar for definePrice.

Here’s a short video illustrating this: https://www.canva.com/design/DAFD4b369JM/watch

How to call a function with no arguments in JS

Consider the below example:

const newEntity = (obj) => console.log(obj);

function mountEntity(){
    this.entity = newEntity;
    console.log(`Entity ${this.entity} is mounted on ${this}`);
}

mountEntity.call();

In this example, we invoked the function mountEntity with no thisObj argument. In such cases, JavaScript refers to the global object.

How to Use the Apply Function in JavaScript

The Apply function is very similar to the Call function. The only difference between call and apply is the difference in how arguments are passed.

In apply, arguments you can pass an argument as an array literal or a new array object.

Here is the syntax for the apply function:

func.apply(thisObj, argumentsArray);

Where,

• func is a function that needs to be invoked with a different this object

• thisObj is an object or a value that needs to be replaced with the this keyword present inside the function func

• argumentsArray can be an array of arguments, array object, or the arguments keyword itself.

As you can see above, the apply function has different types of syntaxes.

The first syntax is a simple one. You can pass in an array of arguments like below:

func.apply(thisObj, [args1, args2, ...]);

The second syntax is where we can pass in the new array object to it:

func.apply(thisObj, new Array(args1, args2));

The third syntax is where we can pass in the arguments keyword:

func.apply(thisObj, arguments);

arguments is a special object available inside a function. It contains values of the arguments that are passed to a function. You can use this keyword with the apply function to take any number of arbitrary arguments.

The best part about apply is we don’t need to take care of the number of arguments that are passed to the invoking function. Because of its dynamic and versatile nature, you can use it in complicated situations.

Let’s look at the same example as above, but this time we'll use the apply function.

function Car(type, fuelType){
    this.type = type;
    this.fuelType = fuelType;
}

function setBrand(brand){
    Car.apply(this, ["convertible", "petrol"]); //Syntax with array literal
    this.brand = brand;
    console.log(`Car details = `, this);
}

function definePrice(price){
    Car.apply(this, new Array("convertible", "diesel")); //Syntax with array object construction
    this.price = price;
    console.log(`Car details = `, this);
}

const newBrand = new setBrand('Brand1');
const newCarPrice = new definePrice(100000);

And here is an example that showcases how you'd use the arguments keyword:

function addUp(){
        //Using arguments to capture the arbitrary number of inputs
    const args = Array.from(arguments); 
    this.x = args.reduce((prev, curr) => prev + curr, 0);
    console.log("this.x = ", this.x);
}

function driverFunc(){
    const obj = {
        inps: [1,2,3,4,5,6]
    }
    addUp.apply(obj, obj.inps);
}

driverFunc();

How to Use the Bind Function in JavaScript

The bind function creates a copy of a function with a new value to the this present inside the calling function.

Here is the syntax for the bind function:

func.bind(thisObj, arg1, arg2, ..., argN);

Where,

• func is a function that needs to be invoked with a different this object

• thisObj is an object or a value that needs to be replaced with the this keyword present inside the function func

• arg1, arg2…argN – you can pass 1 argument to the calling function or more than that, similar to the call function.

The bind function then returns a new function that consists of a new context to the this variable present inside the calling function:

func(arg1, arg2);

Now this function func can be executed later with the arguments.

Let's look at a classic example of how to use a bind function with the help of a class-based React component:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
  }
  handleCode() {
    console.log("HANDLE CODE THIS = ", this.state);
  }
  render() {
    return <button onClick={this.handleCode}>Click Me</button>;
  }
}

Consider the above App component. It constitutes the following things:

• constructor is a function that gets called a class and is instantiated with a new keyword.

• render is a function that executes/renders the JSX code.

• handleCode is a class method that logs the state of the component.

If we click on the Click Me button then we will receive an error stating: Cannot read properties of undefined (reading 'state').

Have you ever wondered why this issue occurs? 🤔🤔

You might be expecting that we should be able to access the state of the class since handleCode is a class method. But here is the catch:

• this inside the handleCode is not same as that of the class’s this.

• Inside a class, this is a regular object that has non-static class methods as its properties. But this inside the handleCode will refer to a different context.

• To be honest, the value of this in this scenario depends on from where the functions is being called. If you see, the handleCode is being called on onClick event.

• But at this stage, we will get undefined for the context of this present inside the handleCode function.

• We're trying to call the state property of an undefined value. Therefore, this leads to the above error.

We can fix this by providing the right context of this inside the handleCode method. You can do this with the bind method.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
   this.handleCode = this.handleCode.bind(this); //bind this function
  }
  handleCode() {
    console.log("HANDLE CODE THIS = ", this.state);
  }
  render() {
    return <button onClick={this.handleCode}>Click Me</button>;
  }
}

The bind will create a new function and store it inside the this object with a new property as handleCode. Bind will make sure that the class’s this context gets applied to the this present inside the handleCode function.

How to Create Your Own map Function

Now that we have all the necessary things, let's start off by creating our own map function. Let's first understand the things that we will need to build our own map function.

Here is the syntax of the map function:

arr.map(func)

Where,

• arr is an array on which the map is called.

• func is the function that needs to run on each element of an array.

The basic functionality of a map function is simple:

It is a function that walks through each element of an array and applies the function that is passed as an argument. The return type of a map is again an array with func being applied on each element.

Now we understand the requirements, so we can move on to create our own map function. Here is the code of our new map function:

function newMap(func){
  let destArr = [];
  const srcArrLen = this.length;
  for(let i = 0; i < srcArrLen; i++){
    destArr.push(func.call(this, this[i]));
  }

  return destArr;
}

Let's understand the above function bit-by-bit:

• This function accepts an argument called func. It's nothing but a function that needs to be called on each element of an array.

• The other parts of the code are pretty self explanatory. We will focus on the following line: destArr.push(func.call(this, this[i]));

• This line does two things:

1. Pushes the changes into the destArr

2. Executes the func with the help of call method. Here the call method (as explained in the previous sections) will execute the func method with a new value to the this object present inside the func method.

Now let's take a look at how we are going to execute our newMap function. The below approach of adding a new method to the existing primitive data type is not recommended but still we will do it for the sake of this article.

NOTE: do not follow the below approach in your production code. This can cause damage to the existing code.

Object.defineProperty(Array.prototype, 'newMap', {
  value: newMap
});

defineProperty we create a new property inside the Array.prototype.

Once this is done, we are good to go with executing our new map function on an array.

const arr = [1,2,3];
const newArr = arr.newMap(item => item + 1);
console.log(newArr);

Summary

This article showed you what the call, apply, and bind functions can do via examples.

So to talk about these functions in brief:

• Call, apply, and bind are the functions that help you change the context of the this keyword present inside the invoking function.

• We saw how each function can be called in different ways – for example, with apply you can execute a function with an array of arguments, and with the call function you can execute the same but the arguments are spread via commas.

• These functions are really useful in class-based components of React.

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

We will also have a brief discussion about how JavaScript compiles and executes programs.

Lastly, we will have a look at how you can use lexical scope to explain undeclared variable errors or reference errors.

Without further ado, let's get started.

Table of Contents

• How does JavaScript execute programs?
• How JavaScript Parses/Compiles and Executes Code
• Understanding Syntax Error
• Understanding Variable/Function Hoisting
• What is lexical scope?
• Understanding Lexical Scope
• Summary

How Does Javascript Execute Programs?

Before understanding how JavaScript executes a code/program, we will first explore the different steps that are involved in any compilation process from a compiler theory perspective.

For any language, the compiler performs the following operations:

Tokenizing/Lexing

In this process, the entire program is divided into keywords which are called tokens. For example, consider the following statement: let temp = 10 – once the tokenization is applied it will divide this statement into keywords as follows: let, temp, =, 10.

Lexing and tokenizing terms are used interchangeably, but there is a subtle difference between them. Lexing is a process of tokenization but it also checks if it needs to be considered as a distinct token. We can consider Lexing to be a smart version of tokenization.

Parsing

This is a process of collecting all the tokens generated in the previous step and turning them into a nested tree structure that grammatically represents the code.

This tree structure is called an abstract syntax tree (AST).

Code Generation

This process converts the AST into machine-readable code.

So this was a brief explanation of how the compiler works and generates a machine-readable code.

Of course there are more steps apart from the ones that are mentioned above. But explaining the other steps/phases of the compiler is out of scope for this article.

The most important observation that we can make about JS execution is that to execute code, it goes through two phases:

1. Parsing
2. Execution

Before we understand lexical scope, it is important to first understand how JavaScript executes a program. In the next sections, we will dive deeper into how these two phases work.

How JavaScript Parses/Compiles and Executes Code

Parsing phase

Let's first talk about the parsing phase. In this phase, the JavaScript engine goes through the entire program, assigns variables to their respective scopes, and also checks for any errors. If it finds an error then the execution of the program is stopped.

In the next phase, the actual execution of the code takes place.

To understand this in more detail we will look into the following two scenarios:

• Syntax Error
• Variable hoisting

Syntax Error

To show you how JS first parses the program and then executes it, the best and simplest way is to demonstrate the behavior of a syntax error.

Consider the following buggy code:

const token = "ABC";
console.log(token);

//Syntax error:
const newToken = %((token);

The above program will generate a syntax error at the last line. This is what the error will look like:

Uncaught SyntaxError: Unexpected token '%'

If you look at the error, the JavaScript engines did not execute the console.log statement. Instead, it went through the entire program in the following manner:

• Line 1, found that there was a variable declaration and definition. So it stored the reference of the token variable in the current scope, that is global scope.
• Line 2, JavaScript engine discovered that the token variable is being referenced. It first referred to the current scope to check if the token variable was present or not. If it’s present then it's referred to token variable’s declaration.
• Line 3, the engine discovered that newToken variable was being declared and defined. It checked if any variable with the name newToken was present in the current scope or not. If yes, then throws a reference error. If no, then stores the reference of this variable in the current scope.
• At the same line, the engine also discovered that it was trying to refer to a variable %((token). But it found that it started with % and variable names cannot start with reserved keywords, so it threw a syntax error.

Variable/Function Hoisting

Hoisting is a mechanism via which all the variables present in their respective scopes are hoisted, that is made available at the top.

Now let's take a look at the example below that will show you that hosting happens during the parsing phase and then execution happens:

doSomething();

function doSomething(){
    console.log("How you doing?");
}

In the above program, the engine goes through the program in the following manner:

• Line 1, JavaScript engine encountered a function called doSomething. It searched to see if doSomething was available in the current scope. If yes then it refers to the function or else it throws a reference error.
• It turned out that during the parsing phase, the engine found the function doSomething line to be present in the current scope. Therefore, it added this variable’s reference in the current scope and made it available throughout the entire program.
• Finally, the doSomething function printed out the string How you doing?.

As we can see from the above explanation, the code was first parsed so as to generate some intermediary code that makes sure the variable/function (that is doSomething) referenced in the current scope is made available.

In the next phase, JavaScript knows about the function and so starts to execute.

From the above examples, we can safely conclude that the JavaScript engine does the following things before executing the code:

1. Parses the code.
2. Generates the intermediary code that gives a description of the variables/functions that are available.
3. Using the above intermediary code, it then starts the execution of the program.

What is Lexical Scope?

The process of determining the scopes of the variables/functions during runtime is called lexical scoping. The word lexical comes from the lexical/tokenization phase of the JS compiler steps.

During runtime, JavaScript does these two things: parsing and execution. As you learned in the last section, during the parsing phase the scopes of the variables/functions are defined. That is why it was important to first understand the parsing phase of the code execution since it lays down the foundation for understanding lexical scope.

In laymen's terms, the parsing phase of the JavaScript engine is where lexical scoping takes place.

Now that we know the basics of it, let's go through some of the main characteristics of lexical scope:

First of all, during the parsing phase, a scope is assigned/referenced to a variable where it is declared.

For example, consider a scenario where a variable is referenced in the inner function and its declaration is present in the global scope. In this case the inner variable is assigned with the outer scope, that is the global scope.

Scope assigned illustration

Then, while assigning scope to a variable, the JavaScript engine checks its parent scopes for the availability of the variable.

If the variable is present then that parent scope is applied to the variable. If a variable is not found in any of the parent scopes then a reference error is thrown.

Take a look at the below illustration that demonstrates how a variable’s scope is searched.

JS engine successfully finding a variable by going through each scope

Here is an illustration that represents the JS engine trying to find a variable that does not exists in any scope:

JS engine throwing reference error

Understanding Lexical Scope

In the above section, we defined what lexical scope is. We also understood what characteristics it has.

In this section, we are going to understand lexical scope with the help of an example. As they say, it's always easier to understand difficult topics by looking at examples from real-life, day-to-day code. Let’s get started.

The example that we are going to use involves coloring areas of our code that have similar scopes. This may sound confusing, but let me demonstrate this with a simple illustration.

Understanding lexical scope with a coloring example

Let's take a step back and understand what is going on in this illustration.

We have the following things in our program:

• empData: Array of objects.
• allPositions: Array of strings that consists of all the employee positions.
• Lastly, we have a console statement that prints out allPositions variables.

Now let's take a look at what happens in the parsing phase of this program:

• The engine starts with the first line, and it encounters a variable declaration empData.
• The engine then checks if the empData is available in the current scope or not. Since there is no similar variable found, it checks the existence of this variable in its parent scope.
• The engine will stop its search over here since there is no scope available and also the current scope is the global scope.
• Next, the engine assigns an undefined value to the empData during the parsing phase so that once any nested scope tries to reference this variable, then it can be used.
• The right-hand side of this assignment operator is evaluated during the execution phase of the program.
• In a similar manner, the engine does the same for the allPositions variable and assigns it an undefined value.
• But on the right-hand side, we are also referencing the empData variable. At this stage, the engine checks if this variable is available in the current scope. Since it is available, it refers to the same (that is, present in the global scope).
• The engine is still on the right-hand side since it found out that there is an arrow function inside of the map function. Since the engine has encountered the function definition, it creates a new scope. In the gif, this is number 2.
• Since this is a new scope, we are going to color code it black.
• This arrow function has an argument of data and returns data.position. In the parsing phase, the engine hoists all the variables that are required by referencing the variables present in the current scope as well as in its parent scope.
• Inside this function, the data variable is referenced so the engine checks if the current scope has this variable. Since the variable is present in the current scope, it refers to the same.
• Once the engine encounters the } brace, it moves out of the functional scope.
• Finally, at the end of the program, we have a console statement that displays allPositions variables. Since it is referencing the allPositions variable, it searches in the current scope (that is global scope). Since it is found, it refers to the same in the console statement.

Summary

In this article, we learned about what lexical scope means, and learned how it works by looking at a simple coloring example.

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

Table of Contents

• Prerequisites
• What are closures?
• Use case of closures
• Advantages of closures
• Disadvantages of closures
• Summary

Without further ado, let's get started.

Prerequisites

You should have a good understanding of the following topics to understand this article:

• How JavaScript's execution context works
• What the Fetch API is and how to use it

What are closures?

Closures are functions that have access to the variables that are present in their scope chain even if the outer function ceases to exist.

To understand this in more detail, let's understand what a scope chain is. Scope chain refers to the fact that parent scope does not have access to the variables inside its children's scope, but the children's scope does have access to the variables present in its parent scopes.

Let's make this clearer by taking a look at an example below:

let buttonProps = (borderRadius) => {
    const createVariantButtonProps = (variant, color) => {
        const newProps = {
            borderRadius,
            variant,
            color
        };
        return newProps;
    }
    return createVariantButtonProps;
}

As you can see, we have a function called buttonProps. This function accepts borderRadius as an argument. Let's consider the buttonProps function as our parent function.

We have another function that has been defined inside the parent function, that is createVariantButtonProps. This function will accept variant and color as an argument and return an object that constitutes a variable borderRadius that is present outside its scope.

But a question arises as to how the inner function resolves the variables that are present in the parent scope.

Well, this is possible via lexical scoping. Using lexical scoping, the JS parser knows how to resolve variables present in its current scope or in fact knows how to resolve variables present in the nested functions.

So based on the above explanation, createVariantButtonProps will have access to the variables present in its outer function buttonProps.

In the above example, the inner function createVariantButtonProps is a closure. To understand closures in detail we will first go through the characteristics of closures which are as follows:

• Even if the outer function ceases to exist, a closure still has access to its parent variables.
• Closures do not have access to their outer function’s args parameter.

Let's get into more detail on each of these points.

Even if the outer function ceases to exist, it still has access to its parent variables.

This is the basic functionality of any closure. This is their main life motto aka their working principle.

To see this in action we will now execute the above buttonProps function.

let primaryButton = buttonProps("1rem");

Calling the buttonProps function will return us another function that is our closure.

Now let's execute this closure:

const primaryButtonProps = primaryButton("primary", "red");

Once the closure is executed, it returns the following object:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

Here again a question arises: How does the primaryButton function have access to the variable borderRadius that was not present inside it?

If we go through the definition of closures, and scope chaining that we discussed earlier, it perfectly fits into that instance.

Let's dig deeper into why closures still have access to the variables that are defined outside their scope, even if the outer function ceases to exists – for example, borderRadius?

The answer is simple: closures do not store static values. Instead, they store references to the variables present inside the scope chain. In this way, even if the outer function dies, the inner function, that is a closure, still has access to its parent variables.

Use case of closure: Creating a fetch utility with closures

Now that we've learned what closures are, we will create a nice general purpose utility function. It will handle different request methods such as GET and POST with REST APIs.

For this use case,

• We will be using JSON placeholder APIs. This provides us with some fake data which we can edit using REST APIs.
• We will be using JavaScript's fetch API.

Let's first discuss why we even need to design such a utility. There are couple of reasons:

• For every fetch call, we don’t want to define the base URL (or other common parameters) all the time. So we will create a mechanism that will store the base URL/parameters as a state.
• To remove redundant code.
• To provide modularity in the codebase.

Let's dive into the details of this utility. Our fetch utility will look like below:

const fetchUtility = (baseURL, headers) => {
  const createFetchInstance = (route, requestMethod, data) => {
    const tempReq = new Request(`${baseURL}${route}`, {
      method: requestMethod,
      headers,
      data: data || null
    });
    return [fetch, tempReq];
  };

  return createFetchInstance;
};

• fetchUtility accepts two parameters that are baseURL and headers. These will be used later in the closure to construct the base URL along with the headers.
• Then we have createFetchInstance, which accepts route requestMethod and data as parameters.
• Next, this function creates a new request object that will construct our URL using the code: ${baseURL}${route}. We also pass in an object which consists of the request method type, headers, and data if available.
• Then we return the instance of a fetch API along with the request object.
• Lastly, we return the createFetchInstance function.

Now let's see this function in action. Call our fetchUtility function to initialize the baseURL:

const fetchInstance = fetchUtility("https://jsonplaceholder.typicode.com");

• If we observe, the fetchInstance now has the value of the closure of the function fetchUtility.
• Next, we pass the route and the type of the request to the closure fetchInstance:

const [getFunc, getReq] = fetchInstance("/todos/1", "GET");

As you can see this returns us an array of fetch API instance and the request body that we configured.

Finally, we can make use of the getFunc fetch API to call the request getReq like below:

getFunc(getReq)
  .then((resp) => resp.json())
  .then((data) => console.log(data));

We can also create a POST request similar to the above GET request. We just need to call the fetchInstance again as below:

const [postFunc, postReq] = fetchInstance(
  "/posts",
  "POST",
  JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
  })
);

And to execute this post request we can do the similar operation that we did for the GET request:

postFunc(postReq)
  .then((resp) => resp.json())
  .then((data) => console.log(data));

If we closely look at the above example, we can see that the inner function createFetchInstance has access to the variables present in its scope chain. With the help of lexical scoping, during its definition of createFetchInstance it resolves the variable names.

In this way the closure references the variables baseURL and headers during its definition even after the outer function fetchUtility has ceased to exist.

If we think of closures from a different perspective, then closures help us to maintain a state like baseURL and headers that we can use across function calls.

Advantages of closures

Here are some advantages of closures:

• They allow you to attach variables to an execution context.
• Variables in closures can help you maintain a state that you can use later.
• They provide data encapsulation.
• They help remove redundant code.
• They help maintain modular code.

Disadvantages of closures

There are two main disadvantages of overusing closures:

• The variables declared inside a closure are not garbage collected.
• Too many closures can slow down your application. This is actually caused by duplication of code in the memory.

Summary

So in this way closures can be really useful if you want to deal with or implement certain design patterns. They also help you write neat and modular code.

If you liked the idea of closures, then I would recommend reading further on the following topics:

• Design patterns
• Anonymous closures

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

This is what we'll make in this tutorial:

Snake is a fun game which you might have played on older feature phones like on Nokia 3310 models.

The concept behind it is simple: the snake roams around inside a box, and once it captures the fruit/object your points increase and the snake grows. If the snake hits the boundaries of the box or collides with itself then the game is over.

This article will provide you with all the necessary skills/steps to create your own Snake game from scratch. We'll first look at the code structures and their logic. Then I'll explain how they work when all of them are connected.

Without further ado, let’s get started.

Table of contents

• Prerequisites
• What is a snake game? What are we going to use in it?
• What is redux? Why are we using this?
• What is redux-saga? Why are we using this?
• Use case description
• The application and data layer set up
• Understanding UI Layer
• Canvas Board
• Drawing the objects
• Moving the snake across the board
• Drawing the fruit at a random position
• Score calculator
• Instruction component
• Final Game
• Summary

Prerequisites

Before you start reading this article, you should have a basic understanding of the following topics:

• Class Diagrams: We are going to use them to showcase our example. Here are a couple of resources you can use to learn more about them:
  • Class diagrams
  • UML Diagram course
• Context Diagram and Container Diagrams
• React
• Generators:
  • Generators
  • Function generators

What is a snake game? What are we going to use in it?

A snake game is an arcade game that involves a snake moving inside a box. Your score increases based on how many objects/fruit the snake eats. This will also increase the size of the snake. If it collides with itself or to the boundary of the box then the game is over.

You can read more about the history or the origins of the game in the Wiki link.

We are going to use the following tools to build our game:

• Redux: To create and manage the global state for the application.
• Redux-saga: A redux middleware we'll use to manage async tasks.
• Canvas HTML tag: We'll use this to draw an object like a snake and the fruit.
• React: UI library.
• Chakra-UI: Component library.

What is redux? Why are we using it?

Redux is a state container that helps you create and manage global state for your application. Redux consists of some basic parts like:

1. Global State
2. Redux store
3. Actions and action creators
4. Reducers

You can learn all about the above topics and how Redux works internally from the Redux doc’s getting started section.

We are using the state management library Redux because it will help us manage our global state in a simpler way. It will allow us to avoid prop drilling. It will also allow us to perform complex async actions via middleware.

You can learn more about middleware here.

What is redux-saga? Why are we using it?

Redux-saga is a middleware that helps us tap in between the dispatched action and the reducer of the redux store. This allows us to perform certain side-effects between the dispatched action and the reducer such as data fetching, listening to particular actions or setting up subscriptions, spawning actions, and more.

Redux saga uses generators and generator functions. A typical saga would look like this:

function* performAction() {
    yield put({
        type: COPY_DATA,
        payload: "Hello"
    });
}

performAction is a generator function. This generator function will execute the put function. It creates an object and returns it to the saga, telling what type of action needs to be executed with what payload. Then the put call returns an object descriptor saying which saga can take it up later and execute the particular action.

NOTE: You can read more about generators and generator functions by referring to the prerequisite section.

Now the question arises Why are we using redux-saga middleware? The answer is simple:

1. It provides a better way to write unit test cases, which will help us test the generator functions in a simpler way.
2. It can help you perform a lot of side effects and provide better control over the changes. One example is whenever you want to watch if a particular action X is executed then perform the action Y. Functions like takeEvery, all, and so on make it simple to perform these operations. We will discuss more of this in a later section.

If you are not familiar with redux-saga, then I highly recommend going through the documentation here.

Use case description

NOTE: Context, Container, and Class diagrams drawn in this blog post don't accurately follow the exact conventions of these diagrams. I've approximated them here so you can understand the basic concepts.

Before we start, I would suggest reading up on c4models, container diagrams, and context diagrams. You can find resources about them in the prerequisites section.

In this article we are going to consider the following use case: Create a snake game.

The use case is pretty self-explanatory, and we have discussed what the snake game entails above. Below is the context diagram for our use case:

Snake game context diagram

Our context diagram is pretty straightforward. The player interacts with the UI. Let's dive deeper into the container game board UI and explore what other systems are present inside it.

Container diagram for the snake game

As you can see from the above diagram, our Game Board UI is divided into two Layers:

1. UI Layer
2. Data Layer

The UI Layer consists of the following components:

1. Score Calculator: This is a component that will display the score whenever the snake eats the fruit.
2. Canvas Board: This is a component that handles the major UI part of our game. Its basic functionality is to draw the snake on the canvas and clear the canvas. It also handles the following responsibilities:
   1. It detects if the snake has collided with itself or with the boundary walls (Collision detection).
   2. Helps in moving the snake along the board with keyboard events.
   3. Resets the game when the game is over.
3. Instructions: It provides the instructions for playing the game, along with the reset button.
4. Utilities: These are the utility functions that we'll use throughout the application wherever needed.

Let's now talk about the Data Layer. It consists of the following components:

1. Redux-saga: Set of generator functions that will perform certain actions.
2. Actions and Action Creators: These are the set of constants and functions which will help in dispatching appropriate actions.
3. Reducers: This will help us respond to the various actions dispatched by action creators and the sagas.

We will deep dive into all of these components and see how they work collectively in the later sections. First, let's initialize our project and set up our Data layer – that is, the Redux store.

The application and data layer set up

Before we start understanding our game components, let's first set up our React application and the data layer.

The game is built with React. I highly recommend using the create-react-app template to install all the necessary things to start your React application.

To create a CRA (create-react-app) project, first we need to install it. Type the below command into your terminal:

npm install -g create-react-app

Note: Before running this command make sure you have installed Node.js in your system. Follow this link to install it.

Next, we will start by creating our project. Let's call it snake-game. Type the below command into your terminal to create the project:

npx create-react-app snake-game

This may take few minutes to complete. Once this is completed, traverse to your newly created project using the below command:

cd snake-game

Once inside the project, type the below command to start the project:

npm run start

This command will open a new tab in your browser with the React logo spinning on the page like below:

create-react-app initial page

Now our initial project setup is complete. Let's configure our data layer (the Redux store). Our data layer requires that we install the following packages:

• Redux
• Redux-saga

First, let's start off by installing these packages. Before we start, make sure you are in the project directory. Type the below command in the terminal:

npm install redux react-redux redux-saga

Once these packages are installed then we will first configure our Redux store. To start off, let's first create a folder named store:

mkdir store

This store folder will consist of all the files related to Redux. We will organize our store folder in the following manner:

store/
├── actions
│   └── index.ts
├── reducers
│   └── index.ts
└── sagas
    └── index.ts
├── index.ts

Let's discuss what each of the files does:

• action/index.tsx: This file consists of constants that represents actions that our application can perform and dispatch to the Redux store. An example of such an action constant looks like this:

export const MOVE_RIGHT = "MOVE_RIGHT"

We will use the same action constant to create a function which will return an object with the following properties:

• type: Action type, that is action constant
• payload: additional data that acts as a payload.

These functions which return an object with the type property are called action creators. We use these functions to dispatch actions to our Redux store.

The payload attribute signifies that along with the action we can also pass additional data which can be used to store or update the value inside the global state.

NOTE: It is mandatory to have type property returned from the action creator. The payload property is optional. Also, the name of the payload property can be anything.

Let's see an example of an action creator:

//Without payload
export const moveRight = () => ({
    type: MOVE_RIGHT
});

//With payload
export const moveRight = (data: string) => ({
    type: MOVE_RIGHT,
    payload: data
});

Now that we know what actions and action creators are, we can move on to configuring our next artifact which is a reducer.

Reducers are functions that return a new global state every time an action is dispatched. They take in the current global state and return the new state based on the action that is dispatched/called. This new state is calculated based on the previous state.

We should be careful here that we do not perform any side-effects inside this function. We should not alter the global state – rather we should return the updated state as a new object itself. Therefore, the reducer function should be a pure function.

Now enough talking about reducers. Let's have a look at our sample reducers:

const GlobalState = {
    data: ""
};

const gameReducer = (state = GlobalState, action) => {
    switch (action.type) {
        case "MOVE_RIGHT":
            /**
             * Perform a certain set of operations
             */
            return {
                ...state, data: action.payload
            };

        default:
            return state;
    }
}

In this example, we have created a reducer function which is called a gameReducer. It takes in the state (default parameter as a global state) and an action. Whenever we have action.type that matches the switch case, then it performs a particular action, like returning a new state based on the action.

The sagas/index.ts file will consist of all the sagas that we will use in our application. We do have some basic understanding of the sagas which we briefly explained in the above sections. We will dive deeper into this section when we actually start our implementation of the snake game.

Now we have a basic understanding of the artifacts involved in making our Redux store. Let's go ahead and create store/index.ts like below:

import {
    createStore,
    applyMiddleware
} from "redux";
import createSagaMiddleware from "redux-saga";
import gameReducer from "./reducers";
import watcherSagas from "./sagas";
const sagaMiddleware = createSagaMiddleware();

const store = createStore(gameReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(watcherSagas);
export default store;

We will first import our reducer and the saga. Next we will use the createSagaMiddleware() function to create a saga middleware.

Next, we will connect it to our store by passing it as an argument to the applyMiddleware function inside createStore which you use to create a store. We will also pass gameReducer to this function so that a reducer is mapped to our store.

Finally, we will run our sagaMiddleware using this code:

sagaMiddleware.run(watcherSagas);

Our final step is to inject this store at the top level of our React app using the Provider component provided by react-redux. You can do this as follows:

import { Provider } from "react-redux";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
    //   Child components...
    </Provider>
  );
};

export default App;

I have also installed chakra-UI as a UI component library for our project. To install chakra-UI, type the below command:

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

We also need to setup the ChakraProvider that will go in our App.tsx file. Our updated App.tsx file will look like this:

import { ChakraProvider, Container, Heading } from "@chakra-ui/react";
import { Provider } from "react-redux";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <ChakraProvider>
        <Container maxW="container.lg" centerContent>
          <Heading as="h1" size="xl">SNAKE GAME</Heading>
    //Children components
        </Container>
      </ChakraProvider>
    </Provider>
  );
};

export default App;

Understanding UI layer

Let's first understand the dynamics of our Snake game from the UI perspective. Before we get started, our final Snake game will look like below:

The UI Layer consists of 3 layers: Score Calculator, Canvas Board, and Instructions. The below diagram showcases these sections:

Let's dive deeper into each of these sections to understand how our Snake game works.

Canvas Board

We'll start off by understanding the Canvas Board:

• Our canvas board is going to be of dimensions height: 600, width: 1000
• This entire board is divided into blocks of 20x20 size. That is, every object that is drawn on this board has height 20 and width 20.
• We are using the <canvas> HTML element to draw the shapes in the canvas board component.

In our project, we are writing the canvas board component inside the file components/CanvasBoard.tsx. Now that our basic understanding is clear about the CanvasBoard component, let's start building this component.

Create a simple component that returns a canvas element as below:

export interface ICanvasBoard {
  height: number;
  width: number;
}

const CanvasBoard = ({ height, width }: ICanvasBoard) => {
  return (
    <canvas
      style={{
        border: "3px solid black",
      }}
      height={height}
      width={width}
    />
  );
};

Call this component in our App.tsx file with width and height of 1000 and 600 as a prop like below:

import { ChakraProvider, Container, Heading } from "@chakra-ui/react";
import { Provider } from "react-redux";
import CanvasBoard from "./components/CanvasBoard";
import ScoreCard from "./components/ScoreCard";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <ChakraProvider>
        <Container maxW="container.lg" centerContent>
          <Heading as="h1" size="xl">SNAKE GAME</Heading>
          <CanvasBoard height={600} width={1000} /> //Canvasboard component added 
        </Container>
      </ChakraProvider>
    </Provider>
  );
};

export default App;

This will create a simple box of height=600 and width=1000 with a black border like below:

A blank canvas element with width=1000 and height=600

Now let's draw a snake at the center of this canvas. But before we can start drawing, we need to get the context of this canvas element.

The context of a canvas element provides you with all the information you need related to the canvas element. It gives you the dimensions of the canvas and also helps you draw on the canvas.

To get the context of our canvas element we need to call the getCanvas('2d') function which returns the 2d context of the canvas. The return type of this function is CanvasRenderingContext2D interface.

To do this in pure JS we would do something like below:

const canvas = document.querySelector('canvas');
const canvasCtx = canvas.getContext('2d');

But to do so in React we need to create a ref and pass it to the canvas element so that we can address it later in different hooks. To do so in our application, create one ref using the useRef hook:

const canvasRef = useRef<HTMLCanvasElement | null>(null);

Pass the ref into our canvas element:

<canvas
  ref={canvasRef}
  style={{
    border: "3px solid black",
  }}
  height={height}
  width={width}
/>;

Once the canvasRef is passed into the canvas element, we can use it inside a useEffect hook and store the context in a state variable.

export interface ICanvasBoard {
  height: number;
  width: number;
}

const CanvasBoard = ({ height, width }: ICanvasBoard) => {
  const canvasRef = (useRef < HTMLCanvasElement) | (null > null);
  const [context, setContext] =
    (useState < CanvasRenderingContext2D) | (null > null);

  useEffect(() => {
    //Draw on canvas each time
    setContext(canvasRef.current && canvasRef.current.getContext("2d")); //store in state variable
  }, [context]);

  return (
    <canvas
      ref={canvasRef}    
      style={{
        border: "3px solid black",
      }}
      height={height}
      width={width}
    />
  );
};

Drawing the objects

After getting the context we need to do the following tasks each time a component updates:

1. Clear the canvas
2. Draw the snake with the current position
3. Draw a fruit at a random position inside the box

We are going to clear the canvas multiple times, so we will make this a utility function. So for that, let's create a folder called utilities:

mkdir utilities
cd utilities
touch index.tsx

The above command will also create an index.tsx file inside the utilities folder. Add the below code in the utilities/index.tsx file:

export const clearBoard = (context: CanvasRenderingContext2D | null) => {
  if (context) {
    context.clearRect(0, 0, 1000, 600);
  }
};

The clearBoard function is pretty straightforward. It does the following actions:

1. It accepts the 2d canvas context objects as an argument.
2. It checks that the context is not null or undefined.
3. The clearRect function will clear all the pixels or objects present inside the rectangle. This function will take width and height as an argument for the rectangle to be cleared.

We will use this clearBoard function inside our CanvasBoard useEffect to clear the canvas every time the component is updated. For differentiating between different useEffects, we will name the above useEffect as useEffect1.

Now let's start by drawing the snake and the fruit at a random position. Since we are going to draw the objects multiple times, we'll create a utility function called drawObject for it. Add the below code in the utilities/index.tsx file:

export interface IObjectBody {
  x: number;
  y: number;
}

export const drawObject = (
  context: CanvasRenderingContext2D | null,
  objectBody: IObjectBody[],
  fillColor: string,
  strokeStyle = "#146356"
) => {
  if (context) {
    objectBody.forEach((object: IObjectBody) => {
      context.fillStyle = fillColor;
      context.strokeStyle = strokeStyle;
      context?.fillRect(object.x, object.y, 20, 20);
      context?.strokeRect(object.x, object.y, 20, 20);
    });
  }
};

The drawObject function accepts the following arguments:

1. context – A 2D canvas context object for drawing the object on the canvas.
2. objectBody – This is an array of objects with each object having x and y properties, like the IObjectBody interface.
3. fillColor – Color to be filled inside the object.
4. strokeStyle – Color to be filled in the outline of the object. Defaults to #146356.

This function will check if the context is undefined or null. Then it iterates over the objectBody via forEach. For each object it performs the following operations:

1. It will assign the fillStyle and strokeStyle inside the context.
2. It will use fillReact to create a filled rectangle with coordinates object.x and object.y with size 20x20
3. Finally, it will use strokeRect to create an outlined rectangle with coordinates object.x and object.y with size 20x20

For drawing the snake we need to maintain the position of the snake. For that, we can use our global state management tool redux.

We need to update our reducers/index.ts file. Since we want to track the position of the snake, we will add it into our global state as follows:

interface ISnakeCoord {
  x: number;
  y: number;
}

export interface IGlobalState {
  snake: ISnakeCoord[] | [];
}

const globalState: IGlobalState = {
  //Postion of the entire snake
  snake: [
    { x: 580, y: 300 },
    { x: 560, y: 300 },
    { x: 540, y: 300 },
    { x: 520, y: 300 },
    { x: 500, y: 300 },
  ],
};

Let's call this state in our CanvasBoard component. We will use the useSelector hook of react-redux to get the required state from the store. The following will give us the snake's global state:

const snake1 = useSelector((state: IGlobalState) => state.snake);

Let's embed this in our CanvasBoard component and pass it to our drawObject function and see the output:

//Importing necessary modules
import { useSelector } from "react-redux";
import { clearBoard, drawObject, generateRandomPosition } from "../utils";

export interface ICanvasBoard {
  height: number;
  width: number;
}

const CanvasBoard = ({ height, width }: ICanvasBoard) => {
    const canvasRef = useRef<HTMLCanvasElement | null>(null);
    const [context, setContext] = useState<CanvasRenderingContext2D | null>(null);
    const snake1 = useSelector((state: IGlobalState) => state.snake);
    const [pos, setPos] = useState<IObjectBody>(
        generateRandomPosition(width - 20, height - 20)
      );

    useEffect(() => {
      //Draw on canvas each time
     setContext(canvasRef.current && canvasRef.current.getContext("2d")); //store in state variable
        drawObject(context, snake1, "#91C483"); //Draws snake at the required position
        drawObject(context, [pos], "#676FA3"); //Draws fruit randomly
    }, [context])

  return (
    <canvas
      style={{
        border: "3px solid black",
      }}
      height={height}
      width={width}
    />
  );
};

Let's see what the output will look like when the snake is drawn:

Drawing snake

Moving the snake across the board

Now that we have our snake drawn onto the canvas, let's learn how to move the snake across the board.

The movement of the snake is simple. It should always follow the below points:

1. If the snake is moving horizontally, then it can only move up, down, and in the direction it is currently moving. For example, if the snake is moving to the right then it can move up or down or continue moving to the right.
2. If the snake is moving vertically, then it can only move to the right, left or continue in the direction it's currently moving. For example, if the snake is moving up then it can move right or left (or continue up).
3. The snake cannot move in the direction opposite to that of the current direction. That is, if the snake is moving to the left then it cannot move to the right straight away. Likewise, if it's going up it cannot move down.

For the smooth movement of our snake, the snake should always move in a rectangular fashion. And it needs to meet the above points to have that movement.

The below diagram helps summarise how the movement of the snake works in the entire application:

Snake movement explanation

NOTE: In the above diagram, the entire movement of the snake starts with the CanvasBoard component.

HINT: Don't worry if you cannot follow the above diagram. Just read the later sections to get more clarity.

To maintain the movement of the snake, we will introduce another state variable to our global state called disallowedDirection. The purpose of this variable is to keep track of the opposite direction of the snake's movement.

For example if the snake is moving left then the disallowedDirection will be set to right. So to summarise, we are tracking this direction so that we can avoid the snake moving in its opposite direction.

Let's create this variable in our global state:

interface ISnakeCoord {
  x: number;
  y: number;
}

export interface IGlobalState {
  snake: ISnakeCoord[] | [];
  disallowedDirection: string;
}

const globalState: IGlobalState = {
    //Postion of the entire snake
  snake: [
    { x: 580, y: 300 },
    { x: 560, y: 300 },
    { x: 540, y: 300 },
    { x: 520, y: 300 },
    { x: 500, y: 300 },
  ],
    disallowedDirection: ""
};

Now let's create some actions and action creators that will help us move the snake.

We will have two types of actions for this case:

• Actions for sagas
  • These are the actions that will be dispatched from the CanvasBoard component. These actions will be:
    • MOVE_RIGHT
    • MOVE_LEFT
    • MOVE_UP
    • MOVE_DOWN
• Actions for reducers
  • These are the actions that will be yielded by the saga to propagate the calls to the reducers. These actions will be:
    • RIGHT
    • LEFT
    • UP
    • DOWN

We will take a closer look at these actions in the coming sections.

We will be creating one more action called SET_DIS_DIRECTION to set the disallowedDirection state.

Let's create some action creators for the movement of the snake:

• setDisDirection – This action creator will be used to set the disallowedDirection via the SET_DIS_DIRECTION action. Below is the code for this action creator:

export const setDisDirection = (direction: string) => ({
  type: SET_DIS_DIRECTION,
  payload: direction
});

• makeMove – This will be used to set/update the new coordinates of the snake by updating the snake state variable. Below is the code for this action creator:

export const makeMove = (dx: number, dy: number, move: string) => ({
  type: move,
  payload: [dx, dy]
});

The parameters dx and dy are the deltas. They tell the Redux store by how much we should increase/decrease the coordinates of each snake block to move the snake in the given direction.

The move parameter is used to specify in which direction will the snake be moving. We will have a look at these actions creators soon in the coming sections.

Finally, our updated actions/index.ts file will look something like this:

export const MOVE_RIGHT = "MOVE_RIGHT";
export const MOVE_LEFT = "MOVE_LEFT";
export const MOVE_UP = "MOVE_UP";
export const MOVE_DOWN = "MOVE_DOWN";

export const RIGHT = "RIGHT";
export const LEFT = "LEFT";
export const UP = "UP";
export const DOWN = "DOWN";

export const SET_DIS_DIRECTION = "SET_DIS_DIRECTION";

export interface ISnakeCoord {
  x: number;
  y: number;
}
export const makeMove = (dx: number, dy: number, move: string) => ({
  type: move,
  payload: [dx, dy]
});

export const setDisDirection = (direction: string) => ({
  type: SET_DIS_DIRECTION,
  payload: direction
});

Now, let's have a look at the logic we are using to move the snake based on the above actions. All the snake movement will be tracked by the following actions:

• RIGHT
• LEFT
• UP
• DOWN

All these actions are the building blocks of the snake's movement. These actions, when dispatched, will always update the snake's global state based on the logic we are describing below. And they will calculate new coordinates of the snake on each movement.

To calculate the new coordinates of the snake after each movement, we will use the following logic:

1. Copy the coordinates into a new variable called newSnake
2. Add at the start of the newSnake the new x and y coordinates. These x and y attributes of these coordinates are updated by adding the x and y values from the action's payload.
3. Finally, remove the last entry from the newSnake array.

Now that we have some understanding of how the snake is moving, let's add the following cases in our gameReducer:

    case RIGHT:
    case LEFT:
    case UP:
    case DOWN: {
      let newSnake = [...state.snake];
      newSnake = [{
        //New x and y coordinates
        x: state.snake[0].x + action.payload[0],
        y: state.snake[0].y + action.payload[1],
      }, ...newSnake];
      newSnake.pop();

      return {
        ...state,
        snake: newSnake,
      };
    }

For every movement of the snake, we update the new x and y coordinates which are increased by payloads action.payload[0] and action.payload[1]. We successfully completed setting up the actions, actions creators, and the reducer logic.

We are good to go and can now use all of this in our CanvasBoard component.

First, let's add a useEffect hook in our CanvasBoard component. We will use this hook to attach/add an event handler. This event handler will be attached to the event keypress. We are using this event because whenever we press the w a s d keys we should be able to control the movement of the snake.

Our useEffect will look something like below:

useEffect(() => {
    window.addEventListener("keypress", handleKeyEvents);

    return () => {
      window.removeEventListener("keypress", handleKeyEvents);
    };
  }, [disallowedDirection, handleKeyEvents]);

It works in the following manner:

1. On the mounting of the component, the event listener with callback function handleKeyEvents is attached to the window object.
2. On the unmounting of the component, the event listener is removed from the window object.
3. If there is any change in the direction or handleKeyEvents function, we will re-run this useEffect. Therefore, we have added disallowedDirection and handleKeyEvents into the dependency array.

Let's have a look at how the handleKeyEvents callback is created. Below is the code for the same:

const handleKeyEvents = useCallback(
    (event: KeyboardEvent) => {
      if (disallowedDirection) {
        switch (event.key) {
          case "w":
            moveSnake(0, -20, disallowedDirection);
            break;
          case "s":
            moveSnake(0, 20, disallowedDirection);
            break;
          case "a":
            moveSnake(-20, 0, disallowedDirection);
            break;
          case "d":
            event.preventDefault();
            moveSnake(20, 0, disallowedDirection);
            break;
        }
      } else {
        if (
          disallowedDirection !== "LEFT" &&
          disallowedDirection !== "UP" &&
          disallowedDirection !== "DOWN" &&
          event.key === "d"
        )
          moveSnake(20, 0, disallowedDirection); //Move RIGHT at start
      }
    },
    [disallowedDirection, moveSnake]
  );

We have wrapped this function with a useCallback hook. This is because we want the memoized version of this function which is called on every state change (that is, on the change of disallowedDirection and moveSnake). This function is called on every key pressed on the keyboard.

This event handler callback function serves the following purpose:

• If the disallowedDirection is empty then we make sure that the game will start only when the user presses the d key. This means that the game starts only when the snake moves to the right.

NOTE: Initially the global state variable disallowedDirection value is an empty string. In this way, we know that if its value is empty then it's the start of the game.

Once the game starts, the disallowedDirection won’t be empty and then it listens to all the keyboard presses such as w s and a.

Finally, on every keypress, we are calling the function called moveSnake. We will take a closer look into it in the next section.

The moveSnake function is a function that dispatches an action passed to the makeMove action creator. This function accepts three arguments:

1. dx - Delta for x-axis. This tells by how much the snake should move along the x-axis. If dx is positive then it moves to the right, if it's negative it moves to the left.
2. dy - Delta for the y-axis. This tells by how much the snake should move along the y-axis. If dy is positive then it moves down, if it's negative it moves up.
3. disallowedDirection - This value tells that the snake should not move in the opposite direction. This is an action that is captured by our middleware saga.

The code for the moveSnake function will look like this:

const moveSnake = useCallback(
    (dx = 0, dy = 0, ds: string) => {
      if (dx > 0 && dy === 0 && ds !== "RIGHT") {
        dispatch(makeMove(dx, dy, MOVE_RIGHT));
      }

      if (dx < 0 && dy === 0 && ds !== "LEFT") {
        dispatch(makeMove(dx, dy, MOVE_LEFT));
      }

      if (dx === 0 && dy < 0 && ds !== "UP") {
        dispatch(makeMove(dx, dy, MOVE_UP));
      }

      if (dx === 0 && dy > 0 && ds !== "DOWN") {
        dispatch(makeMove(dx, dy, MOVE_DOWN));
      }
    },
    [dispatch]
  );

The moveSnake is a simple function that checks for the conditions:

1. If dx > 0, and the disallowedDirection is not RIGHT, then it can move in the RIGHT direction.
2. If dx < 0, and the disallowedDirection is not LEFT, then it can move in the LEFT direction.
3. If dy > 0, and the disallowedDirection is not DOWN, then it can move in the DOWN direction.
4. If dy < 0, and the disallowedDirection is not UP, then it can move in the UP direction.

This disallowedDirection value is set in our sagas which we'll talk about more in the later sections of this article. If we revisit the handleKeyEvents function now it makes much more sense. Let's walk through an example over here:

• Suppose you want to move the snake to the RIGHT. Then this function will detect that the d key is pressed.
• Once this key is pressed it calls the makeMove function (Game start condition) with dx as 20 (+ve), dy as 0, and the previously set disallowedDirection previously is called over here.

In this way, we make the movement of the snake in a particular direction. Now let's have a look at the sagas that we have used, and how they handle the movement of the snake.

Let's create a file called saga/index.ts. This file will consist of all our sagas. This is not a rule, but in general, we create two sagas.

The first one is the saga which dispatches the actual actions to the store – let's call this worker saga. The second is the watcher saga which watches for any action that is being dispatched – let's call this watcher saga.

Now we need to create a watcher saga that will look out for the following actions: MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN.

function* watcherSaga() {
    yield takeLatest(
      [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN],
      moveSaga
    ); 
}

This watcher saga will watch for the actions above and execute the moveSaga function which is a worker saga.

You will notice that we have used a new function named takeLatest. This function will call the worker saga and cancel any previous saga calls if any of the actions mentioned in the first argument are dispatched.

From the words of the redux-saga docs:

takeLatest(pattern, saga, ...args)

Forks a saga on each action dispatched to the Store that matches pattern. And automatically cancels any previous saga task started previously if it's still running.

• Each time an action is dispatched to the store. And if this action matches pattern, takeLatest starts a new saga task in the background. If a saga task was started previously (on the last action dispatched before the actual action), and if this task is still running, the task will be cancelled.
• pattern: String | Array | Function - for more information see docs for [take(pattern)](https://redux-saga.js.org/docs/api/#takepattern)
• saga: Function - a Generator function
• args: Array<any> - arguments to be passed to the started task. takeLatest will add the incoming action to the argument list (i.e. the action will be the last argument provided to saga)

Now let's create a worker saga called moveSaga which will actually dispatch the actions to the Redux store:

export function* moveSaga(params: {
    type: string;
    payload: ISnakeCoord;
  }): Generator<
    | PutEffect<{ type: string; payload: ISnakeCoord }>
    | PutEffect<{ type: string; payload: string }>
    | CallEffect<true>
  > {
    while (true) {
    //dispatches movement actions
     yield put({
           type: params.type.split("_")[1],
           payload: params.payload,
      }); 

      //Dispatches SET_DIS_DIRECTION action
      switch (params.type.split("_")[1]) {
        case RIGHT:
          yield put(setDisDirection(LEFT));
          break;

        case LEFT:
          yield put(setDisDirection(RIGHT));
          break;

        case UP:
          yield put(setDisDirection(DOWN));
          break;

        case DOWN:
          yield put(setDisDirection(UP));
          break;
      }
      yield delay(100);
    }
  }

The moveSaga worker saga performs the following functions:

1. It executes inside an infinite loop.
2. So once a direction is given – that is if the d key is pressed and MOVE_RIGHT action is dispatched – then it starts dispatching the same action until a new action (that is, direction) is given. This is handled by the below snippet:

yield put({
    type: params.type.split("_")[1],
    payload: params.payload,
});

3. Once the above action is dispatched we set the disallowed direction to the opposite direction which is taken care of by the action creator setDisDirection.

Now let's stitch these sagas into our sagas/index.ts file:

import {
    CallEffect,
    delay,
    put,
    PutEffect,
    takeLatest
} from "redux-saga/effects";
import {
    DOWN,
    ISnakeCoord,
    LEFT,
    MOVE_DOWN,
    MOVE_LEFT,
    MOVE_RIGHT,
    MOVE_UP, RIGHT,
    setDisDirection, UP
} from "../actions";

  export function* moveSaga(params: {
    type: string;
    payload: ISnakeCoord;
  }): Generator<
    | PutEffect<{ type: string; payload: ISnakeCoord }>
    | PutEffect<{ type: string; payload: string }>
    | CallEffect<true>
  > {
    while (true) {
      yield put({
        type: params.type.split("_")[1],
        payload: params.payload,
      });
      switch (params.type.split("_")[1]) {
        case RIGHT:
          yield put(setDisDirection(LEFT));
          break;

        case LEFT:
          yield put(setDisDirection(RIGHT));
          break;

        case UP:
          yield put(setDisDirection(DOWN));
          break;

        case DOWN:
          yield put(setDisDirection(UP));
          break;
      }
      yield delay(100);
    }
  }

  function* watcherSagas() {
    yield takeLatest(
      [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN],
      moveSaga
    );
  }

  export default watcherSagas;

Now let's update our CanvasBoard component to incorporate these changes.

//Importing necessary modules
import { useSelector } from "react-redux";
import { drawObject, generateRandomPosition } from "../utils";

export interface ICanvasBoard {
    height: number;
    width: number;
}

const CanvasBoard = ({ height, width }: ICanvasBoard) => {
    const canvasRef = useRef < HTMLCanvasElement | null > (null);
    const [context, setContext] = useState < CanvasRenderingContext2D | null > (null);
    const snake1 = useSelector((state: IGlobalState) => state.snake);
    const [pos, setPos] = useState < IObjectBody > (
        generateRandomPosition(width - 20, height - 20)
    );

    const moveSnake = useCallback(
        (dx = 0, dy = 0, ds: string) => {
            if (dx > 0 && dy === 0 && ds !== "RIGHT") {
                dispatch(makeMove(dx, dy, MOVE_RIGHT));
            }

            if (dx < 0 && dy === 0 && ds !== "LEFT") {
                dispatch(makeMove(dx, dy, MOVE_LEFT));
            }

            if (dx === 0 && dy < 0 && ds !== "UP") {
                dispatch(makeMove(dx, dy, MOVE_UP));
            }

            if (dx === 0 && dy > 0 && ds !== "DOWN") {
                dispatch(makeMove(dx, dy, MOVE_DOWN));
            }
        },
        [dispatch]
    );

    const handleKeyEvents = useCallback(
        (event: KeyboardEvent) => {
            if (disallowedDirection) {
                switch (event.key) {
                    case "w":
                        moveSnake(0, -20, disallowedDirection);
                        break;
                    case "s":
                        moveSnake(0, 20, disallowedDirection);
                        break;
                    case "a":
                        moveSnake(-20, 0, disallowedDirection);
                        break;
                    case "d":
                        event.preventDefault();
                        moveSnake(20, 0, disallowedDirection);
                        break;
                }
            } else {
                if (
                    disallowedDirection !== "LEFT" &&
                    disallowedDirection !== "UP" &&
                    disallowedDirection !== "DOWN" &&
                    event.key === "d"
                )
                    moveSnake(20, 0, disallowedDirection); //Move RIGHT at start
            }
        },
        [disallowedDirection, moveSnake]
    );
    useEffect(() => {
        //Draw on canvas each time
        setContext(canvasRef.current && canvasRef.current.getContext("2d")); //store in state variable
                    clearBoard(context);
        drawObject(context, snake1, "#91C483"); //Draws snake at the required position
    }, [context]);

    useEffect(() => {
        window.addEventListener("keypress", handleKeyEvents);

        return () => {
            window.removeEventListener("keypress", handleKeyEvents);
        };
    }, [disallowedDirection, handleKeyEvents]);

    return (
        <canvas
            style={{
                border: "3px solid black",
            }}
            height={height}
            width={width}
        />
    );
};

Once you've made these changes you can try moving the snake. And voilà! You will see the following output:

Moving snake across the board

Drawing the fruit at a random position

To draw a fruit at a random position on the board we will use the generateRandomPosition utility function. Let's have a look at this function:

function randomNumber(min: number, max: number) {
  let random = Math.random() * max;
  return random - (random % 20);
}
export const generateRandomPosition = (width: number, height: number) => {
  return {
    x: randomNumber(0, width),
    y: randomNumber(0, height),
  };
};

This is a function that will generate random x and y coordinates in multiples of 20. These coordinates will always be less than the width and height of the board. It accepts width and height as arguments.

Once we have this function we can use it to draw the fruit at a random position inside the board.

First, let's create a state variable pos that will initially consist of some random position.

const [pos, setPos] = useState<IObjectBody>(generateRandomPosition(width - 20, height - 20));

Then, we will draw the fruit via our drawObject function. After this we will slightly update our useEffect hook:

 useEffect(() => {
        //Draw on canvas each time
        setContext(canvasRef.current &&   canvasRef.current.getContext("2d")); //store in state variable

        clearBoard(context);

        drawObject(context, snake1, "#91C483"); //Draws snake at the required position

        drawObject(context, [pos], "#676FA3"); //Draws object randomly
    }, [context]);

Once we have made the changes our board will look like below:

Snake and fruit drawn on the board

Score calculator

The game score is calculated based on how many fruits the snake has consumed without colliding with itself or with the boundary of the box. If the snake consumes the fruit then the size of the snake increases. If it collides with the edge of the box, then the game is over.

Now that we know what our criteria are for calculating the score, let's have a look on how we calculate the reward.

Calculating the reward

The reward after the snake consumes the fruit is as follows:

1. Increase the size of the snake.
2. Increase the score.
3. Place the new fruit at a different random location.

If the snake consumes the fruit, then we must increase the size of the snake. This is a really simple task, we can just append the new x and y coordinates which are less than 20 from the last element of the snake global state array. For example, if the snake has the following coordinates:

{
snake: [
    { x: 580, y: 300 },
    { x: 560, y: 300 },
    { x: 540, y: 300 },
    { x: 520, y: 300 },
    { x: 500, y: 300 },
  ],
}

We should simply append the following object into the snake array: { x: 480, y: 280 }

In this way, we increase the size of the snake as well as add the new part/block at the end of it. For this to be implemented via Redux and redux-saga, we will need the following action and action creator:

export const INCREMENT_SCORE = "INCREMENT_SCORE"; //action

export const increaseSnake = () => ({  //action creator
    type: INCREASE_SNAKE
  });

We will also update our gameReducer to accommodate these changes. We will add the following case:

case INCREASE_SNAKE:
      const snakeLen = state.snake.length;
      return {
        ...state,
        snake: [
          ...state.snake,
          {
            x: state.snake[snakeLen - 1].x - 20,
            y: state.snake[snakeLen - 1].y - 20,
          },
        ],
      };

In our CanvasBoard component, we will first introduce a state variable called isConsumed. This variable will check if the fruit is consumed or not.

const [isConsumed, setIsConsumed] = useState<boolean>(false);

In our useEffect hook where we are drawing our snake and the fruit just below that, we will add the following condition:

//When the object is consumed
    if (snake1[0].x === pos?.x && snake1[0].y === pos?.y) {
      setIsConsumed(true);
    }

The above condition will check if the head of the snake snake[0] is equal to the pos, or the position of the fruit. If it is true, then it will set the isConsumed state variable to true.

Once the fruit is consumed, we need to increase the size of the snake. We can do this easily via another useEffect. Let's create another useEffect and call the action creator increaseSnake:

//useEffect2
useEffect(() => {
    if (isConsumed) {
      //Increase snake size when object is consumed successfully
      dispatch(increaseSnake());
    }
  }, [isConsumed]);

Now that we have increased the size of the snake, let's take a look at how we can update the score and generate a new fruit at another random position.

To generate a new fruit at another random position, we update the pos state variable which will re-run the useEffect1 and draw the object at pos. We should update our useEffect1 with a new dependency of pos and update useEffect2 as follows:

useEffect(() => {
    //Generate new object
    if (isConsumed) {
      const posi = generateRandomPosition(width - 20, height - 20);
      setPos(posi);
      setIsConsumed(false);

      //Increase snake size when object is consumed successfully
      dispatch(increaseSnake());
    }
  }, [isConsumed, pos, height, width, dispatch]);

One last thing left to do in this reward system is to update the score each time the snake eats the fruit. To do this follow the below steps:

1. Introduce a new global state variable called score. Update our global state as below in the reducers/index.ts file:

export interface IGlobalState {
  snake: ISnakeCoord[] | [];
  disallowedDirection: string;
  score: number;
}

const globalState: IGlobalState = {
  snake: [
    { x: 580, y: 300 },
    { x: 560, y: 300 },
    { x: 540, y: 300 },
    { x: 520, y: 300 },
    { x: 500, y: 300 },
  ],
  disallowedDirection: "",
  score: 0,
};

2. Create the following action and action creator in our actions/index.ts file:

export const INCREMENT_SCORE = "INCREMENT_SCORE"; //action

//action creator:
export const scoreUpdates = (type: string) => ({
  type
});

3. Next, update our reducer to handle the INCREMENT_SCORE action. This will simply increment the global state score by one.

case INCREMENT_SCORE:
      return {
        ...state,
        score: state.score + 1,
      };

4. Then we update our score state, dispatching the INCREMENT_SCORE action each time snake catches the fruit. For this we can update our useEffect2 as follows:

useEffect(() => {
    //Generate new object
    if (isConsumed) {
      const posi = generateRandomPosition(width - 20, height - 20);
      setPos(posi);
      setIsConsumed(false);

      //Increase snake size when object is consumed successfully
      dispatch(increaseSnake());

      //Increment the score
      dispatch(scoreUpdates(INCREMENT_SCORE));
    }
  }, [isConsumed, pos, height, width, dispatch]);

5. Finally, we create a component called ScoreCard. This will display the player’s current score. We will store this in the file components/ScoreCard.tsx.

import { Heading } from "@chakra-ui/react";
import { useSelector } from "react-redux";
import { IGlobalState } from "../store/reducers";

const ScoreCard = () => {
    const score = useSelector((state: IGlobalState) => state.score);
    return (
        <Heading as="h2" size="md" mt={5} mb={5}>Current Score: {score}</Heading>
    );
}

export default ScoreCard;

After this we should also add the ScoreCard component into the App.tsx file to display it on our page.

import { ChakraProvider, Container, Heading } from "@chakra-ui/react";
import { Provider } from "react-redux";
import CanvasBoard from "./components/CanvasBoard";
import ScoreCard from "./components/ScoreCard";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <ChakraProvider>
        <Container maxW="container.lg" centerContent>
          <Heading as="h1" size="xl">SNAKE GAME</Heading>
          <ScoreCard />
          <CanvasBoard height={600} width={1000} />
        </Container>
      </ChakraProvider>
    </Provider>
  );
};

export default App;

Once everything is in place, our snake will have a complete reward system that increases the size of the snake to update the score.

Player playing snake with updating score and snake length.

Collision detection

In this section, we are going to take a look at how we implement collision detection for our Snake game.

In our Snake game, if a collision is detected, then the game is over – that is, the game stops. There are two conditions for collisions to happen:

1. Snake collides with the boundaries of the box, or
2. Snake collides with itself.

Let's take a look at the first condition. Suppose the head of the snake touches the boundaries of the box. In that case we will immediately stop the game.

For this to be incorporated into our game we will need to do as follows:

1. Create an action and an action creator as below:

export const STOP_GAME = "STOP_GAME"; //action

//action creator
export const stopGame = () => ({
  type: STOP_GAME
});

2. We need to update our sagas/index.ts file as well. We are going to make sure that saga stops dispatching actions once the STOP_GAME action is encountered.

export function* moveSaga(params: {
  type: string;
  payload: ISnakeCoord;
}): Generator<
  | PutEffect<{ type: string; payload: ISnakeCoord }>
  | PutEffect<{ type: string; payload: string }>
  | CallEffect<true>
> {
  while (params.type !== STOP_GAME) {
    yield put({
      type: params.type.split("_")[1],
      payload: params.payload,
    });
    switch (params.type.split("_")[1]) {
      case RIGHT:
        yield put(setDisDirection(LEFT));
        break;

      case LEFT:
        yield put(setDisDirection(RIGHT));
        break;

      case UP:
        yield put(setDisDirection(DOWN));
        break;

      case DOWN:
        yield put(setDisDirection(UP));
        break;
    }
    yield delay(100);
  }
}

function* watcherSagas() {
  yield takeLatest(
    [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN, STOP_GAME],
    moveSaga
  );
}

3. Finally we need to update our useEffect1 by adding the following condition:

if ( //Checks if the snake head is out of the boundries of the obox
      snake1[0].x >= width ||
      snake1[0].x <= 0 ||
      snake1[0].y <= 0 ||
      snake1[0].y >= height
    ) {
      setGameEnded(true);
      dispatch(stopGame());
      window.removeEventListener("keypress", handleKeyEvents);
    }

We are also removing the event listener handleKeyEvents. This will make sure that once the game is over the player cannot move the snake.

Finally, let's have a look at how we can detect the self-collision of the snake. We are going to use a utility function called hasSnakeCollided. It accepts two parameters: the first is the snake array, and the second is the head of the snake. If the head of the snake touches any parts of itself then it returns true or else it returns false.

The hasSnakeCollided function will look like below:

export const hasSnakeCollided = (
  snake: IObjectBody[],
  currentHeadPos: IObjectBody
) => {
  let flag = false;
  snake.forEach((pos: IObjectBody, index: number) => {
    if (
      pos.x === currentHeadPos.x &&
      pos.y === currentHeadPos.y &&
      index !== 0
    ) {
      flag = true;
    }
  });

  return flag;
};

We might slightly need to update our useEffect1 by updating the collision detection condition like this:

if (  
      //Checks if the snake has collided with itself 
      hasSnakeCollided(snake1, snake1[0]) ||

      //Checks if the snake head is out of the boundries of the obox
      snake1[0].x >= width ||
      snake1[0].x <= 0 ||
      snake1[0].y <= 0 ||
      snake1[0].y >= height
    ) {
      setGameEnded(true);
      dispatch(stopGame());
      window.removeEventListener("keypress", handleKeyEvents);
    }

Our useEffect1 will finally look like below:

//useEffect1
useEffect(() => {
    //Draw on canvas each time
    setContext(canvasRef.current && canvasRef.current.getContext("2d"));
    clearBoard(context);
    drawObject(context, snake1, "#91C483");
    drawObject(context, [pos], "#676FA3"); //Draws object randomly

    //When the object is consumed
    if (snake1[0].x === pos?.x && snake1[0].y === pos?.y) {
      setIsConsumed(true);
    }

    if (
      hasSnakeCollided(snake1, snake1[0]) ||
      snake1[0].x >= width ||
      snake1[0].x <= 0 ||
      snake1[0].y <= 0 ||
      snake1[0].y >= height
    ) {
      setGameEnded(true);
      dispatch(stopGame());
      window.removeEventListener("keypress", handleKeyEvents);
    } else setGameEnded(false);
  }, [context, pos, snake1, height, width, dispatch, handleKeyEvents]);

Our game will look like below once we add the collision detection system:

Collision detection

Instruction component

We are in the end game now! Our final component will be the Instruction component. It will consist of instructions about the game like initial game condition, keys to use, and a reset button.

Let's start by creating a file called components/Instructions.tsx. Place the below code in this file:

import { Box, Button, Flex, Heading, Kbd } from "@chakra-ui/react";

export interface IInstructionProps {
  resetBoard: () => void;
}
const Instruction = ({ resetBoard }: IInstructionProps) => (
  <Box mt={3}>
    <Heading as="h6" size="lg">
      How to Play
    </Heading>
    <Heading as="h5" size="sm" mt={1}>
    NOTE: Start the game by pressing <Kbd>d</Kbd>
    </Heading>
    <Flex flexDirection="row" mt={3}>
      <Flex flexDirection={"column"}>
        <span>
          <Kbd>w</Kbd> Move Up
        </span>
        <span>
          <Kbd>a</Kbd> Move Left
        </span>
        <span>
          <Kbd>s</Kbd> Move Down
        </span>
        <span>
          <Kbd>d</Kbd> Move Right
        </span>
      </Flex>
      <Flex flexDirection="column">
        <Button onClick={() => resetBoard()}>Reset game</Button>
      </Flex>
    </Flex>
  </Box>
);

export default Instruction;

The Instruction component will accept resetBoard as a prop which is a function that will help the user when the game is over or when they want to reset the game.

Before we dive into the resetBoard function we need to make the following updates in our Redux store and saga:

1. Add the following action and action creator in the actions/index.ts file:

export const RESET_SCORE = "RESET_SCORE"; //action
export const RESET = "RESET"; //action

//Action creator:
export const resetGame = () => ({
  type: RESET
});

2. Then add the following condition into our sagas/index.ts. We are going to make sure that saga discontinues to dispatch actions once the RESET and the STOP_GAME actions are encountered.

export function* moveSaga(params: {
  type: string;
  payload: ISnakeCoord;
}): Generator<
  | PutEffect<{ type: string; payload: ISnakeCoord }>
  | PutEffect<{ type: string; payload: string }>
  | CallEffect<true>
> {
  while (params.type !== RESET && params.type !== STOP_GAME) {
    yield put({
      type: params.type.split("_")[1],
      payload: params.payload,
    });
    switch (params.type.split("_")[1]) {
      case RIGHT:
        yield put(setDisDirection(LEFT));
        break;

      case LEFT:
        yield put(setDisDirection(RIGHT));
        break;

      case UP:
        yield put(setDisDirection(DOWN));
        break;

      case DOWN:
        yield put(setDisDirection(UP));
        break;
    }
    yield delay(100);
  }
}

function* watcherSagas() {
  yield takeLatest(
    [MOVE_RIGHT, MOVE_LEFT, MOVE_UP, MOVE_DOWN, RESET, STOP_GAME],
    moveSaga
  );
}

3. Finally, we update our reducers/index.ts file for the RESET_SCORE case as follows:

case RESET_SCORE:
      return { ...state, score: 0 };

Once our sagas and reducers are updated we can take a look at what operations the resetBoard callback will perform.

The resetBoard function performs the following operations:

1. Removes the event listener handleKeyEvents
2. dispatches the actions necessary for resetting the game.
3. Dispatches the action to reset the score.
4. Clears the canvas.
5. Draws the snake again at its initial position
6. Draws the fruit at a new random position.
7. Finally, adds the event listener handleKeyEvents for the keypress event.

Below is how our resetBoard function will look:

const resetBoard = useCallback(() => {
    window.removeEventListener("keypress", handleKeyEvents);
    dispatch(resetGame());
    dispatch(scoreUpdates(RESET_SCORE));
    clearBoard(context);
    drawObject(context, snake1, "#91C483");
    drawObject(
      context,
      [generateRandomPosition(width - 20, height - 20)],
      "#676FA3"
    ); //Draws object randomly
    window.addEventListener("keypress", handleKeyEvents);
  }, [context, dispatch, handleKeyEvents, height, snake1, width]);

You should place this function inside the CanvasBoard component and pass the resetBoard function as a prop to the Instruction function as below:

<>
      <canvas
        ref={canvasRef}
        style={{
          border: `3px solid ${gameEnded ? "red" : "black"}`,
        }}
        width={width}
        height={height}
      />
      <Instruction resetBoard={resetBoard} />
    </>

Once this is placed we will have the Instruction component set up like below:

Instructions with reset button

Final Game

If you have followed along up to this point, then congrats! You have successfully created a fun Snake game with React, Redux and redux-sagas. Once all of these things are connected your game will look like below:

The complete snake game

Summary

So this is how you can build a Snake game from scratch. You can find the entire source code for the game in the below repository:

https://github.com/keyurparalkar/snake-game

If you liked the idea of building your own Snake game from scratch then you can take it up a notch by building these enhancements:

• Build the snake game with three.js
• Add an online score board

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.

I think it's helpful to work with a practical use case because it is much simpler to understand the concepts when you can relate them to real life.

So in this guide, you will be learning what web workers are in JavaScript, you'll get a brief introduction to WebSockets, and you'll see how you can manage sockets in the proper way.

This article is quite application/hands-on oriented, so I would suggest trying the example out as you go along to get a much better understanding.

Let’s dive in.

Table of contents

• Prerequisites
• What are web workers in JavaScript?
• Brief introduction to web sockets
• Use case description
• Project structure
• Client and Server architecture
• Worker System
• Communication between the UI and the socket via web worker
• Summary

Prerequisites

Before you start reading this article, you should have a basic understanding of the following topics:

• Class Diagrams: We are going to use them to showcase our example. Here are a couple resources you can use to learn more about them:
  • Class diagrams
  • UML Diagram course
• Context Diagram and Container Diagrams
• React
• Web sockets
  • Introduction to sockets
  • How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path
• Difference between scope and context
• Global objects

What are web workers in JavaScript?

A web worker is a piece of browser functionality. It is the real OS threads that can be spawned in the background of your current page so that it can perform complex and resource-intensive tasks.

Imagine that you have some large data to fetch from the server, or some complex rendering needs to be done on the UI. If you do this directly on your webpage then the page might get jankier and will impact the UI.

To mitigate this, you can simply create a thread – that is a web worker – and let the web worker take care of the complex stuff.

You can communicate with the web worker in a pretty simple manner which can be used to transfer data to and fro from the worker to the UI.

Common examples of web workers would be:

• Dashboard pages that display real-time data such as stock prices, real-time active users, and so on
• Fetching huge files from the server
• Autosave functionality

You can create a web worker using the following syntax:

const worker = new Worker("<worker_file>.js");

Worker is an API interface that lets you create a thread in the background. We need to pass a parameter, that is a <worker_file>.js file. This specifies the worker file the API needs to execute.

NOTE: A thread is created once a Worker call is initiated. This thread only communicates with its creator, that is the file which created this thread.

A worker can be shared or used by multiple consumers/scripts. These are called shared workers. The syntax of the shared worker is very similar to that of the above mentioned workers.

const worker = new SharedWorker("<worker_file>.js");

You can read more about SharedWorkers in this guide.

History of web workers

Web workers execute in a different context, that is they do not execute in a global scope such as window context. Web workers have their own dedicated worker context which is called DedicatedWorkerGlobalScope.

There are some cases where you can't use web workers, though. For example, you can't use them to manipulate the DOM or the properties of the window object. This is because the worker does not have the access to the window object.

Web workers can also spawn new web workers. Web workers communicate with their creator using certain methods like postMessage, onmessage, and onerror. We will look into these methods closely in the later sections of this article.

Brief Introduction to Web Sockets

A web socket is a type of communication that happens between two parties/entities using a WebSocket protocol. It actually provides a way to communicate between the two connected entities in a persistent manner.

You can create a simple web socket like below:

const socket = new WebSocket("ws://example.com");

Over here we have created a simple socket connection. You'll notice that we have passed a parameter to the WebSocket constructor. This parameter is a URL at which the connection should be established.

You can read more about web sockets by referring to the Websockets link in the prerequisites.

Use Case Description

NOTE: Context, Container, and Class diagrams drawn in this blog post don't accurately follow the exact conventions of these diagrams. They're approximated here so that you can understand the basic concepts.

Before we start, I would suggest reading up on c4models, container diagrams, and context diagrams. You can find resources about them in the prerequisites section.

In this article, we are going to consider the following use case: data transfer using web workers via socket protocol.

We are going to build a web application which will plot the data on a line chart every 1.5 seconds. The web application will receive the data from the socket connection via web workers. Below is the context diagram of our use case:

Container Diagram

As you can see from the above diagram, there are 4 main components to our use case:

1. Person: A user who is going to use our application
2. Software system: Client App – This is the UI of our application. It consists of DOM elements and a web worker.
3. Software system: Worker system – This is a worker file that resides in the client app. It is responsible for creating a worker thread and establishing the socket connection.
4. Software system: Server application – This is a simple JavaScript file which can be executed by node to create a socket server. It consists of code which helps to read messages from the socket connection.

Now that we understand the use case, let's dive deep into each of these modules and see how the whole application works.

Project Structure

Please follow this link to get the full code for the project that I developed for this article.

Our project is divided into two folders. First is the server folder which consists of server code. The second is the client folder, which consists of the client UI, that is a React application and the web worker code.

Following is the directory structure:

├── client
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── README.md
│   ├── src
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── components
│   │   │   ├── LineChartSocket.jsx
│   │   │   └── Logger.jsx
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── pages
│   │   │   └── Homepage.jsx
│   │   ├── wdyr.js
│   │   └── workers
│   │       └── main.worker.js
│   └── yarn.lock
└── server
    ├── package.json
    ├── package-lock.json
    └── server.mjs

To run the application, you first need to start the socket server. Execute the following commands one at a time to start the socket server (assuming you are in the parent directory):

cd server
node server.mjs

Then start the client app by running the following commands (assuming you are in the parent directory):

cd client
yarn run start

Open http://localhost:3000 to start the web app.

Client and Server Application

The client application is a simple React application, that is CRA app, which consists of a Homepage. This home page consists of the following elements:

• Two buttons: start connection and stop connection which will help to start and stop the socket connection as required.
• A line chart component - This component will plot the data that we receive from the socket at regular intervals.
• Logged message - This is a simple React component that will display the connection status of our web sockets.

Below is the container diagram of our client application.

Container Diagram: Client Application

Below is how the UI will look:

Actual UI

To check out the code for the client UI, go to the client folder. This is a regular create-react-app, except that I have removed some boilerplate code that we don't need for this project.

App.jsx is actually the starter code. If you check this out, we have called the <Homepage /> component in it.

Now let's have a look at the Homepage component.

const Homepage = () => {
  const [worker, setWorker] = useState(null);
  const [res, setRes] = useState([]);
  const [log, setLog] = useState([]);
  const [buttonState, setButtonState] = useState(false);

  const hanldeStartConnection = () => {
    // Send the message to the worker [postMessage]
    worker.postMessage({
      connectionStatus: "init",
    });
  };

  const handleStopConnection = () => {
    worker.postMessage({
      connectionStatus: "stop",
    });
  };

    //UseEffect1
  useEffect(() => {
    const myWorker = new Worker(
      new URL("../workers/main.worker.js", import.meta.url)
    ); //NEW SYNTAX
    setWorker(myWorker);

    return () => {
      myWorker.terminate();
    };
  }, []);

    //UseEffect2
  useEffect(() => {
    if (worker) {
      worker.onmessage = function (e) {
        if (typeof e.data === "string") {
          if(e.data.includes("[")){
            setLog((preLogs) => [...preLogs, e.data]);
          } else {
            setRes((prevRes) => [...prevRes, { stockPrice: e.data }]);
          }
        }

        if (typeof e.data === "object") {
          setButtonState(e.data.disableStartButton);
        }
      };
    }
  }, [worker]);

  return (
    <>
      <div className="stats">
        <div className="control-panel">
          <h3>WebWorker Websocket example</h3>
          <button
            id="start-connection"
            onClick={hanldeStartConnection}
            disabled={!worker || buttonState}
          >
            Start Connection
          </button>
          &nbsp;
          <button
            id="stop-connection"
            onClick={handleStopConnection}
            disabled={!buttonState}
          >
            Stop Connection
          </button>
        </div>
        <LineChartComponent data={res} />
      </div>
      <Logger logs={log}/>
    </>
  );
};

As you can see, it's just a regular functional component that renders two buttons – a line chart, and a custom component Logger.

Now that we know how our homepage component looks, let's dive into how the web worker thread is actually created. In the above component you can see there are two useEffect hooks used.

The first one is used for creating a new worker thread. It's a simple call to the Worker constructor with a new operator as we have seen in the previous section of this article.

But there are some difference over here: we have passed an URL object to the worker constructor rather than passing the path of the worker file in the string.

const myWorker = new Worker(new URL("../workers/main.worker.js", import.meta.url));

You can read more about this syntax here.

If you try to import this web worker like below, then our create-react-app won’t be able to load/bundle it properly so you will get an error since it has not found the worker file during bundling:

const myWorker = new Worker("../workers/main.worker.js");

Next, we also don’t want our application to run the worker thread even after the refresh, or don’t want to spawn multiple threads when we refresh the page. To mitigate this, we'll return a callback in the same useEffect. We use this callback to perform cleanups when the component unmounts. In this case, we are terminating the worker thread.

We use the useEffect2 to handle the messages received from the worker.

Web workers have a build-in property called onmessage which helps receive any messages sent by the worker thread. The onmessage is an event handler of the worker interface. It gets triggered whenever a message event is triggered. This message event is generally triggered whenever the postMessage handler is executed (we will look more into this in a later section).

So in order for us to send a message to the worker thread, we have created two handlers. The first is handleStartConnection and the second is handleStopConnection. Both of them use the postMessage method of the worker interface to send the message to the worker thread.

We will talk about the message {connectionStatus: init} in our next section.

You can read more about the internal workings of the onmessage and postMessage in the following resources:

• Onmessage
• Postmessage

Since we now have a basic understanding about how our client code is working, then let's move on to learn about the Worker System in our context diagram above.

Worker System

To understand the code in this section, make sure you go through the file src/workers/main.worker.js.

To help you understand what's going on here, we will divide this code into three parts:

1. A self.onmessage section
2. How the socket connection is managed using the socketManagement() function
3. Why we need the socketInstance variable at the top

How self.onmessage works

Whenever you create a web worker application, you generally write a worker file which handles all the complex scenarios that you want the worker to perform. This all happens in the main.worker.js file. This file is our worker file.

In the above section, we saw that we established a new worker thread in the useEffect. Once we created the thread, we also attached the two handlers to the respective start and stop connection buttons.

The start connection button will execute the postMessage method with message: {connectionStatus: init} . This triggers the message event, and since the message event is triggered, all the message events are captured by the onmessage property.

In our main.worker.js file, we have attached a handler to this onmessage property:

self.onmessage = function (e) {
  const workerData = e.data;
  postMessage("[WORKER] Web worker onmessage established");
  switch (workerData.connectionStatus) {
    case "init":
      socketInstance = createSocketInstance();
      socketManagement();
      break;

    case "stop":
      socketInstance.close();
      break;

    default:
      socketManagement();
  }
}

So whenever any message event is triggered in the client, it will get captured in this event handler.

The message {connectionStatus: init} that we send from the client is received in the event e. Based on the value of connectionStatus we use the switch case to handle the logic.

NOTE: We have added this switch case because we need to isolate some part of the code which we do not want to execute all the time (we will look into this in a later section).

How the socket connection is managed using the socketManagement() function

There are some reasons why I have shifted the logic of creating and managing a socket connection into a separate function. Here is the code for a better understanding of the point I am trying to make:

function socketManagement() {
  if (socketInstance) {
    socketInstance.onopen = function (e) {
      console.log("[open] Connection established");
      postMessage("[SOCKET] Connection established");
      socketInstance.send(JSON.stringify({ socketStatus: true }));
      postMessage({ disableStartButton: true });
    };

    socketInstance.onmessage = function (event) {
      console.log(`[message] Data received from server: ${event.data}`);
      postMessage( event.data);
    };

    socketInstance.onclose = function (event) {
      if (event.wasClean) {
        console.log(`[close] Connection closed cleanly, code=${event.code}`);
        postMessage(`[SOCKET] Connection closed cleanly, code=${event.code}`);
      } else {
        // e.g. server process killed or network down
        // event.code is usually 1006 in this case
        console.log('[close] Connection died');
        postMessage('[SOCKET] Connection died');
      }
      postMessage({ disableStartButton: false });
    };

    socketInstance.onerror = function (error) {
      console.log(`[error] ${error.message}`);
      postMessage(`[SOCKET] ${error.message}`);
      socketInstance.close();
    };
  }
}

This is a function that will help you manage your socket connection:

• For receiving the message from the socket server we have the onmessage property which is assigned an event handler.
• Whenever a socket connection is opened, you can perform certain operations. To do that we have the onopen property which is assigned to an event handler.
• And if any error occurs or when we are closing the connection then, we use onerror and onclose properties of the socket.

For creating a socket connection there is a separate function altogether:

function createSocketInstance() {
  let socket = new WebSocket("ws://localhost:8080");

  return socket;
}

Now all of these functions are called in a switch case like below in the main.worker.js file:

self.onmessage = function (e) {
  const workerData = e.data;
  postMessage("[WORKER] Web worker onmessage established");
  switch (workerData.connectionStatus) {
    case "init":
      socketInstance = createSocketInstance();
      socketManagement();
      break;

    case "stop":
      socketInstance.close();
      break;

    default:
      socketManagement();
  }
}

So based on what message the client UI sends to the worker the appropriate function will be executed. It is pretty self-explanatory on what message which particular function should be triggered, based on the above code.

Now consider a scenario where we placed all the code inside self.onmessage.

self.onmessage = function(e){
    console.log("Worker object present ", e);
    postMessage({isLoading: true, data: null});

    let socket = new WebSocket("ws://localhost:8080");

        socket.onopen = function(e) {
          console.log("[open] Connection established");
          console.log("Sending to server");
          socket.send("My name is John");
        };

        socket.onmessage = function(event) {
          console.log(`[message] Data received from server: ${event.data}`);
        };

        socket.onclose = function(event) {
          if (event.wasClean) {
            console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
          } else {
            // e.g. server process killed or network down
            // event.code is usually 1006 in this case
            console.log('[close] Connection died');
          }
        };

            socket.onerror = function(error) {
              console.log(`[error] ${error.message}`);
            };
}

This would cause the following problems:

1. On every postMessage call made by the client UI, there would have been a new socket instance.
2. It would have been difficult to close the socket connection.

Because of these reasons, all the socket management code is written in a function socketManagement and catered using a switch case.

Why we need the socketInstance variable at the top

We do need a socketInstance variable at the top because this will store the socket instance which was previously created. It is a safe practice since no one can access this variable externally as main.worker.js is a separate module altogether.

Communication between the UI and the socket via web worker

Now that we understand which part of the code is responsible for which section, we will take a look at how we establish a socket connection via webworkers. We'll also see how we respond via socket server to display a line chart on the UI.

End-to-end flow of the application

NOTE: Some calls are purposefully not shown in the diagram since it will make the diagram cluttered. Make sure you refer to the code as well while referring to this diagram.

Now let's first understand what happens when you click on the start connection button on the UI:

1. One thing to notice over here is that our web worker thread is created once the component is mounted, and is removed/terminated when the component is unmounted.
2. Once the start connection button is clicked, a postMessage call is made with {connectionStatus: init}
3. The web worker’s onmessage event handler which is listening to all the message events comes to know that it has received connectionStatus as init. It matches the case, that is in the switch case of main.worker.js. It then calls the createSocketInstance() which returns a new socket connection at the URL: ws://localhost:8080
4. After this a socketManagement() function is called which checks if the socket is created and then executes a couple of operations.
5. In this flow, since the socket connection is just established therefore, socketInstance’s onpen event handler is executed.
6. This will send a {socketStatus: true} message to the socket server. This will also send a message back to the client UI via postMessage({ disableStartButton: true}) which tells the client UI to disable the start button.
7. Whenever the socket connection is established, then the server socket’s on('connection', ()=>{}) is invoked. So in step 3, this function is invoked at the server end.
8. Socket’s on('message', () => {}) is invoked whenever a message is sent to the socket. So at step 6, this function is invoked at the server end. This will check if the socketStatus is true, and then it will start sending a random integer every 1.5 seconds to the client UI via web workers.

Now that we understood how the connection is established, let's move on to understand how the socket server sends the data to the client UI:

1. As discussed above, socket server received the message to send the data, that is a random number every 1.5 second.
2. This data is recieved on the web worker’s end using the onmessage handler.
3. This handler then calls the postMessage function and sends this data to the UI.
4. After receiving the data it appends it to an array as a stockPrice object.
5. This acts as a data source for our line chart component and gets updated every 1.5 seconds.

Now that we understand how the connection is established, let's move on to understand how the socket server sends the data to the client UI:

1. As discussed above, socket server recieved the message to send the data, that is a random number, every 1.5 seconds.
2. This data is recieved on the web worker’s end using the socket's onmessage handler.
3. This handler then calls the postMessage function of the web worker and sends this data to the UI.
4. After receiving the data via useEffect2 it appends it to an array as a stockPrice object.
5. This acts as a data source for our line chart component and gets updated every 1.5 seconds.

NOTE: We are using recharts for plotting the line chart. You can find more information about it at the official docs.

Here is how our application will look in action:

Working Example

Summary

So this was a quick introduction to what web workers are and how you can use them to solve complex problems and create better UIs. You can use web workers in your projects to handle complex UI scenarios.

If you want to optimize your workers, read up on the below libraries:

• comlink
• thread.js

Thank you for reading!

Follow me on twitter, github, and linkedIn.

I think it's helpful to work with a practical use case because it is much simpler to understand the concepts when you can relate them to real life.

So in this guide, you will learn about classes in JavaScript, inheritance, abstract functions, how to use keywords such as super and extends, static keywords, and private members of classes.

Let's dive in.

Table of contents

• Prerequisites
• What Are Classes in JavaScript?
• Use Case Description
• Abstract Functions and Inheritance in Chair Management System
• Static Keyword in JavaScript
• Private members in JavaScript

Prerequisites

Before you start reading this blog post you should have a basic understanding of the following topics:

• Class Diagrams: We are going to use them to showcase our example
• Context Diagram and Container Diagrams
• Knowledge of OOPs
• Introduction to Prototypal Inheritance, and Prototype chaining
• Introduction to constructor functions in JS

What are classes in JavaScript?

Classes were introduced in EcmaScript 2015 (ES6) to provide a cleaner way to follow object-oriented programming patterns.

JavaScript still follows a prototype-based inheritance model. Classes in JavaScript are syntactic sugar over the prototype-based inheritance model which we use to implement OOP concepts.

Thus the introduction of classes in JS made it easier for developers to build software around OOP concepts. It also brought in similarities to different OOP-based programming languages such as C++ and Java.

Before classes, we used constructor functions to do OOP in JavaScript. Have a look at the example below:

function Pen(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

const pen1 = new Pen("Marker", "Blue", "$3");
console.log(pen1);

The above code shows a Pen constructor function that has name, color, and price properties. We are using the new keyword with the Pen constructor to create an object pen1.

Now let's say we want to add a new function to the Pen constructor. To do this we need to add the function into the prototype property of Pen. Have a look at the showPrice function below:

function Pen(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

const pen1 = new Pen("Marker", "Blue", "$3");

Pen.prototype.showPrice = function(){
    console.log(`Price of ${this.name} is ${this.price}`);
}

pen1.showPrice();

If these concepts aren't making sense to you, then I would recommend brushing up on your JS/background knowledge through the articles mentioned in the Prerequisites section. In particular, check out the article about Prototype and Constructor functions.

Looking at the above code, we can say that we have done what we wanted to do – that is, add a showPrice function to the constructor Pen. But you can see that it's not that readable compared to OOP concepts we implement in C++ or Java.

We can re-create the above example with the help of the class keyword. Have a look at the below code:

class Pen {
    constructor(name, color, price){
        this.name = name;
        this.color = color; 
        this.price = price;
    }

    showPrice(){
        console.log(`Price of ${this.name} is ${this.price}`);
    }
}

const pen1 = new Pen("Marker", "Blue", "$3");
pen1.showPrice();

Noticed the difference! We have achieved the same results but with much cleaner syntax. The addition of a new member function like showPrice is much easier as compared to adding a function directly into the constructor's prototype.

Let's dive into classes in JS a bit deeper using an example use case. With this use case, we are going to see how these concepts can be useful to solve some real-life problems.

Use Case Description

Just a quick note: the Context, Container, and Classes diagrams drawn in this blog post don't exactly follow the conventions of the above diagrams. I've approximated the diagrams to help you understand the concepts in general.

Before we start, I would suggest reading up on c4models, container diagrams, and context diagrams if you need a refresher. You can find them in the prerequisites section.

We are going to solve the following problem: helping a shopkeeper classify the chairs in their inventory and display them on the screen.

The use case is simple and pretty self-explanatory. Have a look at the diagram below which showcases the overall proposed system:

Context Diagram for the Chair Management System

As you can see from the above diagram, there are 3 main components to it:

1. Person: The shopkeeper is going to interact with our system.
2. Software System: Stock Interface Portal - This is an interface that allows the shopkeeper to view or modify the chair information present in the inventory.
3. Software System: Chair Management System - This system will allow the interface to fetch or modify the required details requested by the shopkeeper.

Now that we understand the use case, let's start with the target system that we are going to focus on in this blog post. It is the Chair Management System.

We'll start off by creating some major components in our Chair Management System. Our components in this system are just different classes which will help facilitate the different needs of the shopkeeper.

Chair component of Chair Management System

Let's add one component called Chair. Since it is a class, it will have its own attributes (properties) and behavior (methods).

Have a look at the above diagram. We can see that:

• The second row contains attributes of the chair class, for example color, seatHeight, recliningAngle, and so on.
• The third row corresponds to the methods that tell us what functions the chair can perform, for example adjustSeatHeight, adjustAngle, moveChair, and so on.

We'll follow the above representation for all the components that we'll create throughout this article.

The Chair component will be our base component. This means that all the other types of chairs such as office chairs, dining chairs, and so on will come under this class/component.

Let's start off by creating our base chair class in JS. Have a look at the below code:

class Chair {
    constructor(color, seatHeight, recliningAngle, backSupport, headSupport, padding, armRests, seatSize, isHeightAdjustable, isMovable){
        this.color = color;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.backSupport = backSupport;
        this.headSupport = headSupport;
        this.padding = padding;
        this.armRests = armRests;
        this.seatSize = seatSize;
        this.isHeightAdjustable = isHeightAdjustable;
        this.isMovable = isMovable;
    }

    adjustableHeight() {};
    adjustAngle(){};
    moveChair(){};    
}

const newChair = new Chair("Blue","25 inch","20 deg",true,false,"3 inch",true,"16 inch",false,false);

console.dir("Chair Prototype", Chair);
console.log("Chair Object", newChair);

The chair class has the following members:

• Attributes: These will define the attributes of the chair such as color, seat height, backSupport, and so on.
• Functions: These define the behavior of the chair. For example, if the chair has isHeightAdjustable set to true then it can use the function adjustableHeight. You can see that all the functions are declared in the Chair class. These are the abstract functions. We will talk more about these functions later in this article.

At the bottom of the code, we have two console log statements. The first one will print out the definition of the class Chair . The second object will print the newChair instance.

First console.dir output

If you look at the first output, it prints out the Chair class. Let's have a look at the contents of it:

• It consists of a property prototype. This is the prototype that all the instances of class Chair will have.
• The name property is the name of the object.
• Lastly, we have the __proto__ or [[Prototype]] property. This is the actual prototype of the class Chair.

{
    "color": "Blue",
    "seatHeight": "25 inch",
    "recliningAngle": "20 deg",
    "backSupport": true,
    "headSupport": false,
    "padding": "3 inch",
    "armRests": true,
    "seatSize": "16 inch",
    "isHeightAdjustable": false,
    "isMovable": false,
    [[Prototype]]: {
        adjustAngle: ƒ adjustAngle()
        adjustableHeight: ƒ adjustableHeight()
        constructor: class Chair
        moveChair: ƒ moveChair()
        [[Prototype]]: Object
    }
}

The second log statement prints out the information of the chair object instance. It will consist of all of the Chair class attributes. If you notice closely you can see that the prototype of this instance is similar to that of the prototype property of the chair class. This happens because of prototypical inheritance.

Now let's see how we can use this concept by adding a new component/class into our Chair Management System.

Abstract Functions and Inheritance in Chair Management System

The abstract function is just a function signature in a class without any implementation. It helps us generalize the code so that the subclasses can use them and add their own implementation to it.

To demonstrate this in our use case, let's add one more component to our Chair Management System.

I have modified the chair class so that it now consists of defaults. These defaults will be used by all the instances. Later the subclass can modify it. We will see shortly how we can achieve this. Have a look at the new Chair class below:

class Chair {
    constructor(color, seatHeight, recliningAngle, backSupport, headSupport, padding, armRests, seatSize, isHeightAdjustable, isMovable){
        //Defaults which can be changed by the subclass class.
        this.color = color;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.backSupport = true;
        this.headSupport = false;
        this.padding = "3 inch";
        this.armRests = true;
        this.seatSize = "16 inch";
        this.isHeightAdjustable = false;
        this.isMovable = false;
        this.type = "Chair";
    }

    adjustableHeight() {};
    adjustAngle(){};
    moveChair(){};    
}

const newChair = new Chair();

newChair;

Now let's add a new component/class called OfficeChair. This will inherit the attributes and methods from the Chair class. The new modified class diagram will look like this:

Class diagram

Notice that the new class OfficeChair consists of only the methods and not the attributes. We assume here that all the attributes will be inherited from the Chair class.

For the OfficeChair class, we have implemented the abstract methods present in the Chair class.

Have a look at the below code for the OfficeChair class:

class OfficeChair extends Chair{
    constructor(color, isHeightAdjustable, seatHeight, recliningAngle){
        super();
        this.type = "Office Chair";
        this.color = color;
        this.isHeightAdjustable = isHeightAdjustable;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.isMovable = true;
    }

    adjustableHeight(height){
        if(height > this.seatHeight){
            console.log(`Chair height changed to ${height}`);        
        } else {
            console.log(`Height cannot be decreased more than the seat height ${this.seatHeight}`);
        }
    }

    adjustAngle(angle){
        if(angle >= this.recliningAngle){
            console.log(`Chair angle changed to ${angle}`);        
        } else {
            console.log(`Angle cannot be decreased more than the min reclining angle ${this.recliningAngle}`);
        }
    }

    moveChair(x,y){
        console.log(`Chair moved to co-ordinates = (${x}, ${y})`);
    }
}

const newOfficeChair = new OfficeChair("Red", true, 30, 30);

console.log(newOfficeChair.adjustableHeight(31));
console.log(newOfficeChair.adjustAngle(40));
console.log(newOfficeChair.moveChair(10,20));

This is a class that inherits the functions and attributes from the superclass chair. It uses the extends keyword to allow the OfficeChair class to perform inheritance.

The extends keyword has the following syntax:

class ChildClass extends ParentClass{...}

Next, we have a constructor function and the implementation of some of the functions from the superclass. Notice that we are using the super keyword in the constructor.

We use the super keyword to call the constructor of the parent class. We can also use it to call functions and properties of the parent class.

A word of caution when you're using the super keyword:

• Make sure you call the super function at the start of the constructor. If you don't, and you try to access the parent class's properties before you use super in the child class constructor, it will throw an error.
• Once the super function is called, then you can access all the attributes and functions of the parent class.
• Super is not just related to the classes – you can also use it to call functions on the object's parent.

You can read more about super in the MDN docs.

Lastly, if you notice, we have added the implementation for the abstract functions. The functions are as follows:

• adjustableHeight: This function will check if the input height is greater than the minimum height of the chair. If yes, we can change the height or else display the error message. A person can also increase or decrease the height of the chair. Note that this.seatHeight is the minimum height of the chair from the ground below which the person cannot lower the height.
• adjustAngle: This function will check if the input angle is greater than the default value this.recliningAngle. If the input angle is greater than the default angle, then the angle will change or else an error message will be displayed.
• moveChair: Any chair whose isMovable property is true then the corresponding class will have an implementation of the moveChair function. It simply helps to move the chair based on the input x and y coordinates.

Note that we have also reinitialized some of the attributes of the Chair class such as type. We will be explicitly defining the type attribute for each subclass. This will help us classify the chairs present in the inventory by assigning these classes to each of them.

You should now have an idea of what abstract functions are and how useful they can be. Some advantages of having abstract functions:

• Reduces redundancy in the codebase.
• Provides a proper way of generalizing classes.
• Allows flexibility for subclasses to implement whichever abstract function they need.

Static Keyword in Javascript

The static keyword in JavaScript helps you define functions and properties in the class that cannot be called by the instance of the object. They can only be called by the class itself which consists of these static functions and properties.

Generally, we use static methods in the classes for utility purposes such as printing out all the properties of the class, creating a new object, clearing other objects of the classes, and so on.

The advantage of using static functions or properties in a class is that:

• They can be used to create functions/properties which need not be present in the instances. This helps to maintain some isolation in the codebase.
• They reduce code redundancy in some cases.

Now let's have a look at how we can implement this concept in our Chair class. We will also take a look at some use cases where we can use the static keyword.

Here are the scenarios where you can use the static keyword:

• Usage in classes
• Static within static
• Calling static from a constructor
• Class static initialization blocks

For more information on the above scenarios, please visit the MDN docs.

We are going to see all the variants of the Chair class via these scenarios:

How to use the static keyword in classes

Like any other programming language, this is one of the most beginner-friendly ways to use the static keyword. Let's define some methods and properties of the classes as static and observe the behavior.

Have a look at the below code:

class Chair {
//Defaults that will be common for all the instances:
    static backSupport = true;
    static armRests = true;

    constructor(color, seatHeight, recliningAngle, headSupport, padding, seatSize, isHeightAdjustable, isMovable){
        //Defaults which can be changed by the subclass class.
        this.color = color;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.headSupport = false;
        this.padding = "3 inch";
        this.seatSize = "16 inch";
        this.isHeightAdjustable = false;
        this.isMovable = false;
        this.type = "Chair";
    } 

    static logObjectProps(){
        console.dir(this);
    }

    adjustableHeight() {};
    adjustAngle(){};
    moveChair(){};    
}

Below is the output of the above code:

Static variables

The output of the static function

As you can see above, the static methods are only accessible via the class itself. It cannot be accessed by instances of the Chair class. Instances of the class do not have the static attributes present:

No static members in instances

As you can see above, the instance x of the Chair class does not have the static method or properties present in its definitions.

If you try to access a static method or a property using a class instance then it will throw a reference error or simply return undefined.

How to use the static keyword within another static function

There can be a situation where you might need to use the static properties or function inside another static function. You can do this by referring to your other property/function using this keyword inside the static function.

Let's modify our Chair class to show how this works:

class Chair {
//Defaults that will be common for all the instances:
    static backSupport = true;
    static armRests = true;

    constructor(color, seatHeight, recliningAngle, headSupport, padding, seatSize, isHeightAdjustable, isMovable){
        //Defaults which can be changed by the subclass class.
        this.color = color;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.headSupport = false;
        this.padding = "3 inch";
        this.seatSize = "16 inch";
        this.isHeightAdjustable = false;
        this.isMovable = false;
        this.type = "Chair";
    } 

    static logObjectProps(){
        console.dir(this);
    }

        //Static within static usage
        static printDefaultProps(){
                console.log(`Chair Back Support = ${this.backSupport}`);
                console.log(`Arm rests support = ${this.armRests}`);
        }

    adjustableHeight() {};
    adjustAngle(){};
    moveChair(){};    
}

Output of the above code

As you can see the printDefaultProps function has access to the static properties backSupport and armRests.

How to call static properties/functions from a constructor

Similar to what we saw above, you can also access these static properties/functions in a constructor. To do this, things are a bit different over here.

Within a constructor to call a static property/function you need to use the <classname>.property or <classname>.functionName(). This happens because the this keyword does not have direct access to the static members. This is not only true for constructors but any non-static functions.

Let's try to understand this by modifying the Chair class.

class Chair {
//Defaults that will be common for all the instances:
    static backSupport = true;
    static armRests = true;

    constructor(color, seatHeight, recliningAngle, headSupport, padding, seatSize, isHeightAdjustable, isMovable){
        //Defaults which can be changed by the subclass class.
        this.color = color;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.headSupport = false;
        this.padding = "3 inch";
        this.seatSize = "16 inch";
        this.isHeightAdjustable = false;
        this.isMovable = false;
        this.type = "Chair";
        console.log(Chair.printDefaultProps()); //Usage of static method inside constructor
    } 

    static logObjectProps(){
        console.dir(this);
    }

        //Static within static usage
        static printDefaultProps(){
                console.log(`Chair Back Support = ${this.backSupport}`);
                console.log(`Arm rests support = ${this.armRests}`);
        }

    adjustableHeight() {};
    adjustAngle(){};
    moveChair(){};    
}

In the above code, the last line console.log(Chair.printDefaultProps()); showcases how we can use a static method inside a constructor.

Private members of classes in Javascript

Private members are members of the class which can only be used internally by the class itself. They cannot be accessed outside the class. Even the instances of the class cannot access these private members.

All private members are declared using #<propertName> syntax. They are generally called hash names.

Let's have a look at an example based on our use case.

We'll define some new properties inside the OfficeChair class. Suppose we want to add default billing information for all the office chairs. We also want these to be only accessible to the OfficeChair class so that the other utility functions can use these variables.

We don't want other classes to interfere with the billing information of other classes. To handle this we can use private fields.

Consider the addition of the following fields:

• Price
• Maximum Discount
• Seller Address

Updated Class Diagram

Note that we can represent private fields in a class diagram using a dash, like this: -.

Have a look at the code below which demonstrates how we have added these fields into the class OfficeChair:

class OfficeChair extends Chair {
    //Newly Added Properties
    #basePrice;
    #maxDiscount;
    #sellerAddress;

    constructor(type, color, isHeightAdjustable, seatHeight, recliningAngle) {
        super();
        this.type = type;
        this.color = color;
        this.isHeightAdjustable = isHeightAdjustable;
        this.seatHeight = seatHeight;
        this.recliningAngle = recliningAngle;
        this.isMovable = true;
        this.#basePrice = 1000;
        this.#maxDiscount = 5; //In percentage
        this.#sellerAddress = "XYZ, street";
    }

    adjustableHeight(height) {
        if (height > this.seatHeight) {
            console.log(`Chair height changed to ${height}`);
        } else {
            console.log(`Height cannot be decreased more than the seat height ${this.seatHeight}`);
        }
    }

    adjustAngle(angle) {
        if (angle >= this.recliningAngle) {
            console.log(`Chair angle changed to ${angle}`);
        } else {
            console.log(`Angle cannot be decreased more than the min reclining angle ${this.recliningAngle}`);
        }
    }

    moveChair(x, y) {
        console.log(`Chair moved to co-ordinates = (${x}, ${y})`);
    }

    //Newly Added function
    #getChairAmount(taxCharge) {
        return this.#basePrice + (this.#basePrice - this.#basePrice * this.#maxDiscount / 100) + taxCharge;
    }

    //Newly Added function
    generateBill() {
        console.log("**** BILLING INFORMATION ****");
        console.log(`Chair Price = ${this.#getChairAmount(20)}`);
        console.log(`Seller Address = ${this.#sellerAddress}`);
    }
}

When you run the above code in the console, you should see the following output:

Output of private members

As you can see from the above output, we have executed the generateBill function. This function accesses the private fields and function within the class to generate the billing information.

These private variables will only be accessible within the class itself. If you try to reference any of the private members of the class then it will throw a syntax error like below:

Uncaught SyntaxError: Private field '#basePrice' must be declared in an enclosing class

Let me demonstrate how it will look if a subclass tries to access the private variables of the base class:

class DinningChair extends OfficeChair{}

let dineChair = new DinningChair();
dineChair.#basePrice(); //Throws syntax error

The above code will throw a syntax error since you are trying to access the private property of another class.

Static private variables are out of the scope of this blog post, so we won't discuss them further. But you can read about them here.

Summary

These are some of the ways we can leverage classes in JavaScript to implement object-oriented programming concepts in a real-world example.

You can read more about advanced object-oriented concepts below:

• Polymorphism
• Types of inheritance

Thank you for reading!

Follow me on Twitter, GitHub, and LinkedIn.