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.
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
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
