An exploration into loading and rendering the most suitable version of a component based on signals exposed to the web (network, CPU, memory etc).
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.
- 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)
- React Twitter - save-data loading based on Client Hint (demo, WPT)
- React Twitter - save-data loading based on Hook (demo)
- 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 a mix of network, memory and hardware concurrency (demo)
- Next Show - adaptive loading with a mix of network, memory and Client Hints (demo, WPT)
npm run build
npm run deploy
This project is brought to you by Addy Osmani and Anton Karlovskiy.