От автора: сегодня мы поговорим о том, как настраивается в Angular анимация, используемая при загрузке приложения. Живя в развитой стране, можно легко привыкнуть к высокоскоростному Интернету и воспринимать его как должное. Любой сайт, видео или песня с помощью вездесущих 4G и WiFi могут быть получены по первому требованию.
Думаете, что так же везде — вовсе нет…
Последние пару месяцев я путешествовал по отдаленным северным частям Австралии и прекрасному Бали. Поиск хорошего интернет-соединения в этих местах может превратиться в очень сложную задачу, а иногда даже невыполнимую. Соединение часто обрывается и большую часть времени является довольно медленным. Совместное использование одной точки доступа WiFi с десятками прекрасных гостей хостела также не улучшает ситуацию.
Если мы поймем, что во многих местах медленный и ненадежный интернет — это неотъемлемый факт жизни, мы можем начать задумываться о том, как мы улучшить приложения, чтобы обеспечить лучший опыт взаимодействия пользователя.
Решение Angular CLI по умолчанию
Angular CLI использовался для отображения черного текста “Loading…” на белом фоне, но с версии 1.5.0 в файле index.html содержится только <app-root></app-root>. Это означает, что пользователи будут видеть только пустой белый экран, пока наше приложение Angular и все сторонние библиотеки не будут полностью загружены. Это может легко занять от трех до десятков секунд на более медленном Интернете.
Лучшее решение
Давайте предоставим пользователю визуальные сигналы, указывающие, что приложение не дало сбой, а на самом деле загружается. Это увеличит вероятность того, что он дождется загрузки приложения и использует его, вместо того, чтобы уйти и искать какие-то альтернативы.
В следующем примере загрузка самой анимации занимает всего около 1,5 секунд, но помните, что на практике в медленных сетях она может грузиться более 10 секунд…
Анимация загрузки намного лучше, чем ничего, или надпись по умолчанию “Loading…”, предоставлявшаяся предыдущими версиями Angular CLI
Отступление: некоторые из вас наверняка уже подумали о PWA и их поддержке для улучшения работы оффлайн интернет-скриптов, но даже с PWA нам все равно нужен какой-то визуальный элемент для первого посещения, пока все не будет загружено и закэшировано в работнике службы.
Разбор запуска приложения Angular
Во время разработки приложения мы привыкли работать с исходными файлами, будь то Typescript или стили Sass. Однако это не те вещи, через которые приложение взаимодействует с браузером.
Построение приложения означает, что Angular CLI использует Webpack и множество загрузчиков для пересылки и обработки всех исходных файлов и ресурсов, чтобы предоставить пакеты, которые мы затем развертываем на сервер. Наше приложение становится доступным и может запрашиваться любым пользователем, имеющими соответствующий URL-адрес.
Что происходит, когда пользователь открывает в браузере наше приложение?
Одно изображение стоит тысячи слов, поэтому давайте рассмотрим его …
.. или если вам нужно больше подробностей …
Браузер запрашивает файл index.html и отображает его содержимое
Браузер запрашивает все скрипты, на которые размещены ссылки в конце index.html (стили, встроенные элементы, полифиллы, вендоры, …)
Скрипты загружаются, анализируются и выполняются
Angular начинает с выполнения platformBrowserDynamic().bootstrapModule(AppModule); для компилятора Just in Time (JIT) или платформы
Angular отображает компоненты приложения
Это означает, что между отображением содержимого index.html и отображением компонентов Angular после успешной начальной загрузкой приложения Angular может пройти значительный промежуток времени.
Браузер анализирует файл index.html сверху вниз, а Angular CLI вводит теги скриптов со ссылками на связанные ресурсы в конце раздела body непосредственно перед закрывающимся тегом body.
Таким образом, мы можем создать макет и встроенные стили в файле index.html, которые будут проанализированы и отобраны сразу же, до начала запросов на загрузку файлов пакетов.
Давайте посмотрим, как мы можем реализовать такие стили и макет на практике …
Как задать заставку, отображаемую при загрузке до запуска приложения
Анимация загрузки состоит из анимированного SVG-спиннера и логотипа посередине. Он реализуется с использованием встроенного в head тега стиля и макета внутри компонента <app-root>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!doctype html> <html> <head> <!-- уменьшаем для краткости --> <!-- встроенные стили спиннера, чтобы отображать спиннер сразу --> <style type="text/css"> body, html { height: 100%; } .app-loading { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .app-loading .spinner { height: 200px; width: 200px; animation: rotate 2s linear infinite; transform-origin: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .app-loading .spinner .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; stroke: #ddd; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } </style> </head> <body> <app-root> <!-- селектор из app.component.ts --> <!-- загрузка макета, заменяемого после загрузки приложением --> <div class="app-loading"> <div class="logo"></div> <svg class="spinner" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> </div> </app-root> </body> </html> |
Angular удаляет содержимое внутри <app-root> </ app-root> после успешной загрузки приложения, поэтому нам не нужно скрывать этот макет вручную.
Круто, у нас есть спиннер, но логотип по-прежнему остается просто именем класса в теге div ( <div class=»logo»></div>) и пока здесь не отображается ничего полезного.
Добавление дополнительной точки входа стилей
Самый простой и наиболее «Angular-истый» способ отобразить логотип перед загрузкой приложения при использовании Angular CLI заключается в добавлении дополнительных стилей в файл angular-cli.json.
1 2 3 4 5 6 7 8 9 10 11 |
{ "...": "heavily reduced for brevity", "apps": [ { "styles": [ "styles-app-loading.scss", "styles.scss" ] } ] } |
Нам нужно добавить еще одну точку входа стилей в angular-cli.json. Таким образом, мы можем создать в папке src новый файл styles-app-load.scss и установить логотип в качестве фона.
1 2 3 4 5 6 7 8 9 |
.app-loading { .logo { width: 100px; height: 100px; // this way asset gets processed by webpack background: url(./assets/logo.png) center center no-repeat; } } |
Связанные или встроенные активы
Мы используем дополнительный файл для создания анимации загрузки приложения, чтобы иметь возможность привязать логотип в качестве css-фона. Это отлично работает с Angular CLI, который ограничивает наш доступ к базовой конфигурации Webpack.
Связанный логотип будет обработан загрузчиком Webpack в качестве актива. Это означает, что он будет скопирован в папку dist с соответствующим хэшированным именем файла для перебора кеша во время сборки.
Если логотип очень маленький лучше преобразовать его в строку base64 и вставить непосредственно в файл index.html, как данные <img src=»data:image/png;base64,…фактические данные…» alt=»My App Logo»>.
Это решение позволяет отображать логотип сразу, но не подходит для больших логотипов, потому что они значительно увеличивают размер файла index.html.
Я не проводил проверку оригинального размера файла логотипа и закончил проект GitHub на HTML, как наиболее часто используемым языком в 70% случаев. Да, это был встроенный логотип в файле index.html.
Пример
Посмотрите, как все это работает на практике — angular-ngrx-material-starter app и хранилище. Чтобы протестировать решение, попробуйте использовать инструменты Chrome Dev Tools и снизить скорость соединения до скорости медленной сети 3G.
Ура! Мы сделали это!
Надеюсь, вы нашли эту статью полезной для себя и подумаете над тем, как использовать описанные в ней вещи на практике. Пожалуйста, поддержите эту статью своим хлопками, чтобы донести эти советы до более широкой аудитории! Кроме того, вы можете прочитать другие интересные статьи по Angular…
Автор: Tomas Trajan
Источник: //medium.com/
Редакция: Команда webformyself.
Комментарии (1)