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)

Full applications

• React Movie - network-aware loading (demo)
• React Shrine - network-aware code-splitting (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.