18 Feb 2018, 17:56

Easier Web Workers

Ever been on a web page and everything feels a bit slow? Delays typing, scrolling, and general interactions with the page? One of the main causes of this is ‘blocking the main thread’. Browsers do their best to keep the rendered contents of a page in sync with the refresh rate of a monitor (generally this is about 60 frames per second). However doing expensive operations in your main thread (i.e. where your everyday JavaScript is executed) has the potential to block it, preventing efficient page rendering and in turn delaying response to user interactivity such as scrolling, inputs, etc.

Thankfully due to the power of Web Workers, we can offload heavy computations to another thread, leaving the main thread for handling rendering and user interactions. Web Worker’s run a JavaScript file as a background thread that that runs as a separate context to the browsers main thread. So how do we construct a worker? Like so:


    const worker = new Worker('worker.js');

Here worker.js is the code that will listen for the message from the workers and perform the specified work.

Workers are pretty flexible, but one core thing you can’t do is access and manipulate the DOM. They also require you to pass data to them and the data is not shared, unless you’re using Transferables. You can natively pass any data that is allowed in the Structured Clone Algorithm to a worker. In practice this means most things minus Functions, Errors and DOM Elements. Here JSON.stringify may bring some performance benefits, although that’s worth testing for your use case first. It is worth mentioning that JSON.stringify also has various types that do not convert including functions, Date objects, regular expressions and undefined.

Since data is not shared, there is a performance overhead copying data to the worker. The exception here is previosuly mentioned Transferables which are ‘zero-copy’ meaning data is transferred to the thread context instead. This can be an order of magnitude faster than copying.

There is a cost to instantiating a Web Worker which will vary from browser and device, but this Mozilla article articulates that you’re looking around the 40ms mark. Communicating over to a Web Worker (postMessage) is fast however, around 0.5ms of latency.

Passing Messages

So what does a the code look like for passing data (a message) to and from a Web Worker look like?


    // In our main JavaScript file

    // Post data
    worker.postMessage("Hello from the main thread!");

    // Receive data
    worker.addEventListener('message', (event) => {
        console.log("Data from worker received: ", event.data);
    }, false);

And then in the Web Worker (say webworker.js) we need a way to receive the message:


    self.addEventListener('message', (event) => {
        console.log("Worker data received from the main thread", event.data);
        // Do what we want with do something with event.data
        self.postMessage(
            `Hello from the Web Worker thread!
             The message received had length: ${event.data.length}`
        );
    }, false);

