Web Workers with jQuery


These are my notes from the talk "Web Workers with jQuery" talk given at the 2010 jQuery conference in Mountain View, California. The speaker was Rick Waldron.

When I talk about workers, most people don't see much use for them. Nick Zakas gave a great overview earlier today.

What are workers?

The API is based on the Gears WorkerPool API (since deprecated.) They allow you to run non-blocking scripts parallel to the main page. You can keep your main thread (the browser window) free of blockage from heavy-duty processing, whether it be data, processing, or so forth.

It creates a thread-like environment where your processes can live in parallel. It allows long running processes, such as polling or large array sorting or tons of JSON data to be filtered off to the side and sent back to be dealt with in the UI.

The worker API actually creates OS-level threads, which are even capable of scaling across multiple cores. They're not intended to be used in large numbers, however. They can only pass data back and forth using the postMessage() API and onMessage Evnet. They can't access the DOM or any non-thread-safe content.

Bad Practices

document and window are non-thread-safe calls, so you can't make them within workers without barfing up errors.

Best Practices

Take advantage of addEventListener/removeEventListener. Multiple handlers allow us to use modular logic delegation.

postMessage(JSON.stringify( [message] ) )
onmessage = function(e) { var message = JSON.parse(e.data) }

We need a thread-safe reusable library with concise syntax, a shallow learning curve, and built around open source community support.

We wanted to build this library with as much jQuery syntax as possible.

jQuery Hive

Hive lives on the $ in the jQuery namespace and utilizes a few jQuery bits and pieces to make it simple and easy to use. We've wrapped Worker constructor functions in this syntax.

Pollen JS

Pollen provides a lightweight library for:

  • Worker-to-worker direct messaging
  • Object, array, and String manipulation
  • Query JSON with JSONPath
  • Variable evaluation and logic control flow utilities
  • A syntax that jQuery developers will understand

All the workers created by the Hive are given an ID, which you can use to send messages from one worker to another. You can also address each worker by its ID to retrieve data from it.

With workers, there's a high cost for creation. Remember, you're creating an entire other execution environment at the OS level. It's not about how many threads can I create, it's about how well you can offload your application processing away from the UI so that I can keep my application responsive.

As an example, we could see a worker thread that fetches a bunch of tweets and filters through them using JSONPath to retrieve the tweets that match a certain criteria.

Where can I use this?

Well, nowhere, because IE 9 is the only IE browser that even SAYS they're EVENTUALLY going to implement this!

But think of the future. Every time a timer hack has been used, any time a process causes response hiccups, anywhere long polling for server data still exists. Among some other uses:

  • Pre loading/caching data
  • Web IDE code syntax checking
  • spelling/grammar checking
  • live coding syntax highlighting
  • filtering large data sets from AJAX payloads
  • analyzing image or video meta and/or pixel data
  • writing and synthesizing audio data in the upcoming Enhanced Audio Data API

Where Can I Get This?

We're releasing the Hive this week on github. Follow us at @rwaldron or @bocoup for information about where you can get the release.

Thanks to Rick for this talk

1 Comment

Did you enjoy this post? Please spread the word.