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)
- Memory considerate animation-toggling with create-next-app (demo)
- Device-class aware code-splitting (demo, Moto G4, Galaxy S7)
- Hardware concurrency considerate code-splitting with create-react-app (demo)
- Hardware concurrency considerate loading with create-react-app (demo)
- 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)
Data Saver-style patterns
- React Twitter - save-data loading based on Client Hint (demo, WPT)
- React Twitter - save-data loading based on Hook (demo)
Full applications
- React Movie - network-aware loading (demo)
- React Shrine - network-aware code-splitting (demo)
- React eBay - network-aware code-splitting (demo)
- React Dixie Mesh - memory considerate loading (demo)
- React Lottie - network-aware loading (demo)
- React Youtube - adaptive loading with mix of network, memory and hardware concurrency (demo)
- Next Show - adaptive loading with mix of network, memory and Client Hints (demo, WPT)
Deployment
npm run build
npm run deploy
Team
This project is brought to you by Addy Osmani and Anton Karlovskiy.