Vue Adaptive Loading Components & Utilities
Deliver experiences best suited to a user's device and network constraints (experimental)
This is a suite of Vue Components and utilities for adaptive loading based on a user's:
It can be used to add patterns for adaptive resource loading, data-fetching, code-splitting and capability toggling.
Objective
Make it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.
Installation
npm i vue-adaptive-components --save
or yarn add vue-adaptive-components
Usage
You can import the components you wish to use as follows:
;;;;
and then use them in your components. Examples for each component and utility can be found below:
Network
VueAdaptiveNetwork
Vue component for getting network status (effective connection type)
... ...
effectiveConnectionType
values can be slow-2g
, 2g
, 3g
, or 4g
.
This component accepts an optional initial-effective-connection-type
string attribute, which can be used to provide a effectiveConnectionType
state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass an ECT Client Hint to detect the effective network connection type.
<!-- Inside of a Vue component --> ...
Save Data
VueAdaptiveSaveData
Utility for getting Save Data whether it's Lite mode enabled or not
...
saveData
values can be true
or false
.
This component accepts an optional initial-save-data-status
boolean attribute, which can be used to provide a saveData
state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Save-Data Client Hint that has been converted to a boolean to detect the user's data saving preference.
// Inside of a Vue component ...
CPU Cores / Hardware Concurrency
VueAdaptiveHardwareConcurrency
Utility for getting the number of logical CPU processor cores of the user's device
...
Memory
VueAdaptiveMemoryStatus
Utility for getting memory status of the device
...
deviceMemory
values can be the approximate amount of device memory in gigabytes.
This component accepts an optional initial-memory-status
object attribute, which can be used to provide a deviceMemory
state value when the user's browser does not support the relevant DeviceMemory API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Device-Memory Client Hint to detect the memory capacity of the user's device.
// Inside of a Vue component ...
Adaptive Code-loading & Code-splitting
Code-loading
Deliver a light, interactive core experience to users and progressively add high-end-only features on top, if a users hardware can handle it. Below is an example using the Network Status component:
vue-light.vue:
vue-full.vue:
Browser Support
-
Network Information API - effectiveType is available in Chrome 61+, Opera 48+, Edge 76+, Chrome for Android 76+, Firefox for Android 68+
-
Save Data API is available in Chrome 65+, Opera 62+, Chrome for Android 76+, Opera for Android 46+
-
Hardware Concurrency API is available in Chrome 37+, Safari 10.1+, Firefox 48+, Opera 24+, Edge 15+, Chrome for Android 76+, Safari on iOS 10.3+, Firefox for Android 68+, Opera for Android 46+
-
Performance memory API is a non-standard and only available in Chrome 7+, Opera, Chrome for Android 18+, Opera for Android
-
Device Memory API is available in Chrome 63+, Opera 50+, Chrome for Android 76+, Opera for Android 46+
Demos
Network
-
Network-aware loading with create-react-app (Live)
-
Network-aware code-splitting with create-react-app (Live)
-
Network-aware data-fetching with create-react-app (Live)
Save Data
- React Twitter - save-data loading based on Client Hint (Live)
- React Twitter - save-data loading based on Hook (Live)
CPU Cores / Hardware Concurrency
- Hardware concurrency considerate code-splitting with create-react-app (Live)
- Hardware concurrency considerate loading with create-react-app (Live)
Memory
-
Memory considerate loading with create-react-app (Live)
-
Memory considerate loading (SketchFab version) with create-react-app (Live)
-
Memory-considerate animation-toggling with create-next-app (Live)
Hybrid
References
- Adaptive serving based on network quality
- Adaptive Serving using JavaScript and the Network Information API
- Serving Adaptive Components Using the Network Information API
License
Licensed under the Apache-2.0 license.
Team
This project is brought to you by Addy Osmani and Anton Karlovskiy.
Ported to Vue by jefrydco.