Adaptive Loading

An exploration into loading and rendering the most suitable version of a component based on signals exposed to the web (network, CPU, memory etc).

Source & Components

This repo contains several different pieces for the Adaptive Loading project: React Hooks, patterns for adaptive loading with different Web Platform signals and full applications.

Adaptive Loading patterns

Network-aware loading with create-react-app (demo)
Network-aware only-if-cached loading with create-react-app (demo)
Network-aware code-splitting with create-react-app (demo)
Network-aware data-fetching with create-react-app (demo)
Battery considerate loading with create-react-app (demo)
Memory considerate loading with create-react-app (demo)
Memory considerate loading (SketchFab version) with create-react-app (demo)
Device-class aware loading (demo, Moto G4, Galaxy S7)
UA-aware code-splitting with create-react-app (demo)
DPR(Client Hint)-aware loading with node-app (demo)
Memory(Client Hint) considerate loading with node-app (demo)
Network(Client Hint)-aware loading with node-app (demo)
Network & Memory(Client Hints) considerate loading with node-app (demo)
Memory-considerate animation-toggling with create-next-app (demo)

Data Saver-style patterns

React Twitter - save-data loading (demo)

Full applications

Deployment

Create Firebase Project by logging in to console.firebase.google.com and replace the default value in /.firebaserc and /functions/.firebaserc with the created Project ID. Or simply copy the default value from /.firebaserc or /functions/.firebaserc and paste as the Project ID when creating the Firebase Project.

Function deployment

firebase init functions

Skip Overwrite options by entering No

firebase deploy

Host deployment

npm run build
npm run deploy

Team

This project is brought to you by Addy Osmani and Anton Karlovskiy.

wingleung/adaptive-loading

Adaptive Loading

Source & Components