Write performant web apps that run inside web worker threads, without sacrificing easy access to main thread APIs such as the DOM.
$ npm install duet
A duet app runs concurrently in two threads, a main thread and a worker thread (playing a duet, if you pardon the pun).
Nearly all of your own code will be running inside a web worker, and the parts of your app that need to use APIs only accessible in the main thread (such as the
window object or the DOM) are able to do so by using duet's communication channels.
Channels are provided by separate modules, which define the types of messages that they will pass between threads, and provide functions you can call to listen to messages, or send them.
You initialise a duet app by letting it know about the channels you will be communicating on, and providing a callback function that will run inside your worker once all of the channels have been connected.
Here's a quick example app that uses the channel & API provided by duet-virtual-dom to render a button that updates its text whenever it's clicked:
var duet = ;var channel = ;var vdom = ;var h = ;;
In browsers that don't support web workers, the worker thread and API is mocked, and the entire app will work inside the main thread, without your intervention.
- duet example app - A basic counter app, using a virtual DOM, localStorage persistence and CSS Modules.
- duet TodoMVC example app - The MVC framework benchmark app, partially built with duet.
Modules that provide channels
- duet-virtual-dom - Use a virtual DOM with duet by passing patches from the worker thread to the main thread, and expected DOM events back in (uses virtual-dom).
- duet-local-storage - Use the browser's localStorage API with duet by reading and writing asynchronously across threads.
- duet-localforage - Use localForage with duet by reading and writing to IndexedDB across threads when your worker doesn't have direct access (e.g. in Safari).
- duet-location - Subscribe to in-app navigation & history state changes from duet's worker thread.
- duet-csjs - Use CSJS with duet by passing CSS Modules-enabled stylesheets from the worker thread to the main thread which are injected into the document's head.
If you want to build your own channel, duet-channel is what you're looking for.