При разработке приложений справедливо ожидать, что потребуется огромный список данных. До сегодняшних дней, если вы разрабатывали гибридное приложение и хотели показать пользователю список из 100+ элементов, все выходило довольно плачевно. Браузер смартфона посмеялся бы над тем, как вы прокручиваете список с частотой 10 кадров в секунду.
Испробовав все известные вам приемы для решения проблемы, разочарование медленно накроет вас, пока вы не пожалеете и не признаете, что веб-инструменты слишком ограничены для практичных приложений. И вы бы начали усердно изучать Objective-C или Java и создавать нативные приложения.
К счастью, разработчики больше не столкнутся с таким драматическим сценарием, так как в Ionic есть решение.
Как это делает нативное приложение?
Нативные приложения довольно плавно отображают громадные списки. Приложение с контактами, например, может без проблем показывать тысячи элементов. Добиться этого довольно просто: нативные APIs отображают только те элементы, которые должны быть видимы в текущий момент относительно положения пользовательской прокрутки.
Это значит, что если в окне просмотра могут уместиться 10 элементов, а пользователь прокручивает список из 100 элементов вниз до середины, на экране будут отображаться только элементы с 50 по 60.
Это возможно сделать с помощью веб-технологий. Нужно только слегка поиграться с системой...
Базовая концепция
Мы знаем нашу конечную цель: ограничить отображение элементов в большом списке. Как это сделать?
Выясняя, как это сделать на Ionic, мы черпали вдохновение из UICollectionView на iOS. В нашей реализации есть три основных компонента:
- Директива
collection-repeat: разработчик добавляет эту директиву элементу, который он или она хочет повторить, предоставляет массив данных и с помощью простого выражения задает размер (ширину и высоту) каждого элемента в массиве. CollectionRepeatManager: он берет размер окна прокрутки со списком, текущее значение прокрутки и размер каждого элемента, чтобы точно выяснить, какие элементы необходимо отобразить.CollectionDataSource: Manager запрашивает у DataSource объект по конкретному индексу, и DataSource выдает Manager полноценный элемент DOM, представляющий этот объект.
Секретная приправа
Самая важная часть мозаики заключается в том, как быстро отобразить новые элементы, когда пользователь прокручивает список.
Во время прокручивания элементы, которые ранее были наверху экрана, теперь невидны. Что следует сделать с этими элементами? Первая мысли — удалить их из DOM.
Но мы посчитали, что лучше скрыть более невидимые элементы и отметить их как "доступные для прокручивания". Если бы мы удалили невидимые элементы, то позднее пришлось бы снова добавлять их в DOM при прокрутке списка вниз. А добавление новых элементов в DOM во время прокрутки привело бы к заметной путанице.
Далее Manager спрашивает DataSource: "Дай мне соответствующие данные элемента по индексу 16, чтобы я мог его отобразить". DataSource находит элемент, который уже есть в DOM и помечен как доступный. Он назначает данные элемента 16 области этого элемента и передает его в Manager.
Manager располагает элемент в окне соответствующим образом с помощью ширины и высоты, изначально заданных разработчиком для вычисления его положения. Мы используем Javascript, чтобы правильно расположить элементы и не беспокоиться об их упорядочении в DOM во время прокручивания списка. Настоящий порядок элементов в списке не имеет значения: они преобразуются и располагаются в нужном положении, и все выглядит так, как будто они стоят в правильном порядке. Конечный пользователь не сможет заметить разницу.
Проблема решена. Что теперь?
Что это дает разработчикам? Они больше не ограничены слабостями DOM и мобильного веб-представления. Это значит, что теперь можно иметь столько данных, сколько нужно, сохраняя прокрутку плавной и быстрой. И в то же время это позволяет не огорчать наших пользователей.
Здорово, не так ли?
Комментарии