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 loading (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)
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.