(feat) Client Hints prototype for adaptive code serving

[addyosmani]

This is a follow-up to #38, which explores using Client Hints for adaptive code loading. Rather than just using CH for deciding whether low or high quality resources should be sent down to the client, we will use them to decide what JavaScript bundles should be served.

The idea we want to enable is the following:

• A user arrives on the site and is served an experience
• If they are on 2G/3G (ECT), a lightweight experience is served
• If they have low-memory, a lightweight experience is served
• All other users are given the "full" experience

What will differ between this example and others is that we really want to stress the difference possible between a lightweight version vs. heavy. A heavy version could include more than one component pulling in a number of different JavaScript dependencies.

Let's brainstorm what the best demo for this should be.

[addyosmani]

Some ideas (that could form part of an app):

• Sortable Animated List in React: https://codesandbox.io/s/r5qmj8m6lq?from-embed server-render a version that doesn't use animations for users on low-memory devices and one with animations if not (requires two different bundles to be generated and on the server we decide which to send down)
• Animated List: https://github.com/aholachek/react-animation-comparison (two versions, one with animations and one without)
• Slightly animated cards. Server-render the cards and if your device has a lot of memory then load in JS to progressively enhance them with the animated experience https://codepen.io/candroo/pen/wKEwRL
• YouTube React: https://github.com/productioncoder/youtube-react - explore how much less we can serve to users on a slow device/connection
• App where users on slow networks/with low memory get a version of the bundle that uses Preact instead of React (to trim things down a little). e.g we could potentially do this with something like a Grocery app https://sivadass.github.io/react-shopping-cart/ (https://github.com/sivadass/react-shopping-cart)

[anton-karlovskiy]

@addyosmani https://server-adaptive-loading-js.firebaseapp.com/

Glitch Source

• Link to Glitch App
• Link to Project on Glitch

  GitHub

• https://github.com/anton-karlovskiy/node-server-adaptive-loading-js-bundle

Could you please check this demo? It's an attempt to demonstrate https://github.com/GoogleChromeLabs/adaptive-loading/issues/39 JS bundle adaptive loading based on Client Hints. Here react-magnifier package is a JS chunk and it's loaded when ECT is 4g and memory is greater than 4GB. So we can switch the light and heavy experience just by throttling the network quality in Chrome DEV tools. Firebase app is build version and Glitch app is dev version. Thanks to create-react-app webpack configuration, I think we can split the package as a chunk and conditionally load the JS chunk based on Client Hints.

[anton-karlovskiy]

@addyosmani a developer might wonder why the heavy chunk is so small It's because the heavy component is distributed into heavy component chunk and react-magnifier chunk. So we can think of both heavy component and react-magnifier as a real heavy chunk. That's why heavy chunk is smaller than light chunk.