Here we can see that once the message is received we can manipulate the incoming data as we see fit and send it back with ‘postMessage`.

A simple Web Worker example

To give a more tangible example, I have created an example repository which shows how we can produce large numbers of primes in a Worker whilst maintaining interactivity with the page.

Are there any nice abstraction libraries?

Yes! I have compiled a list of Hello World examples using various popular libraries. Namely:

  • Greenlet - Turn async functions into Web Workers
  • Comlink - Modern abstraction of Web Workers
  • Operative - Simpler callback oriented workers

You can see all of those examples in my GitHub repo here. There are others that might be worth checking out depending on your use case that I haven’t added.

  • promise-worker by Nolan Lawson for simpler promise based workers.
  • Workerize by Jason Miller which is the module level version of greenlet
  • Clooney by Surma; a actor library which builds upon Comlink.

Let’s take a little look at how Greenlet might work. Using ES7 async/await syntax, we get readable code, without sacrificing on functionality. Under the hood greenlet does something pretty cool, it generates an inline Web Worker using URL.createObjectURL and Blob. This allows us to do like so:


    const asyncSieveOfEratosthenes = greenlet(async (limit) => {
        // Code redacted for brevity
    });

    const calculate = document.getElementById("calculatePrimes");
    const message = document.getElementById("showPrimes")

    calculate.addEventListener("click", async () => {
        const n = 100000000;
        message.innerHTML = "Main thread not blocked!";
        // The following async function won't block:
        const totalPrimes = await asyncSieveOfEratosthenes(n);
        calculate.innerText = "Done!"
        message.innerHTML = `${totalPrimes.length} prime numbers calculated!`;
    });

Pretty cool if you ask me!

What about support?

Web Workers are very well supported by all major browsers, so this shouldn’t be an issue:

When to use Web Workers?

Some people may be tempted to try and start moving all there app logic over to a Web Worker. There is no guarantee that this will be any more performant. Web Workers make the most sense when you have heavy processing that would block the main thread and rendering and user interaction. For example, imagine you want to do some intensive number crunching, geometry processing (see for example Turf.js) or deep tree traversal and manipulation. The most useful piece of advice I can give here is profile and benchmark it. If you’re new to profiling, check out this piece on CPU profiling in Chrome.

Fibrelite

I am currently working on a library called Fibrelite which is based off of Jason Millers fantastic greenlet library. The aim is to produce a general purpose library for spinning out async functions as Web Workers, but with a variety of approaches to handling those function calls, for example pooling, prioritising calls or debouncing calls where necessary. This would be beneficial for any situation where both user interactions and intensive calculations are in tandem. I will write a more detailed blog post at a later date, in the mean time, check out a demo here.

18 Feb 2018, 17:56

Implementing the Web Share API in Your App

I was looking into how I might be able to improve the sharing experience on https://scratchthe.world, a digital scratch map PWA that I have been working. One thing I came across recently is the Web Share API, which I thought might be a strong contender for integration. The Web Share API allows for a smoother integration of sharing with popular applications on your mobile device (WhatsApp, Facebook Messenger etc). You can see the documentation on MDN here.

The cool thing about the Web Share API is it has such a minimal interface, making it easy to use an implement without complicating your code. To elaborate, it only has one method, share. The method takes an object with the properties title, text, url:

  • title refers to the title of the thing you’re trying to share, you could for example use document.title here if you’re struggling.
  • text is the text that will be shared with the link in the target application
  • url is the link itself.

Unfortunately support mobile support is not ideal; it’s missing on iOS Safari, Samsung Internet and Opera Mini as it stands.

However depending on who you trust (i.e. StatCounter which powers caniuse.com) Chrome for Android accounts for 50%+ of mobile traffic globally. That’s a lot of people that can benefit!

Another nice aspect of the Share API is it is relatively straight forward to implement a fallback, hence my choice to implement it with Scratch the World. In Scratch the World I provide a input with a link to the state of the map for people to share with there friends. If the Web Share API is available I replace that with a share button.

This isn’t the exact code I use (it is based off the Google Developers page linked above) but to give you a feel for the rough approach:


    const setupShareButton = () => {
        const shareButton = document.getElementById("share-button");

        // Add an onclick listener to the element
        shareButton.addEventListener("click", () => {
            console.log("on click");
            if (navigator.share) {
                // If we have web share enabled use that
                useWebShare();
            } else {
                // Else do something else to help people share
                // your content
                useFallback();
            }
        });
    }
    
    const useFallback = () => {
        console.log("Using fallback!");
        const copyPasteUrl = document.getElementById("copy-paste-url");
        copyPasteUrl.style.visibility = "visible";
        // You could add a bar with share buttons for various 
        // social media sites here as another idea
    }
  
    const useWebShare = () => {
        console.log("Using Web Share!");
        // Web Share is promised based so we do .then and .catch
        // after to handle success or failure
        navigator.share({
            title: 'Using webshare!',
            text: 'This is an example of using web share',
            url: 'https://developers.google.com/web',
        })
            .then(() => console.log('Successful share'))
            .catch((error) => console.log('Error sharing', error));
    }

    setupShareButton();

And that’s it! The more complicated bit here is coming up with a nice fallback approach. You could implement sharing workflows for common mediums like Twitter and Facebook for example. Many providers have sharing URLs that you can use to help share your content. You could combine these with Terence Eden’s SuperTinyIcons to create buttons as a performant solution. On a more experimental note, Phil Nash released a Web Component wrapper for links that will default to the Web Share API when available, which is an interesting idea.

Lastly some of you might be wondering what does the Share API look like in practice? Here’s a video of how it shapes up in Scratch the World on Android Chrome:

24 Dec 2017, 14:53

Getting going with ES6 Maps

As we move into a world where modern browsers are supporting the nearly the entire ES6 specification, we have a variety of data structures to use for storing and accessing our data as native built-in primitives. In ES6 we specifically gain access to ‘keyed collections’. Keyed collections encompasses four built-ins, these are namely Set, Map, WeakSet and WeakMap. Here we’ll be talking about the Map in particular. Let’s get stuck in!

What is a Map?

A Map is a collection of key value pairs, where both key and values can be of any type. This differs from how one might have traditionally used a JavaScript Object as a map, as historically keys have been strings only (this has changed with the introduction of Symbols but that’s for a different blog post to come!).


const obj = { 1 : "one" }
typeof Object.keys(obj)[0] // Evaluates to string

So with Maps, we have the additional power of using anything we like as our key, even a HTMLElement, which is powerful because it makes it easy to associate data with a DOM node. To illustrate the use of none String keys, we can see this example using booleans:


const map = new Map([
    [true, "Things that are true"],
    [false, "Things that are false"]
]);

Here true and false are the respective keys in our collection. So how does JavaScript know how to evaluate something as matching a Map key? Well the approach is very similar to the === (identity) operator, with the minor caveat that NaN (Not a Number) equates to NaN even though NaN !== NaN.

How do we use it?

Maps provide a set of methods for interfacing with them such as get, set and delete. These methods provide a clean inteface for interacting with our data. Let’s see how that works in practice:


const one = "one";
const map = new Map([ ["one", 1] ])
map.get("one"); // Returns 1
map.get(one); // Returns 1

map.set("two", 2);
// Returns the Map with "two" set to 2

map.delete("one");
// Returns true if successful or false if unsuccessful

map.clear();
// Returns undefined

As you can see there’s a little gotcha here, get, set and delete all have different return behaviours. Get will return the associated value, set will return the Map itself, and delete will return a boolean, and clear returns undefined. Something to keep in mind!

We also have some really nice convenience methods to help us interface. For example, has which will tell us if a key exists in a Map:


const map = new Map([ ["one", 1], ["two", 2] ]);
map.has("two") // true

This is very useful for quickly checking the existence of key in a Map. What about if we want to iterate over a Maps contents? Firstly there are a few convenient methods in this regard: values, entries and forEach. Let’s look at values and keys. Both these methods return an iterable. Iterables are a little outside the scope of this post, but think of them as JavaScript variables that have defined behaviours for what happens when you iterate over them (for example using for…of):


// Entries
const map = new Map([ ["one", 1], ["two", 2] ]);

for (const num of map.entries()) {
    console.log(num); 
    // Logs ["one", 1]
    // Then ["two", 2]
}

// Values
for (const key of map.values()) {
    console.log(key);
    // Logs 1
    // Then 2
}

Alongside this we have the forEach method that some of you may be familiar with from the Array method of the same name. It behaves like so:


const map = new Map([ ["one", 1], ["two", 2] ]);
map.forEach((key, value) => console.log(key, value));
// Logs ["one", 1]
// Then ["two", 2]

Lastly we can quickly and conveniently get the size of a map with the size method. It is fairly straight forward and operates like so:

const pets = Map([ ["dog", "woof!"], ["cat", "meow"], ["goldfish", "bop bop bop"] ]);
animals.size(); // Evaluates to 3

Which would have been less elegant using an Object:

var pets = {"dog", "woof!", "cat": "meow", "goldfish": "bop bop bop"};
Object.keys(pets).length;

Why use a Map?

Simply put, the Map is more idiomatic and effective primitive than an Object for use as a mutable key-value pair data structure. We have the added flexibility of using anything we please as our keys, alongside a clear set of a powerful methods that we have shown above. These methods allow us to be more semantic and straightforward about interacting and manipulating our data. It also avoids some of the potential pitfalls of the Object, for example, because of the interface of a Map, we can avoid the possibility of colliding with default Object properties such as toString or hasOwnProperty. This is obviously an edge case but provides us with extra reassurance:


// With a traditional Object
const obj = {};
obj["toString"] = "woops";
console.log(obj.toString);
// Evaluates to woops

// With a Map
const map = Map();
map.get("toString") // undefined
map.set("toString", "This is fine");

Overall it expresses a lot of cool properties that suite it better to behaviours we wanted from using an Object as a Map previously. Happy Mapping!