Aurelia - improve performance repeat.for view

Question

I have a so-called chat viewer, which basically consists of repeat.for , which repeat.for over all the messages and displays the message views using <compose> .

The problem is that it becomes quite slow when the number of messages exceeds 50, and the user moves between chats (which starts the repeat.for update when replacing a dataset in a virtual machine).

I feel like I'm doing something wrong with regard to handling this kind. Can I get information about other alternatives?

I tried UI virtualization, but, unfortunately, the current plugin does not offer support for the functions I need (elements of variable height, alignment from bottom to top).

I also made quite a few optimizations regarding bindings, most of them are one-time, and dataset updates will debut. But this did not improve the situation, since the main bottleneck is the initial load (linking views for the first time).

Thanks!

An example of the 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 not use <compose> for this at all. Is there a reason you need to <compose> ? When you think about it, the <compose element should rerun the same instance / binding logic that Aurelia does for everything else, every time a message is displayed.

I personally would create an HTML partial with some binding properties inside the loop, referencing it. That way you can have chat-message.html and then display it like this:

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

Whenever possible and in most cases this should be, avoid dynamic composition for potentially large sets of repeating elements.

Answer 2

You should check out the aurelia-ui-virtualization library. After downloading it, you can replace repeat.for with virtual-repeat.for in such places, and you will get a virtualized relay that will help improve the work with this type of situation.