Vertical Collection

screenshot of Vertical Collection
html-next
Byhtml-next
ember
bootstrap

Vertical Collection

Infinite Scroll and Occlusion at > 60FPS

GithubLive Demo

Overview:

The vertical-collection is an ember-addon that is part of the smoke-and-mirrors framework, focusing on enhancing performance in high-stress situations by offering a component for efficient list rendering. The addon aims to optimize initial renders and re-renders, emphasizing the importance of rendering only the necessary content based on the user's viewport.

Features:

  • Compatibility: Supports Ember.js v3.28.0 or above, Ember CLI v4.4 or above, and Node.js v16 or above
  • Svelte Render: Emphasizes rendering only essential content for faster performance
  • Infinite Scroll: Enables bi-directional infinite scrolling for long lists
  • Actions: Provides actions like firstReached, lastReached, firstVisibleChanged, and lastVisibleChanged

Summary:

The vertical-collection ember-addon offers a component for efficient list rendering, focusing on improving initial and re-render performance by rendering only essential content. It supports features like infinite scrolling, svelte rendering, and various actions to enhance user experience and optimize performance. With easy installation steps and compatibility with modern Ember and Node versions, vertical-collection proves to be a valuable addition for applications requiring high-performance list rendering.

ember
Ember

Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.