Загрузка веб-модулей в хост-приложениях

Состояние загрузки продуктового веб-модуля. Планирование адекватной загрузки веб-модуля для пользователей.

Мы не делаем просто скелетон загрузку. Мы пытаемся понять, какую часть экрана мы можем быстрее всего загрузить и отобразить пользователю. Используя инструмент скелетон и анимированные переходы.

Презентация

embed.figma.com

Запись со встречи

https://rutube.ru/play/embed/private/13f68301db4d1a3f75f37728917f56bf/

Пример анимации загрузки веб-модуля

embed.figma.com

Вопрос. Что такое загрузка (скелетон) микрофронтов? Для чего это надо? Почему я должен это делать?

Ответ:

Как вы знаете (почему то не все это знают), микрофронты (микросервисы) — это такие куски интерфейсов на react (фреймворк) которые встраиваются виде окошек (iframe) в хост-приложения flutter, cordova.

Нехороший момент №1. Есть микросостояние при загрузки отображения микрофронта в хост приложении, который занимает от 1,5 сек. В этот момент мы отображаем "яблочку&монетку" Preloader Screen. На текущий момент, он висит до тех пор пока весь контент внутри микрофронта не загрузится.

Нехороший момент №2. При переходе с одного микрофронта на другой, большое количество времени занимает отображении Preloader Screen. Так как он каждый раз ждет полной загрузки микрофронта.

На прикрепленном видео показаны этим моменты. Видно, что при каждом переходе отображается "яблочку&монетку" Preloader Screen.

Тем самым нам необходимо сделать отображение "яблочку&монетку" Preloader Screen до первого получения статичной части интерфейс микрофронта. Мы сокращаем время отображения "яблочку&монетку" Preloader Screen. Оно меньше будет отображаться при переходе между микрофронтами.

Что такое статические данные. Важно понимать, ваш дизайн делится на статические данные т.е не изменены и динамические, те которые приходят с бэк сервисов. Динамические данные приходят интерфейс дольше всего. Их вы отображаем позже всего.

Глобально вам надо делать 3 состояния интерфейс загрузки микрофронта, чтобы ускорить ваше отображение.

  1. Страница полным скелетоном. Чаще всего это просто фейк html верстка которая очень легкая , чтобы устройство быстро её качало и показывало

  2. Загруженный интерфейс с статичными данными. Микрофронт загрузился и отображает какие то уже данные на компонентах. Отображаете какие блоки ещё в состоянии загрузки так как это динамические данные.

  3. Загрузка интерфейс с динамическими данными. Это состояние при котором вы показываете части интерфейса, которые приходят позже всего.

  4. Загруженная страница. Ну тут понимаете что все уже загружено.

Если у вас 2 или 3 этапа нет, можете не отображать. Это выясняется ваши разработчиком.

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

Эта задача, просто ускорит отображение ваших микрофронтов. Пользователь будет видеть, то что ему надо от 1 секунды быстрее.