vertical-collection
An Ember addon for performant infinite scroll and occlusion culling at high frame rates.
What is vertical-collection?
Vertical Collection is an Ember.js addon that provides high-performance infinite scrolling and occlusion culling for web applications. It solves the problem of slow rendering and poor user experience when displaying long lists by only rendering the items currently visible in the viewport, enabling frame rates above 60 FPS.
Ember.js developers building data-intensive applications with long lists, tables, or feeds where rendering performance is critical, such as dashboards, admin panels, or social media feeds.
Developers choose Vertical Collection because it offers a seamless way to integrate performant virtual scrolling into existing Ember apps without major refactoring. Its unique selling point is the "svelte renders" philosophy, which aggressively culls off-screen content to maximize rendering efficiency and maintain smooth scrolling.
Overview
Infinite Scroll and Occlusion at > 60FPS
Use Cases
Best For
- Implementing smooth infinite scroll in Ember.js data tables
- Optimizing rendering performance for long, dynamic lists in Ember applications
- Building high-performance dashboards with large datasets
- Creating feed-based applications (like social media or activity streams) in Ember
- Improving scroll performance for admin panels with extensive data grids
- Reducing initial load times for pages with large collections of items
Not Ideal For
- Projects built with frameworks other than Ember.js (e.g., React, Vue, Svelte)
- Applications with small, static lists where virtualization overhead isn't justified
- Teams needing out-of-the-box styled components or drag-and-drop list interactions
- Projects where SEO is critical and client-side rendering limits content indexing
Pros & Cons
Pros
Implements occlusion culling to only render visible content, enabling frame rates above 60 FPS for long lists, as emphasized in the 'svelte renders' philosophy to reduce DOM workload.
Augments existing Ember applications without major rewrites, supporting dynamic content sizes and table layouts, as shown in usage examples and demos.
Provides smooth infinite scrolling in both directions, working with scrollable divs and the page body, demonstrated in feature demos for flexible use cases.
Offers actions like firstReached and lastVisibleChanged for precise scroll and visibility management, enhancing user interaction handling in complex lists.
Cons
Exclusively designed for Ember.js, making it unsuitable for projects using other JavaScript frameworks or considering migration, limiting its applicability.
Requires careful configuration of settings like estimateHeight and bufferSize, which can be complex and error-prone, especially with dynamic item sizes, as noted in the README examples.
Integration with Ember tests necessitates additional setup, such as registering the ember-raf-scheduler test waiter, adding overhead to the testing process, as mentioned in the Contributing section.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.