Smoke & Mirrors, virtual-each or ember-collection?

In our applications we have to render long lists which can easily lead to bad performance. I’ve found three different ember addons that help the issue by incrementally rendering the components.

Can anyone recommend one or the other?

I just went through this with our tables. I like ember-collection and it does scale really well but, there was a flicker on scroll that was just unacceptable. I’ve heard good things about smoke-and-mirrors but don’t have any experience with it myself.

What I ended up doing was creating a table with a fixed number of rows then hijacking the scroll to update the data in the table. This was super easy and, with Glimmer, it’s incredibly performant because you have a minimum number of elements in the dom. I’ve scaled it up to a million elements with no problems (other than waiting for the million element array to get created :slight_smile:

Author of virtual-each here, there are people successfully using virtual-each within there apps without issue. If your use-case is more complex, such as the need to render with various grid layouts, I would recommend ember-collections. If you just need to render a large vertical list in a viewport where you can know or can calculate the height then either will work great.

I wrote it originally as a benchmark of a react plugin and the FPS was > 50FPS without flickering. SInce then I’ve continued to iterate on it with a few folks who have built a pagination library using it ember-impagination - npm

1 Like