Forem: Ishraq Tanvir

⚡ Understanding JavaScript Web Workers: Harnessing the Power of Multithreading

Ishraq Tanvir — Wed, 31 Jul 2024 11:52:23 +0000

Hello fellow developers! 🚀 If you’re on a quest to make your JavaScript code faster and more efficient, Web Workers might be your new best friend! Today, we're diving into a cool concept that’s like having a superhero sidekick for your web apps — Web Workers. Imagine having a helper who takes care of all the heavy lifting while you focus on the main stuff. That’s exactly what Web Workers can do!

It's like having a homemaker who takes care of the cleaning, cooking, and washing while you focus on what matters most...your code!

What Exactly Are Web Workers?

Think of Web Workers as your secret agents who run in the background, handling tasks like complex calculations or data processing without slowing down your main thread. This means your web app stays smooth and snappy, even when you’re dealing with heavy tasks.

Here’s a fun way to look at it:

Why Bother with Web Workers?

JavaScript is single-threaded, which means it can only do one thing at a time. When you’re running a long task on the main thread, your web app can freeze or take a while to load, making users wait and possibly causing frustration. Web Workers come to the rescue by handling these tasks on a separate thread, so your app remains responsive. And users get happy with a faster application!

Let’s Be a Bit Practical!

We’ll break it down into a few simple steps so you can understand how it actually works!

Step 1: Creating the Worker Script

First up, we need a separate JavaScript file for our worker. Let’s call it worker.js or any name you choose!

worker.js:

