Aurelia - boosting performance of repeat.for view rendering

Question

I have a so called chat view that basically consists of a repeat.for that loops over all the messages and renders the message views using <compose>.

The problem is that it becomes quite slow once the message count exceeds 50 and the user navigates between chats (which triggers the repeat.for update, as I replace the dataset in the VM).

I feel like I am doing something wrong in regards of handling a view like this. Can I get some input regarding other alternatives?

I have tried UI virtualization, but unfortunately the current plugin does not offer support for features that I require (variable height items, bottom-up alignment).

I have also done quite a bit of optimizations regarding bindings, most are one-time and updates to the dataset are debounced. But this did not improve things, as the main bottleneck is the initial load (binding the views the first time).

Thanks!

Example of current approach:

<li repeat.for="message of chat.messages">
  <compose  view-model.bind="getMessageViewFromMessage(message) & oneTime"
            model.bind="message & oneTime"
            containerless>
  </compose>
</li>

Answer 1

I think you need to consider not using <compose> at all for this. Is there a reason you need <compose>? When you think about it, the <compose element has to re-run through the same view instantiation/binding logic Aurelia does for everything else, every time a message is displayed.

I would personally create a HTML partial with some bindable properties and inside of the loop, reference it. So you might have chat-message.html and then display it like this:

<li repeat.for="message of messages">
    <chat-message message.bind="message"></chat-message>
</li>

Where possible and in most cases it should be, avoid dynamic composition for potentially large sets of repeated items.

Answer 2

You should check out the aurelia-ui-virtualization library. Once you load it, you can replace repeat.for with virtual-repeat.for in places like this and you'll get a virtualized repeater that will help improve perf with this type of situation.