BT

WorkerDOM Adds DOM Concurrency for JavaScript Programming

| by Dylan Schiemann Follow 10 Followers on Oct 31, 2018. Estimated reading time: 2 minutes |

The big news at this year's JSConf was the introduction of WorkerDOM, a JavaScript library to make the DOM available to Web Workers, allowing developers to leverage multi-core processor architectures to improve web performance.

Web Workers, a simple means for web content to run scripts in background threads, have been available for many years, but the missing DOM access has limited their adoption. The WorkerDOM project hopes this project will help renew interest in multi-threaded programming on the web and create better experiences for users.

The need for leveraging alternative processes to accelerate the user experience is an increasingly popular topic. At this year's FullStack, software engineer James Milner presented on techniques for improving user experience with Web Workers by passing processing work to a Web Worker to improve the performance of the main application thread.

Another goal of WorkerDOM is to make web performance competitive with native platforms by unlocking performance gains wherever possible in order to provide better experiences, especially on mobile devices where single processor speeds have not improved as rapidly in comparison to the additional number of processor cores becoming available.

To achieve a full representation of the DOM inside of Web Workers, WorkerDOM provides an efficient transport mechanism authored in TypeScript. Malte Ubl, tech lead for the AMP Project at Google, explains via the WorkerDOM announcement that the:

WorkerDOM hydrates server rendered DOM and then proxies mutations as an application makes changes to the page, such as reacting to user actions or running animations.

WorkerDOM gets installed via npm or yarn:

npm install @ampproject/worker-dom

yarn add @ampproject/worker-dom

Or it may be included as an ES module for browsers that provide native module support (everything modern except IE11 and Samsung Internet):

<script src="path/to/workerdom/dist/index.mjs" type="module"></script>
<script src="path/to/workerdom/dist/index.js" nomodule defer></script>

Detailed usage instructions are also available in the WorkerDOM README.

The full slides from the JSConf presentation WorkerDOM: JavaScript Concurrency and the DOM are also available:

 

WorkerDOM is currently in an alpha state, ready for experimentation and contributions. WorkerDOM also aims to provide compatibility with JavaScript frameworks, with initial support available for React, Preact, and Svelte.The project appreciates collaboration opportunities with framework and tool authors to provide an optimal experience for developers and users.

WorkerDOM is available under the Apache 2 open source license. Contributions are welcome via the WorkerDOM GitHub project and should follow WorkerDOM project's contribution guidelines and code of conduct.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss
BT