DEV Community: Akshay Palekar

Exploring the Power of Web Workers and Service Workers in Web Development

Akshay Palekar — Tue, 26 Mar 2024 16:17:54 +0000

Introduction: The Evolving Web Development Landscape

Today's web development landscape is dynamic and fast-paced, with constant innovations driving the creation of richer, more engaging web experiences. In this environment, optimizing performance has become essential. Users demand fast-loading, responsive websites, and search engines prioritize speed in their rankings.

Optimizing performance isn't just about user experience—it's about maximizing reach and engagement. Even minor improvements in page load times can lead to significant gains in conversion rates and user satisfaction. In this context, technologies like Web Workers and Service Workers play a crucial role, offering innovative solutions to enhance performance and streamline operations in web development.

Introducing Web Workers

Definition and Purpose of Web Workers

Web Workers are like specialized assistants in a busy office—they handle tasks independently, ensuring smooth operation without interruptions. In web development, these JavaScript scripts operate separately from the main browser thread, allowing concurrent execution of tasks without blocking the user interface. By offloading heavy computations or background tasks to Web Workers, developers optimize web application performance, akin to delegating tasks to maintain productivity.

Benefits of Web Workers

Improved Responsiveness:
- Web Workers act like dedicated assistants handling complex tasks in the background, ensuring the main thread—the 'office manager'—remains available to promptly address user requests without delay.
Multitasking Capabilities:
- Similar to a well-organized team, Web Workers enable parallel processing of tasks, allowing the web application to efficiently tackle multiple responsibilities simultaneously, enhancing productivity.
Enhanced Performance:
- Web Workers function as specialized workers on a production line, each handling a specific task independently, leading to faster completion times and improved overall performance of the web application.
Background Processing:
- Just like a silent worker behind the scenes, Web Workers process tasks in the background, ensuring uninterrupted user interaction by handling heavy computations without obstructing the main interface.
Optimized Resource Management:
- Web Workers serve as resource managers, efficiently allocating tasks to different workers to prevent bottlenecks and maintain smooth operation, much like a well-managed team distributing the workload to avoid overloading any single member.

Web Workers' Independence and Message Passing:

Web Workers function like separate workers in a factory, each with its own workspace. They operate independently from the main browser thread, similar to workers performing tasks in different parts of a factory without needing constant oversight.

Communication between the main thread and Web Workers is akin to passing notes between different departments. Messages containing data or instructions are exchanged asynchronously, allowing tasks to be delegated and completed without disrupting the overall workflow. This setup ensures efficient operation and responsiveness in web applications by offloading heavy tasks to dedicated workers while maintaining seamless communication.

Simple Example:

// Inline worker script
const workerScript = `  self.onmessage = function(event) {
    const count = event.data;
    let result = '';
    for (let i = 1; i <= count; i++) {
      result += i + ', ';
    }
    self.postMessage(result);
  }`;

// Create a Blob URL for the worker script
const blob = new Blob([workerScript], { type: 'application/javascript' });
const workerScriptURL = URL.createObjectURL(blob);

// Create a Web Worker
const worker = new Worker(workerScriptURL);

// Handle messages from the worker
worker.onmessage = function(event) {
    const result = event.data;
    document.getElementById('result').textContent = result;
};

// Start the worker
worker.postMessage(10);

In this example, the Web Worker counts from 1 to the specified number in the background and sends the result back to the main thread, which then displays it on the web page.

Exploring Service Workers

Introduction to Service Workers:

Service Workers act as behind-the-scenes assistants in a theatre, ensuring a seamless performance for the audience (users) by handling various tasks backstage. Their key roles include:

Offline Support: Like a backstage crew preparing props in advance, Service Workers cache content locally, allowing web apps to continue functioning even when the internet connection is lost.
Caching Strategies: Similar to a librarian organizing books for quick access, Service Workers implement caching strategies to store and retrieve web assets efficiently, speeding up load times for users.
Push Notifications: Think of Service Workers as stage managers relaying important cues to actors even when they're offstage, enabling web apps to send push notifications and engage users effectively.
Background Sync: Service Workers act as diligent assistants backstage, synchronizing data with servers behind the scenes, ensuring that user interactions are seamlessly updated, much like a synchronized dance routine.
Progressive Web App Features: Just as a theatre evolves into a full-fledged production with immersive sets and interactive elements, Service Workers enable web apps to offer offline access, home screen installation, and other app-like features for a richer user experience.

Lifecycle

The lifecycle of Service Workers follows four main stages: registration, installation, activation, and handling updates, akin to the process of hiring, onboarding, taking charge, and updating roles in a theatre production.

