Unlock the Power of Background Processing
When building web applications, one of the biggest challenges is ensuring a seamless user experience while handling complex computations. This is where web workers come into play, allowing us to execute scripts in background threads and keep our main thread free for UI work.
The Problem with Default Web Workers
By default, web workers accept file URLs as arguments, which isn’t ideal when working with TypeScript. Additionally, scripts need fixed URLs, which can be a challenge when using Webpack for bundling and concatenating files.
Introducing the Worker Class
The Worker class is the base for ServiceWorker and SharedWorker. While ServiceWorker is a different beast altogether, SharedWorker is similar to Worker, except it can be accessed from multiple contexts, including popup windows and iframes.
Code Execution in a Different Context
Code executed by a worker runs in a different context than the code that runs on the main thread. This means we can’t manipulate DOM elements, use window objects, or access other main thread resources. Instead, workers run in a DedicatedWorkerGlobalScope, which is limited in terms of what we can access and do.
Common Use Cases for Workers
Workers are perfect for executing pure functions that require heavy processing. By moving these functions to a worker thread, we can prevent performance degradation in our web application.
Communication between Threads
Workers can communicate with the main thread through messages using the postMessage method. This communication is bidirectional, allowing both threads to send and receive messages.
Creating an InlineWorker Class
Let’s create an InlineWorker class that accepts a function as an argument and runs it in another thread. This class converts the function to a string and creates an ObjectURL, which is then passed to a worker class through its constructor.
Using the InlineWorker Class
Imagine we have a function in Angular that we want to process in the background. We can use the InlineWorker class to calculate the number of prime numbers in a given range. The main thread sends limit parameters to the worker thread, which completes its job and yields results to the main thread before terminating.
Important Considerations
When using the InlineWorker class, we can’t access any methods, variables, or functions defined outside the callback function. We must pass arguments using the postMessage method, and the context of the passed function is isolated.
Demo Time!
Check out our demo with worker implementation: https://angular-with-worker-logrocket.surge.sh/ (without blocking UI)
And compare it to our demo without the worker: https://angular-without-worker-logrocket.surge.sh/ (UI is blocked while computation is running)
Take Your Angular Apps to the Next Level
By shifting heavy processing from the main thread to a background thread, we can provide a great user experience in our application. Web workers are part of the Web APIs, available in the browser only, and are well supported in all major browsers.
Debugging Angular Applications with LogRocket
Debugging Angular applications can be challenging, especially when users experience issues that are difficult to reproduce. LogRocket provides a solution by recording everything that happens on your site, including network requests, JavaScript errors, and more. Try LogRocket today and modernize how you debug your Angular apps!