self.onmessage = function (e) {
    const number = e.data;
    const result = fibonacci(number);
    postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

In this file, we set up our worker to listen for messages with self.onmessage, perform some heavy lifting (like calculating a Fibonacci number), and then send the result back with postMessage.

You might be wondering, what is self? Or what are postMessage and onmessage?

Web Workers operate in a different global context, not the familiar window. We call this special global context self!

Web Workers communicate with the main thread using events. By using events, they can send and receive messages or data. In the code, onmessage typically gets messages or data from the main thread, and postMessage sends processed data from the Web Worker back to the main thread.

Step 2: Creating and Talking to the Worker

Now, let’s see how to create a worker and send messages/data to it from our main script.

main.js:

// Create a new Web Worker using Worker()
const worker = new Worker('worker.js');

// Send data to the worker.
worker.postMessage(40); // Calculate the 40th Fibonacci number

// Receive data from the worker
worker.onmessage = function (e) {
    console.log('The result is:', e.data);
};

// Handle worker errors
worker.onerror = function (error) {
    console.error('Worker error:', error);
};

Here, we create a new worker with new Worker('worker.js'), send a message to it with worker.postMessage, and get results with worker.onmessage. We also handle any potential errors with worker.onerror.

postMessage: sends data to the worker

onmessage: receives processed data from the worker

onerror: handles errors

Cool Ways to Use Web Workers

Web Workers can be super useful in a variety of scenarios. Let’s check out a couple of practical examples.

Example 1: Sorting a Massive Array

Sorting a huge array can take a lot of time. Let’s let a Web Worker handle that.

worker.js:

self.onmessage = function (e) {
    const array = e.data;
    array.sort((a, b) => a - b);
    postMessage(array);
};

main.js:

const worker = new Worker('worker.js');

const largeArray = Array.from({ length: 1000000 }, () => Math.floor(Math.random() * 1000000)); // The array has been generated dynamically as it's a demo scenario.

worker.postMessage(largeArray);

worker.onmessage = function (e) {
    console.log('Sorted array:', e.data);
};

In this example, we create a massive array of random numbers, send it to the worker for sorting, and then get the sorted array back.

Example 2: Fetching Data from an API

Web Workers can also handle API requests without blocking the main thread.

worker.js:

self.onmessage = async function (e) {
    const url = e.data;
    try {
        const response = await fetch(url);
        const data = await response.json();
        postMessage(data);
    } catch (error) {
        postMessage({ error: 'Failed to fetch data' });
    }
};

main.js:

const worker = new Worker('worker.js');

worker.postMessage('https://api.example.com/data');

worker.onmessage = function (e) {
    if (e.data.error) {
        console.error(e.data.error);
    } else {
        console.log('Fetched data:', e.data);
    }
};

Here, we send a URL to the worker, which fetches the data and sends it back. If something goes wrong, the worker sends an error message.

Best Practices for Web Workers

Keep Them Lightweight: Web Workers don’t have direct access to the DOM, so keep their tasks focused.
Efficient Messaging: Pass only essential data between the main thread and workers to avoid overhead.
Handle Errors: Always include error handling to catch any issues.

Visualizing Web Workers

Imagine Web Workers as a team of specialists in a factory. The main thread is the manager, and each worker handles different tasks.

Each worker focuses on a specific task, keeping the main manager (thread) free to oversee the big picture.

Resources

For more detailed information about Web Workers, check out these resources:

Wrapping Up

Web Workers are like having a superpower in JavaScript. They let you offload heavy tasks to background threads, keeping your web apps fast and responsive. Next time your app seems to be lagging, remember your superhero sidekick—Web Workers are here to save the day!

Happy coding! 🌟

🧠 Understanding JavaScript Proxies: Harnessing the Power of Metaprogramming

Ishraq Tanvir — Sat, 27 Jul 2024 18:29:40 +0000

Hello fellow developers! Have you ever needed more control over how objects behave in JavaScript? Today, we will delve into the powerful yet often misunderstood feature of JavaScript: Proxies. Proxies are not hard but the syntax is a bit strange at first sight! Let’s explore what they are, how they work, and some practical use cases.

What is a Proxy?

A Proxy in JavaScript is an object that wraps another object (called the target) and intercepts fundamental operations performed on it, such as property access, assignment, and function invocation. By defining custom behavior for these operations, Proxies allows developers to create highly dynamic and flexible applications.

‘In Small terms Proxy is a Wrapper over an object for advanced capability over objects’

Syntax

Creating a Proxy is straightforward. Here’s the basic syntax:

const proxy = new Proxy(target, handler);

target: The object that the proxy will wrap.
handler: An object containing traps (functions) that define the custom behavior for various operations.

Traps

Traps are the methods provided in the handler object to intercept operations. Some common traps include:

get: Handles property access.
set: Handlesproperty assignment.
has: Handles the in operator.
deleteProperty: Handles property deletion.
apply: Handles function calls.
construct: Handles the new operator.

Creating a Simple Proxy

Let’s create a simple proxy to log property access and assignments.

const target = {
       name: 'Ishraq',
       age: 15      
};

const handler = {
       get: function(target, property, receiver) {
       console.log(\`Getting property ${property}\`);
          return target\[property];
       },
       set: function(target, property, value, receiver) {
       console.log(\`Setting property ${property} to ${value}\`);
       target\[property] = value;
       return true;
   }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name);  // Logs "Getting property name"
proxy.age = 19;           // Logs "Setting property age to 19"
console.log(proxy.age);   // Logs "Getting property age"

Validation

Proxies can be used to enforce validation rules on objects. This is especially useful when dealing with user input or API responses. It opens a new layer of validation checking!

const user = {
      name: '',
      age: 0
};

const handler = {
       set: function(target, property, value, receiver) {
         if (property === 'age' && (typeof value !== 'number' || value \< 0)) {
           throw new Error('Age must be a non-negative number');
         }
         target\[property] = value;
         return true;
       }
};

const proxy = new Proxy(user, handler);
proxy.age = 25;  // Works fine
proxy.age = -5;  // Throws an error: Age must be a non-negative number

Data Binding

Proxies can be used for data binding in frameworks, allowing automatic updates to the UI when the underlying data changes.


const data = {
       text: 'Hello, world!'
};

const handler = {
       set: function(target, property, value, receiver) {
         target\[property] = value;
         document.getElementById('output').textContent = value;
         return true;
       }
};

const proxy = new Proxy(data, handler);
document.getElementById('input').addEventListener('input', function(event) {
       proxy.text = event.target.value;
});

‘Currently, I am working on a reactive javascript library focused on speed & efficiency. There I’ve used proxies at great extinct for data binding…I really don’t appreciate the phrase data binding it’s good to tell it reactive data binding.’

Tracing

Proxies can help trace property access and modifications, useful for debugging and profiling. It has a great usage in application testing.

const profile = {
       name: 'John Doe',
       email: 'john@example.com'
};

const handler = {
       get: function(target, property, receiver) {
         console.log(\`Property ${property} accessed\`);
         return target\[property];
       },
       set: function(target, property, value, receiver) {
         console.log(\`Property ${property} set to ${value}\`);
         target\[property] = value;
         return true;
       }
};

const proxy = new Proxy(profile, handler);
proxy.name;       // Logs: Property name accessed
proxy.email = 'john.doe@example.com';  // Logs: Property email set to john.doe@example.com

‘In my reactive framework, I’ve implemented some robust test cases and while testing props of dom elements, I’ve used this for tracking any updates in props, which helped me to reflect any changes in props to the dom elements’

Immutable Objects

Proxies are also used to create immutable objects, where properties cannot be changed once they are set. It’s like object properties but constant type, can’t be changed in any meaning.

const target = {
       name: 'Immutable Object'
};
const handler = {
       set: function(target, property, value, receiver) {
         console.log(\`Cannot set property ${property} to ${value}. Object is immutable.\`);
         return false; // indicate failure to set property
       }
};

const proxy = new Proxy(target, handler);
proxy.name = 'New Name'; // Logs: Cannot set property name to New Name. Object is immutable.
console.log(proxy.name); // Logs: Immutable Object

Meta Programming

Meta Programming means to program at the meta-level of JavaScript. JavaScript proxies unlock this meta layer/level of programming to help programmers define custom behaviors. I will publish a very much detailed Post later on about meta programming. But, if you wanna learn about this meta layer of JavaScript check the resources section!

Resources

To further deepen your understanding of JavaScript Proxies and their various applications, here are some valuable resources including meta programming!:

Conclusion

JavaScript Proxies are a powerful feature that allows developers to intercept and redefine fundamental operations on objects. They can be used for a wide range of applications, from validation and data binding to tracing and debugging. My favorite one is data binding. But, other real-world use cases have made it one of the most powerful features ever lived in the JavaScript Ecosystem. By understanding and utilizing Proxies, you can add a new level of dynamism and flexibility to your JavaScript code.

Experiment with Proxies in your projects and discover how they can help to establish greater control over your code. Happy coding!