Registration:
- Service Workers are registered with the browser, much like actors signing up for a play. They specify their roles (scripts) and availability.
Installation:
- Upon registration, the browser downloads and installs the Service Worker script, similar to actors rehearsing their lines backstage.
Activation:
- Once installed, the Service Worker takes charge of the performance (web application), ensuring smooth operation behind the scenes, like a stage manager orchestrating the show.
Handling Updates:
- Service Workers can be updated seamlessly, like changing roles in a production. A new version is prepared, ready to take over the performance when the time is right.

This lifecycle ensures that Service Workers maintain a well-organized and efficient backstage environment, enhancing the performance and reliability of web applications.

Real-time scenarios

Offline Access:
- Like an emergency kit for travellers, Service Workers ensure users can access essential information, such as city guides and maps, even without an internet connection.
Faster Load Times:
- Service Workers act as efficient assistants, preloading website assets to provide swift load times for returning visitors, akin to having tools readily available for immediate use.
Push Notifications:
- Service Workers deliver breaking news alerts directly to users' devices, like a newsstand delivering headlines to your doorstep, keeping users engaged and informed.
Background Sync:
- Functioning as diligent messengers, Service Workers synchronize offline tasks with the server seamlessly, ensuring users' to-do lists remain up-to-date across devices, much like a synchronized dance routine.
Progressive Web Apps (PWAs):
- Service Workers transform websites into fully functional applications, offering offline access, home screen installation, and responsive design, akin to a versatile Swiss Army knife for web experiences.

Code Example:

// Service Worker script
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    /'
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            return response || fetch(event.request);
        })
    );
});

This script caches the main HTML file during installation and serves it from the cache when the page is requested. If the file is not found in the cache, it fetches it from the network.

Conclusion

In summary, Web Workers and Service Workers are indispensable tools in the modern web development toolkit, enabling developers to create high-performance, reliable, and engaging web applications that rival native experiences. Their significance lies in their ability to optimize performance, enhance responsiveness, and unlock advanced features, ultimately shaping the future of web development.

Feel empowered to explore the realm of Web Workers and Service Workers without reservation. Dive in with curiosity, experiment with creativity, and uncover the myriad possibilities they hold. Integrate them seamlessly into your projects to unlock their full potential, enhancing your web development prowess and crafting extraordinary user experiences.

Let's embark on this journey together, embracing the future of web development with Web Workers and Service Workers leading the way.

Happy Coding!

How React Hooks Work in simple words?

Akshay Palekar — Fri, 13 Nov 2020 07:49:09 +0000

Let's start with what is a Hook?

A Hook is a react function that lets you use state and react features from a function based component. Hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one. So the solution to your problem will be a "one-liner" now.

Before we know how React hooks work, let us define what closure is.

“Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.”

In the upcoming examples there will be Closures, so that made me define it.

How does the useState work?

To illustrate how useState works, let us consider an example.

const OurReact = (function(){
    let val; // ‘val’ stores the value in the module scope 
        return {
            render(Component) {
               const Comp = Component();
               Comp.render();
               return Comp;
            },
            useState(initialVal) {
               val = val || initialVal;// Assigns a new value every run 
               function setState(newVal) {
                   val = newVal;
               }
               return [val, setState];
            },
        };  
})();

Here we have used the Module Pattern in the above example to create our own small React clone. So if you want to access the useState then you need to access it as OurReact.useState(...). Like in React, to keep track of the Component State, we are making use of the ‘val’ variable (To keep it simple, it tracks only one component.). As you can see, the useState is inside a closure. Now let us use the above code.

function Character () {
    const [characteName, setCharacterName] = OurReact.useState(‘Mario’); // default value to ‘Mario’
    return{
        changeName: (charName) => setCharacterName(charName),
        render: () => console.log(‘Rendered character:’, characteName),
    }
}
let App;
App = OurReact.render(Character);  // Rendered character: Mario
App.changeName(‘Luigi’);
App = OurReact.render(Character); // Rendered character: Luigi

So this was the simple code to Illustrate useState hook.

Now how does useEffect works?

Whenever you want to do something as a side effect after each render(i.e. Make an API Call or Check component has the data or not), you can pass such effects to the useEffect. If you are familiar with Class-based components, then useEffect serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

function Example() {
    const [characterName, setCharacterName] = useState(‘Mario’);
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(()=>{
       document.title = `Character name ${characterName}`;
    });
    return(
       <div>
          <p>Character : {characterName}</p>
          <input type=’text’ value={characterName} onChange={e => setCharacterName(e.target.value)} />
       </div>
    );
};

Let us replicate the useEffect hook by extending our tiny react clone that we created before.

const OurReact = (function(){
    let val, deps; // A new variable ‘deps’ to hold our dependencies
    return {
        render(Component) {
            const Comp = Component();
            Comp.render();
            Return Comp;
        },
        useEffect(callBack, dependencyArr){
           const hasNoDependency = !dependencyArr,
                 hasDependencyChanged = deps ? !dependencyArr.every((el, i) => el === deps[i]) : true;
           if (hasNoDependency  || hasDependencyChanged ) {
               callback();
               deps = dependencyArr;
           }
        },
        useState(initialVal) {
           val = val || initialVal;
           function setState(newVal) {
              val = newVal;
           };
           return [val, setState];
        },
    };  
})();

