vue-adaptive-components

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:

• Network via effective connection type
• Data Saver preferences
• Device memory
• Logical CPU cores

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:

import VueAdaptiveNetwork from 'vue-adaptive-components/network';
import VueAdaptiveSaveData from 'vue-adaptive-components/save-data';
import VueAdaptiveMemory from 'vue-adaptive-components/hardware-concurrency';
import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/memory';

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)

<template>
  <vue-adaptive-network>
    <template v-slot="{ effectiveConnectionType }">
      <img v-if="effectiveConnectionType === 'slow-2g'" src='...' alt='low resolution' />
      <img v-else-if="effectiveConnectionType === '2g'" src='...' alt='medium resolution' />
      <img v-else-if="effectiveConnectionType === '3g'" src='...' alt='high resolution' />
      <video v-else-if="effectiveConnectionType === '4g'" muted="" controls="">...</video>
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-network>
</template>
 
<script>
import VueAdaptiveNetwork from 'vue-adaptive-components/network'
 
export default {
  components: {
    VueAdaptiveNetwork
  }
}
</script> 

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 -->
<template>
  <vue-adaptive-network :initial-effective-connection-type="4g">
    ...
  </vue-adaptive-network>
</template>

Save Data

VueAdaptiveSaveData Utility for getting Save Data whether it's Lite mode enabled or not

<template>
  <vue-adaptive-save-data>
    <template v-slot="{ saveData }">
      <img v-if="saveData" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-save-data>
</template>
 
<script>
import VueAdaptiveSaveData from 'vue-adaptive-components/save-data'
 
export default {
  components: {
    VueAdaptiveSaveData
  }
}
</script> 

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
<template>
  <vue-adaptive-save-data :initial-save-data-status="false">
    ...
  </vue-adaptive-save-data>
</template>

CPU Cores / Hardware Concurrency

VueAdaptiveHardwareConcurrency Utility for getting the number of logical CPU processor cores of the user's device

<template>
  <vue-adaptive-hardware-concurrency>
    <template v-slot="{ numberOfLogicalProcessors }">
      <img v-if="numberOfLogicalProcessors <= 4" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-hardware-concurrency>
</template>
 
<script>
import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/hardware-concurrency'
 
export default {
  components: {
    VueAdaptiveHardwareConcurrency
  }
}
</script> 

Memory

VueAdaptiveMemoryStatus Utility for getting memory status of the device

<template>
  <vue-adaptive-memory-status>
    <template v-slot="{ deviceMemory }">
      <img v-if="deviceMemory < 4" src='...' />
      <video v-else="" muted="" controls="">...</video>
    </template>
  </vue-adaptive-memory-status>
</template>
 
<script>
import VueAdaptiveMemoryStatus from 'vue-adaptive-components/memory'
 
export default {
  components: {
    VueAdaptiveMemoryStatus
  }
}
</script> 

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
<template>
  <vue-adaptive-memory :initial-memory-status="{ deviceMemory: 4 }">
    ...
  </vue-adaptive-memory>
</template>

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:

<template>
  <vue-adaptive-network>
    <template v-slot="{ effectiveConnectionType }">
      <vue-full v-if="effectiveConnectionType === '4g'"/>
      <vue-light v-else="" />
    </template>
  </vue-adaptive-network>
</template>
 
<script>
import VueAdaptiveNetwork from 'vue-adaptive-components/network'
 
export default {
  components: {
    VueAdaptiveNetwork,
    VueFull: () => import(/* webpackChunkName: "full" */'./vue-full'),
    VueLight: () => import(/* webpackChunkName: "light" */'./vue-light)
  }
}
</script>

vue-light.vue:

<template functional>
  <img :src="props.imageUrl" alt='product' />
</template>

vue-full.vue:

<template>
  <vue-magnifier :src="imageUrl" :src-large="imageLargeUrl" alt='product' />
</template>
 
<script>
import VueMagnifier from 'vue-magnifier'
 
export default {
  components: {
    VueMagnifier
  }
}
</script> 

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)

• React Movie - network-aware loading (Live)

• React Shrine - network-aware code-splitting (Live)

• React eBay - network-aware code-splitting (Live)

• React Lottie - network-aware loading (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)

• React Dixie Mesh - memory considerate loading (Live)

Hybrid

• React Youtube - adaptive loading with mix of network, memory and hardware concurrency (Live)

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.