Worklets

Worklets are extension points for rendering engines. Conceptually, they're similar to Web Workers, but with a few key exceptions:

• Designed to be parallelized; each Worklet must always have 2 or more instances, any of which can be the one to actually run when called
• Small scope; limited to no access to globally scoped items (except the function name of the Worklet). This includes some "basics" like setTimeout
• The render engine that they extend calls them when needed, not us!

Worklets are JavaScript modules, added by invoking the worklet's addModule function, which is a Promise.

// From https://drafts.css-houdini.org/worklets/ May 8, 2018 Editor's Draft

// From inside the browser's context
await demoWorklet.addModule('path/to/script.js');

// Multiple worklets can be loaded at once, as well
Promise.all([
  demoWorklet1.addModule('script1.js'),
  demoWorklet2.addModule('script2.js'),
]).then(results => {
  // Both worklets have loaded, and we can do tasks that rely on them
});

The shape of a worklet file are all the same as well; a global scope registration function that takes the name of the item to be registered and the shape of the class for that particular worklet

// From https://drafts.css-houdini.org/worklets/ May 8, 2018 Editor's Draft

// The kind of worklet it is
registerDemoWorklet('name', class { // The name we'll call this worklet

  // Each worklet can define different functions to be used
  // These will be called by the render engine as needed
  process(arg) {
    // Stuff happens in here! What happens depends on the worklet
    // Sometimes it'll return something
    // Other times it'll work directly on the arguments
    return !arg;
  }
});

Worklet Lifecycle