Многофункциональные списки ng-virtual-list как замена стандартным

В сфере искусственного интеллекта произошло заметное событие. djonnyx 16 минут назад Многофункциональные списки ng-virtual-list как замена стандартным Простой 2 мин 572 Angular * JavaScript * TypeScript * Обзор Привет всем уважаемые читатели. Около года назад я решил сделать универсальное open-source решение для визуализации списков. В первых версиях я отрабатывал технологию виртуализации с различными параметрами, было много исследований, вопросов.

Сегодня же состоялся релиз X. X версии, которая работает под управлением Angular 14-22. Хочу рассказать на что способен инструмент (ng-virtual-list), какие задачи решает и проведу краткий обзор с демонстрацией примеров.

Технические детали

Все приведенные ниже примеры содержаться в документации с примерами кода. Инструмент ng-virtual-list это виртуализированные, высокопроизводительные списки с множеством различного функционала, которого нет у стандартных списков. Список с 3D трансформациями и визуальными эффектами.

Библиотека ng-virtual-list сосредоточена на визуализации списков с фиксированными по размеру элементами (наиболее быстрый алгоритм визуализации) и списков с динамическими по размеру элементами. Под капотом реализован кастомный механизм обработки прокрутки, поэтому на десктопе можно подобно как на мобильных устройствах прокручивать списки движением мыши или тачпада. Список с привязкой прокрутки к элементам.

В функционале имеется привязка прокрутки к элементам списка с различными параметрами выравнивания. И события типа onSnap, которые отлично подходят в качестве сигналов "фокусировки" элемента при прокрутке. Любой список с всевозможными настройками можно сделать как бесконечный список, который будет зацикливать коллекции элементов.

Отраслевые последствия

Для каждого элемента коллекции можно указать набор метаданных, которые будут определять поведение и размеры элементов на экране. Первые версии ng-virtual-list были сосредоточены на создании именно мессенджера, было много упущений и дефектов. Сейчас же это полностью оттестированный и отлаженный функционал с возможностью прикрепления прокрутки к нижнему или верхнему краю при вертикальной ориентации списка, lazy подгрузка элементов при достижении начала или конца списка, навигации элементов с помощью клавиатуры и многое другое.

В качестве примера с обработкой больших коллекций можно отнести ленту новостей или вьювер для онлайн магазина. Благодаря виртуализации элементов, производительность списков с большими коллекциями стабильно высокая. Списки можно дробить на колонки в вертикальной ориентации или строки в горизонтальной.

А с помощью метаданных для элементов списка можно назначить принудительно размер на всю ширину или высоту списка, применять к ряду элементов stickyLayout, тем самым можно реализовать подобный макет расположения элементов, как представлено выше. ng-virtual-list может применять трансформации элементов, добавлять DOF(Depth Of Field) и MotionBlur эффекты. Выше представлена демонстрация навигации элементов с помощью "смахивания".

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.