Как создать PWA: топ-6 инструментов

Инструменты, а также библиотеки JavaScript, которые можно использовать для ускоренной разработки PWA при минимальной сложности, описывает Мэтью Дэвид, senior developer мобильного центра качества корпорации Kimberly-Clark. Переводит EVO.business

PWA должны иметь возможность делать следующее:

• Работать со всеми браузерами и устройствами (мобильными и десктопными).
• Вписываться во все экраны и форм-факторы с использованием адаптивного дизайна.
• Использовать механизм автономной работы.
• Предоставлять подобный приложениям опыт повторного взаимодействия – в частности, push-уведомления.

Если вы новичок в прогрессивных веб-приложениях, лучше всего начать с Руководства Google по созданию вашего первого PWA. Однако цель этой статьи – предположить, что вы экспериментировали или завершили свое первое PWA и ищете инструменты, которые позволят вам создавать их быстрее.

Вот основные инструменты, которые моя команда использует для создания прогрессивных веб-приложений.

Существует множество фреймворков, и я рекомендую взглянуть на разные варианты, но мы используем ReactJS по двум причинам:

1. Он управляется и поддерживается компанией Facebook, которая использует этот фреймворк на своих сайтах – и ​​тем самым демонстрирует, что фреймворк тщательно тестируется 1,18 миллиардами пользователей ежедневно.
2. React является основой для React Native, который позволяет легко преобразовывать PWA, созданные с помощью React – в нативные мобильные приложения или десктопные программы.

Привлекательность ReactJS заключается в его компонентно-ориентированном подходе к разработке. Пользовательский интерфейс создаваемых сайтов состоит из компонентов. Эти компоненты могут отображаться в браузере, на сервере с помощью Node.js и внутри приложений с помощью React Native.

Каждый компонент построен с использованием JavaScript; легко использовать его повторно. ReactJS поддерживает как обычный, так и JSX JavaScript (JSX – это XML-подобный синтаксис для написания кода на JavaScript).

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

Моя команда использует Polymer для быстрого создания прототипов: чтобы немедленно приступить к важной работе (код проекта) и быстро обойти пользовательские настройки •

Шаблоны Polymer используют паттерн PRPL для оптимизации выгрузки приложения на устройство. При этом необходимо использовать сервер HTTP2 для доставки ресурсов по запросу.

В отношении дизайна шаблон Polymer по умолчанию использует популярный Material Design oт Google.

Хотя Polymer отлично подходит для начала работы, дальше необходимо разрабатывать собственный код. Для этого мы используем Webpack – пакетный модуль для приложений JavaScript.

Webpack значительно упрощает создание графов зависимостей. Граф зависимостей устраняет необходимость в управляемых зависимостях – а это означает, что вам больше не нужно ссылаться на все эти файлы JS внизу веб-страницы HTML.

Переход на модули CommonJS или ES6 значительно сокращает количество обращений к серверу и с него, что приводит к ускорению работы приложения •

С помощью Webpack все некодовые ресурсы (изображения, CSS, шрифты и так далее) могут вызываться через JavaScript как объекты, что дает значительные преимущества в скорости.

Иногда даже не нужны универсальные фреймворки, такие как React, для создания PWA. Моя команда использует библиотеку Knockout для создания «легких» прогрессивных приложений.

Они используют его для обработки привязок между JavaScript и HTML в шаблоне Model-View-ViewModel (MVVM). Вот ключевые преимущества Knockout:

• Библиотеку можно легко перенести на существующие веб-сайты без переписывания кода.
• Библиотека крошечная (всего 13 КБ).
• Несмотря на то, что библиотека небольшая, она предлагает множество функциональных возможностей.

Мы считаем Knockout отличной платформой для перехода к небольшим проектам, где скорость выполнения имеет первостепенное значение. Мы часто используем Knockout для разработки концепции во время спринта.

Есть две причины, по которым мы используем Knockout для быстрых проектов вместо React:

• Во-первых, можно использовать Knockout для расширения HTML без использования JSX.
• Во-вторых, создание шаблонов с использованием этой библиотеки облегчает создание сложных приложений – поскольку сводит к минимуму дублирование элементов DOM.

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

AMP – инструменты для управления сжатием изображений и JavaScript для ускорения работы вашего сайта.

Google активно поддерживает AMP – вплоть до того, что поднимает сайты на основе AMP в результатах поиска •

И наконец, Google поддерживает AMP Cache для элементов AMP, который разработчики могут использовать бесплатно.

Последней частью нашего прогрессивного набора инструментов для прогрессивных веб-приложений является Lighthouse – средство мониторинга производительности PWA от Google, которое устанавливается как плагин для Chrome.

Перейдите на PWA, для которого вы хотите выполнить тестирование, и нажмите кнопку Lighthouse, которая появилась на панели инструментов Chrome, как только вы установили плагин.

Отчет, который вы получите, содержит много деталей. Первый раздел в идеале будет содержать следующую аналитику :

• Приложение может работать автономно / с нестабильным соединением.
• Скорость загрузки страниц высокая.
• Сайт является прогрессивным приложением.
• Сетевое соединение безопасно.
• Пользователь может загрузить сайт как приложение.
• Установленное пользователем приложение-сайт обновится до актуальной версии.
• Дизайн сохранится на всех устройствах.
• Дизайн mobile friendly.

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

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

Итак, Lighthouse позволяет не только протестировать ваш сайт-приложение, но и указать пути устранения проблем.

Тranslated from English. Source: TechBeacon.com. Author: Matthew David