• Live in the browser: Web Workers API (JS).
  • Separate from main thread (worker thread).
  • Threads communicate by posting/receiving messages.
  • Compute in the background.

  • Keep the user interface reactive.

What are Web Workers?

/* index.js */

// instantiate worker
const worker = new Worker('webWorker.js');

// send a message to the worker
const message = { sayHi: 'Hello worker!' };
worker.postMessage(message);
 
// listen to messages from the worker
worker.onmessage = event => console.log(event.data.acknowledgment);
/* webWorker.js */

// listen to messages from main thread
onmessage = event => {
    console.log(event.data.someData);
    // send a message to main thread
    const response = { acknowledgment: true };
    postMessage(response);
};
  • Resize/process images.
  • Generate large CSV files.
  • Convert files to another format.
  • Zip or unzip files.
  • HTML to PDF.

Some use cases

Pitfalls

  • No access to the DOM (worker scope).
  • Consume more resources (mobile devices).
  • Slower performances. Doing the same operation in workers will take longer than in the main thread.

Bundle up!

Webpack plugin: Use worker-loader to optimize your workers.

  • Get all the goodness from Webpack (minimizing, uglifying, code splitting, etc.)
  • Worker not be served as a separate public file. No need to figure out its location when you instantiate your worker.

 

Web Worker Workshop:
Get your hands dirty!

workers.yvesgurcan.com/workshop

Web Workers in a nutshell

By Yves Gurcan

Made with Slides.com

Web Workers in a nutshell

Link to the Meetup event: https://www.meetup.com/front-end-small-talk/events/266240588/. You've probably heard of Service Workers. But what on earth are Web Workers? Yves will introduce us to the less famous of the two workers.

  • 1,014

More from Yves Gurcan