How to do compute-intensive tasks in AngularJS application?

Question

I am writing an application using JavaScript, HTML5 and AngularJS. It only has to work on pretty recent browsers (for instance, IE10 but not IE9).

At several places in the application, there will be compute-intensive tasks, such as XML parsing, base64 decoding; these could involve fairly big data (a few MB is certainly a possibility).

If I just call things like atob() or DOMParser.parseFromString(), I will get an unresponsive browser for seconds or even minutes. This is clearly not acceptable to a user.

I've used Angular's Q Service to make things like accessing an external Web service asynchronous, and hence avoid hanging up the browser while awaiting a response. But such operations already have an asynchronous API.

What about these compute-intentive tasks, which don't have an asynchronous API of their own?

I can split some of these tasks a bit, chaining promises. Does this help at all? Does the browser message queue get a spin at the end of each task?

I see the existence of "Web Workers", which seem to offer proper multi-threading. But they seem to have rather poor abilities to transfer objects to/from the worker threads. Certainly, it seems that way for someone like me coming from C#.Net! For instance, I'd like to inject Angular services (built-in and my own) into the tasks on the threads. And I don't want to copy massive data between threads either.

Are other people achieving responsive client-side Web apps that include serious computation? If so, what are they using to achieve this?

Answer 1

It sounds like you are looking for the Parallel.js library.

Here is a quick description of the library from their website:

"Parallel.js is a tiny library for multi-core processing in Javascript. It was created to take full advantage of the ever-maturing web-workers API."

I'm not currently aware of any examples specific to usage of Parallel.js in Angular, but I'm sure it wouldn't be too hard to integrate the library as an Angular service.