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 :-)
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.
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