Usage:

function Character () {
    const [characteName, setCharacterName] = OurReact.useState(‘Mario’);
    OurReact.useEffect(() => {
        console.log(‘effect called ’, characterName);
    }, [characteName])
    return{
        changeName: (charName) => setCharacterName(charName),
        noopFunction: () => setCharacterName(characteName),  // Similar to Jquery.noop that does nothing.
        render: () => console.log(‘Rendered character:’, characteName),
    }
}

let App;
App = OurReact.render(Character);
//   effect called Mario
// Rendered character: Mario

App.changeName(‘Luigi’);
App = OurReact.render(Character); 
// effect called Luigi
// Rendered character: Luigi

App.noopFunction()
App = OurReact.render(Character); 
// No effects
// Rendered character: Luigi

App.changeName(‘Yoshi’);
App = OurReact.render(Character); 
// effect called Yoshi
// Rendered character: Yoshi

The useEffect runs whenever there is a change in the dependencies, thus we have introduced a new variable in the above example as ‘deps’. So that was the simple explanation of the useEffect Hook.

We know that Hook implementation has thousands of lines of code in it. But hopefully, you got an idea of how things work inside.

Rules to follow while using the Hooks.

Hooks should always be called at the Top Level.

By following this rule, you are making sure that Hooks are always called in the same order as they were declared each time your component renders. (Remember that don't ever call the hooks inside the functions that are nested and also inside the loops.)

Explanation:

functions character() {
    const [characterName, setCharacterName] = useState(‘Mario’);
    useEffect(function storeTheCharacter(){
        localStorage.setItem(‘formData’, characterName);
    });
    const [characterAbility, setCharacterAbility] = useState(‘Fire flower’); 
    useEffect(function displayDetails(){
    document.getElementById(‘characterView’).innerHTML(`Character: ${characterName}, Ability: ${ characterAbility}`)
    });
}

We might have a question that, how does React know which state fits with which useState? The answer is just what we discussed, we always need to call the hooks in the same order as they were declared. And if we call the hooks inside a loop or the order of the hook changes, React will get confused about how to maintain the state for our component.

// 1st Render
useState(‘Mario);  // Initialize the ‘characterName’ state variable to ‘Mario’
useEffect(storeTheCharacter);  // Adding an effect to store the ‘characterName’ to the localStorage
useState(‘Fire Flower’);  // Initialize the ‘characterAbility’ state variable with 'Active'
useEffect(displayDetails);  // Adding an effect to update the displaying data

// 2nd render
useState(‘Mario);  // Read the characterName state variable (argument is ignored)
useEffect(storeTheCharacter);  // Replace the effect for persisting the form
useState(‘Fire Flower’);  // Read the characterAbilities state variable (argument is ignored)
useEffect(displayDetails);  // Replace the effect for updating the displaying data

Since the order of the hooks is maintained, React will be able to Maintain our component’s state.

What if we call a hook with a condition?

if( characterName !== ‘’ ){
    useEffect(function storeTheCharacter () {
            localStorage.setItem('formData', characterName);
    });
}

Here we are breaking the first rule of the Hook in a condition. Let’s see what happens when the condition is ‘false’, the hook is skipped during the rendering, and the order of the Hook call becomes different.
i.e.

useState(Mario) // 1. Read the name state variable (argument is ignored)
// useEffect(storeTheCharacter)  // This Hook was skipped!
useState(‘Fire Flower’)  // 2 (but was 3). Fail to read the surname state variable
useEffect(updateTitle)  // 3 (but was 4). Fail to replace the effect

React fails to recognize what to return for the second useState Hook call. React expected that the second Hook call in this component corresponds to the 'storeTheCharacter' effect, just like during the previous render, but it doesn’t anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs. So that's the reason why hooks are always called on the top level of our component.

Hooks should always be called from React Functions.

Don't call Hooks from regular JavaScript functions. Instead, you can

Call Hooks from React Function components.
Call Hooks from custom Hooks.

Explanation:

import { useState } from ‘react’;
const lives = 3;
const isGameOver = (noOfDeaths) =>{
    const livesLeft = lives – noOfDeaths;
    const [characterName, setCharacterName] = useState(‘Mario’);
        if (livesLeft === 0) { return ‘Game Over’’; } else { return ‘Continue’; }
}

This doesn't make any sense to call the useState inside a regular function.

So those were the rules that you need to follow while using the hooks.

Hope you guys got a clear idea about how things are working inside the React Hooks API and what rules we need to follow while using the hooks. Nowadays hooks are a crucial part of most of the react components. If you guys got any questions related to this post, feel free to shoot them in the comment box.Thank you