All About The Aurelia UI Virtualization Plugin

A little less publicised aspect of Aurelia is the UI Virtualisation plugin. For those accustomed to ReactJS’s speed of rendering large amounts of items in the DOM and offering high paint performance, this will be a welcome plugin to use.

Although, do not be mistaken. The Aurelia UI Virtualization plugin is not meant to replace React, nor give you the same power that it offers. This is not a plugin for a virtual DOM, at least not at the time of writing this. For that, you will need to integrate and use React or an alternative.

This is why it is worth noting is that currently this plugin is only for iterating large sets of data in place of Aurelia’s standard repeat.for template control and also requires you to place some constraints on your code.

This plugin is more suited for content with items of a predefined height in a long list, akin to how Apple and Android allow you to create lists in iOS and Android SDK’s. You might use this for a theoretical address book or displaying long lists of users or products in a directory.

Installing and loading it

Simply open your command window in your project directory and type jspm install aurelia-ui-virtualization to kick off the festivities.

Then add it to your application to wherever your bootstrap logic is contained (mine is in a main.js file):

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-ui-virtualization');

  aurelia.start().then(a => a.setRoot());
}

Using it

There are two ways you can use the virtual repeater functionality: a) in the form of a custom element the plugin ships with and b) a custom attribute similar to repeat.for — for the sake of this article, we will be using the attribute so we don’t have to add anything extra to the markup.

Worth pointing out is the custom element actually uses the attribute behind the scenes, so might as well use the attribute to save yourself the abstraction and barrier to learning how to use this awesome plugin for long lists of data.

Before you proceed:
Remember your items need to be wrapped in a container with a fixed height so it can be scrolled. Your repeated items inside also need to have a fixed height as well. There is some styling in the below example with these constraints taken into consideration.

<template>
<style>
.virtual-repeater-wrapper {
     height: 70vh;
     overflow: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
}

.virtual-repeated-item {
    background: #FF0000;
    height: 100px;
}
</style>
<div class="virtual-repeater-wrapper">
    <div virtual-repeat.for="item of items" class="virtual-repeated-item">
         ${item}   
    </div>
</div>
</template>