Web workers in Angular 2.0

- Developer and Blogger
Published: Mon Nov 23 2015

One really cool thing about Angular 2.0 is that the framework is decoupled from the DOM via a higher level API. In the following post I will show how to take advantage of this by running my application using multiple web workers.

Note: The content in this article is outdated, so please check back at a later time.

In the following example I will be creating a world clock where each clock instance runs as a separate web worker in the browser.

The full source code is available on Github, but I will show some of the highlights here as well.

I have modeled the functionality around a clock class that gets inherited to represent different timezones around the world – or at least three different cities :-)

export class Clock { time:string; offset:number; constructor(offset){ this.offset = offset; } onInit(){ this.time = moment.utc().add(this.offset,'h'); setInterval(() => { this.time = moment.utc().add(this.offset,'h'); },1000); } } import{Clock} from '../clock.ts'; import {Component} from 'angular2/web_worker/worker'; import {platform} from "angular2/core"; import {WORKER_APP_PLATFORM, WORKER_APP_APPLICATION} from "angular2/platform/worker_app"; @Component({ selector: 'new-york', templateUrl: './clock.html' }) export class NewYork extends Clock{ city = 'New York'; constructor(){ super(-5); } } platform([WORKER_APP_PLATFORM]).application([WORKER_APP_APPLICATION]).bootstrap(NewYork)

Pay attention to the platform call at the end since that is what allows me to bootstrap and run the application in a web worker.

I have similar classes for London and Los Angeles as well, but the concept remains the same across all super classes.

Then in the main html page I am able to bootstrap the application multiple times, but with each instance as a separate web worker. Once the web workers are wired up I can just define markup for the components like I would for any other Angular 2.0 components.

<new-york> loading... </new-york> <london> loading... </london> <la> loading... </la>

To see that the application is indeed running as separate workers, just open up chrome dev-tools and see that there are three threads listed under the 'sources' tab.

You can also test this out by going to my live demo page