The DoneJS core team has been experimenting with HTTP/2 for the past several months and the outcome is strong HTTP/2 support in DoneJS! HTTP/2 contains some exciting new features that we've previously gone over in the article Utilizing HTTP2 PUSH in a Single Page Application.

This article will review what has been added to DoneJS and instruct you on how to use the new features in your app.

The new HTTP/2 features we will be covering are...

• steal-bundle-manifest: A tool to help PUSH assets to the browser.
• Incremental rendering in done-ssr: a way to quickly boot up your application.
• done-serve: now ships with an HTTP/2 server when providing a SSL key/certificate (these are required for HTTP/2).

Bitovi would love to help your team upgrade your app to HTTP/2 support.

Bundle manifests

A bundle manifest is a JSON format file that breaks down which assets are needed to load a particular bundle. It looks like this:

{
 "app/cart/cart": {
   "dist/bundles/app/cart/cart.css": {
     "type": "style",
     "weight": 1
   }
 }
}

This manifest gives us all the information we need to make pages load faster. We can use this file to:

• Include the <script> and <link> tags for each page in our application, which the browser will start downloading in parallel.
• Use HTTP/2 PUSH (in capable servers/browsers) to start pushing these assets before the browser even requests them.
• Use Link preload headers in HTTP/1 servers to inform the browser that they should start preloading the assets before they have received the page to see the script/link tags.

steal-bundle-manifest is the tool we built to provide these capabilities.

The following 2 examples show loading a page with and without steal-bundle-manifest on a 3G connection:

Without steal-bundle-manifest:

With steal-bundle-manifest:

That’s a 32% increase in speed!

HTTP/2 in done-serve

One long requested feature of done-serve is support for HTTPS. Although done-serve is primarily intended for development use, some teams still need HTTPS there. Since HTTP/2 requires SSL, it was a good time to add both to done-serve.

You can enable this in done-serve by passing the --key and --cert flags. This will start an HTTP/2 (with SSL) server and also an HTTP/1 server with automatic forwarding.

Incremental Rendering

Incremental rendering is a new strategy that we have added to done-ssr 1.1.0. Incremental rendering is a way to stream your application to the client as quickly as possible by rendering on the server using a virtual DOM, and streaming changes to the client.

Using HTTP/2 PUSH (with steal-bundle-manifest) we are able to push out the JavaScript and CSS the page needs; with incremental rendering we can close one more loop by pushing out the actual DOM mutations that will be needed to completely render the page.

The result is that the user sees more, sooner.

• They will see the initial skeleton of the page (everything that didn't need to make API requests to render) almost immediately.
• The server pushes JavaScript and CSS.
• In the meantime the rest of the page is rendering on the server and these mutations are streamed back to the browser.
• Each mutation is applied within the browser so that the browser state mirrors the server's state.
• Within the browser your application starts to boot in the background concurrently as mutation patches are applied.
• If the client-side application is able to catch up to the mutations, it takes over the rendering from there forth.

Using incremental rendering requires a HTTP/2 server and browser. done-ssr will intelligently fall back to the traditional, safe approach to SSR if it detects the browser is incapable. For supported browsers the different is fairly dramatic. Below is a side-by-side comparison between a page that is incrementally rendered and one that is server rendered in a traditional way, slowed down 4x so that you can really see the difference.

To use it, set the strategy in your ssr options:

ssr({}, {
 strategy: "incremental"
});

Or if using done-serve, use the flag:

done-serve --port 8080 --strategy incremental --key path/to/server.key --cert path/to/server.cert

What's next

With the work we've put in the last several months, we feel that DoneJS is on the leading edge of HTTP/2 support. For existing StealJS and CanJS users this is extremely useful today. We want to next take some of the magic that exists within done-ssr and make it more accessible for non-DoneJS users.

 We're extremely excited about the capabilities of HTTP/2 and are eager to continue to explore ways it can help DoneJS users. Visit our Streamable Web Apps page to learn more about HTTP/2 and other streaming technologies.