Особенно в случае, если ваши пользовательские интерфейсы растут, это может значительно повысить производительность → UX, если вы сохраните DOM минимальным. Во многих случаях вы все еще хотите изменить состояние неактивных (больше не отображаемых) представлений.
Содержание
- Вступление
- Эта проблема
- Решение
- Как это работает?
- Можем ли мы добиться того же в Angular, React или Vue?
- Онлайн-демонстрация
- Что такое neo.mjs?
- Расширение одностраничных приложений в несколько браузерных окон
1. Введение
При просмотре видео, пожалуйста, сосредоточьтесь на DOM внутри инструментов разработчика. Я переключаюсь между разными карточками (активными представлениями), открываю боковую панель настроек и меняю настройки неактивных представлений. Неактивные представления не внутри DOM. При повторной активации представлений последнее состояние остается на месте, а состояние прокрутки сохраняется.
2. Проблема
Особенно в те дни, когда я работал в Sencha, производительность пользовательского интерфейса была серьезной проблемой для клиентских приложений, как только они стали больше.
Я говорю о пользовательских интерфейсах с более чем 100 видами, многие из которых вложены во вкладки или просто макеты карточек.
Это всегда было компромиссом: либо вы уничтожаете экземпляры невидимых представлений, что означает уничтожение экземпляров JS и больше не можете получить доступ или даже изменить состояния компонентов, либо сохраните все представления внутри DOM, что приведет к снижению производительности, тем больше ваши пользовательские интерфейсы растут.
Подумайте о формах с вкладками, в которых вы хотите проверить поля по сравнению с другими полями на разных вкладках. Для подобных случаев вам нужно было сохранить все представления.
В качестве примера давайте взглянем на Neo Calendar (работа над ним):
Если вы присмотритесь: блок div с классом neo-layout-card содержит 4 элемента: представления дня, недели, месяца и года. А теперь представьте, что вы добавляете в этот Календарь более 100 событий, влияющих на все просмотры одновременно.
Это все еще «маленький» пример, он становится еще более проблематичным для массивных пользовательских интерфейсов.
3. Решение
Нам нужна разметка DOM, подобная этой:
Макет карточки теперь содержит только один элемент: обзор месяца. Если вы присмотритесь, вы также заметите, что боковая панель настроек тоже не находится внутри DOM.
Очевидно, вы можете добиться этого, убив экземпляры неактивного представления, но это не цель.
Теперь мы открываем (и монтируем) представление настроек и активируем вкладку настроек просмотра года:
Вы заметите, что представление настроек теперь находится внутри модели DOM, а макет карточки по-прежнему содержит только представление месяца.
Проверяем флажок «showSixWeeksPerMonth»:
Теперь переходим к просмотру по годам:
В представлении отображается 6 строк в месяц (что не является значением по умолчанию), представление «Месяц» больше не находится в DOM.
Теперь вы могли бы сказать: «Это просто, поскольку Года еще не было!»
Честная оценка. Перейдем к общим настройкам:
Мы переключаем язык на немецкий, что сразу же повлияет на активный просмотр года. Теперь мы открываем настройки просмотра месяца:
Мы переключаем dayNameFormat на long и переключаемся на темную тему.
Теперь мы возвращаемся к просмотру месяца:
На этом этапе вы, вероятно, будете в восторге, так как наши изменения настроек вступают в силу сразу же.
Закроем окно настроек:
Боковая панель настроек больше не находится внутри DOM. Если мы откроем его снова, он будет выглядеть так же.
Вы также можете прокручивать внутри обзора месяца (как показано на видео), переходить к другому просмотру и обратно, при этом состояние прокрутки остается таким, как было раньше.
4. Как это работает?
С настройкой neo.mjs это на самом деле довольно просто.
Давайте посмотрим на:
Https://github.com/neomjs/neo/blob/dev/src/calendar/MainContainer.mjs
MainContainer календаря сразу же создаст все 4 представления.
Вы можете передавать конфигурации для каждого представления, что позволяет вам изменять их конфигурации по своему усмотрению. Это также включает в себя конфигурацию модуля, поэтому вы можете расширить класс подмодуля, добавить конфигурации и методы по своему усмотрению и использовать свой собственный класс.
Я расскажу об этой части более подробно в своем следующем сообщении в блоге.
Каждое представление будет храниться во внутренней ссылке:
›MyCalendar.monthComponent, myCalendar.yearComponent и т. Д.
В качестве следующего шага я немного улучшил макет карты:
Https://github.com/neomjs/neo/blob/dev/src/layout/Card.mjs#L83
Важная часть здесь - строка 32:
К каждой неактивной карточке добавляем флаг vdom «removeDom: true».
Это удалит карты из реального DOM.
Мы по-прежнему сохраняем экземпляры JS, а также vdom для каждой карты.
Это позволяет нам продолжать изменять конфигурации, которые затем будут добавлены в виртуальную DOM. После того, как мы вставим неактивную карту обратно, у нас будет последнее состояние ее vdom из коробки.
Давайте взглянем на представление настроек по месяцам:
Https://github.com/neomjs/neo/blob/dev/src/calendar/view/MonthComponent.mjs#L152
В основном мы здесь делаем:
myCalendarInstance.monthComponent.dayNameFormat = «длинный»;
Изменить конфигурацию - это все, что вам нужно сделать в среде, управляемой конфигурацией.
Это вызовет:
который изменит текущий формат и обновит виртуальную DOM.
5. Можем ли мы добиться того же в Angular, React или Vue?
Честно говоря, я очень давно не изучал эти библиотеки и фреймворки. Я не знаю!
Не стесняйтесь добавлять комментарии к этому, и я обновлю статью.
6. Онлайн-демонстрация
Это предварительная версия нового компонента календаря.
Пожалуйста, не ожидайте, что он будет полностью функциональным. Разработка продолжается, и финальная версия запланирована на выпуск 1.4.
7. Что такое neo.mjs?
neo.mjs - это проект с открытым исходным кодом (вся кодовая база, а также все примеры и демонстрационные приложения используют лицензию MIT).
Значение: вы можете использовать его бесплатно.
Так и останется.
Однако проекту нужны больше участников, а также спонсоров.
Еще много (!) Вещей и идей в дорожной карте.
Если вы хотите внести свой вклад в прекрасный проект с открытым исходным кодом, мы будем очень признательны.
В случае, если проект имеет или будет иметь бизнес-ценность для вашей компании: регистрация в качестве спонсора позволит мне уделить ему больше времени, что приведет к более быстрому времени доставки новых вещей.
8. Расширение одностраничных приложений в несколько окон браузеров
В настоящее время изюминкой фреймворка neo.mjs является его способность перемещать целые виртуальные деревья DOM в разные окна браузера.
Если вы думаете о приложениях, работающих на нескольких экранах, вам понравится этот:
С уважением и удачного кодирования,
Тобиас