Miss any of our Open RFC calls?Watch the recordings here! »

vue-adaptive-components

0.0.5 • Public • Published

Vue Adaptive Loading Components & Utilities

CircleCI codecov

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:

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

Demos

Network

Save Data

CPU Cores / Hardware Concurrency

Memory

Hybrid

References

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.

Install

npm i vue-adaptive-components

DownloadsWeekly Downloads

14

Version

0.0.5

License

Apache-2.0

Unpacked Size

75.6 kB

Total Files

28

Last publish

Collaborators

  • avatar