Благодаря множеству доступных технологий, распространению фреймворков и постоянно меняющейся экосистеме современное устаревает быстрее, чем когда-либо. В этой статье делается попытка определить, как «модерн» будет выглядеть в 2019 году.
Современные веб-приложения должны соответствовать определению прогрессивного веб-приложения (PWA)
Прогрессивное веб-приложение должно быть надежным, быстрым и увлекательным. На настольном компьютере это должно быть быстро реагирующее одностраничное приложение. На мобильном устройстве оно должно ощущаться как собственное приложение и уметь справляться с ситуациями с низким уровнем подключения путем кэширования важных данных. Начните с руководства Google Progress Web Apps, Workbox и используйте расширение Lighthouse Chrome для тестирования своего приложения. В подкасте RealTalk JavaScript есть хороший вводный эпизод по этой теме. Создание PWA доставит удовольствие клиентам на настольных компьютерах, мобильных устройствах или в гибридных нативных приложениях.
Современное веб-приложение должно иметь простую, но мощную систему сборки.
Не тратьте время зря, настраивая WebPack, Parcel или Rollup, если вы не знаете, чего ожидать, и не имеете в виду очень конкретный вариант использования. Отдавайте предпочтение готовым инструментам, которые заполнят макет папки и заложат прочную основу для инструментов, которые будут использоваться для создания приложения. Самые популярные фреймворки и библиотеки имеют специальный инструмент интерфейса командной строки (cli). Angular имеет Angular CLI, React имеет create-react-app, а Vue имеет Vue CLI. Существуют также сторонние альтернативы, такие как шаблон реакции, но они уступают место сторонним инструментам, которые постоянно обновляются. Хотя можно настроить Webpack с нуля, на самом деле нет причин делать это, пока веб-приложение не станет настолько большим, что его нужно разбить на несколько приложений, и в этом случае Lerna вступает в игру.
Современное веб-приложение должно быть написано с использованием современной структуры и современного синтаксиса
Согласно опросу State of JS 2018, современное веб-приложение в 2019 году будет построено с использованием одного из трех интерфейсных фреймворков, React, Vue.js или Angular, и согласно тому же опросу оно должно быть написано с использованием ES6 и TypeScript. Babel поддерживает ES2018, сейчас самое время изучить его и начать использовать.
… А современной интерфейсной среде требуется современная библиотека пользовательского интерфейса
Качество и высокий уровень настройки, доступные с помощью библиотек компонентов, таких как Material UI, Ant Design и Semantic UI, делают создание компонентов с нуля все менее и менее привлекательными. Доступность, индикаторы фокуса и отзывчивость выходят из коробки с этими библиотеками компонентов и на уровне качества, который будет трудно воспроизвести небольшой командой, основной целью которой является создание функционального приложения, а не библиотеки пользовательского интерфейса. Потратьте время на совершенствование таблицы стилей и темы, отражающих желаемую идентичность веб-сайта, но не тратьте время на создание поля ввода с автоматическим выбором. Скорее всего, кто-то уже сделал это и довел до совершенства за несколько итераций. В качестве доказательства ознакомьтесь с React Select и спросите себя, сколько времени потребуется, чтобы воспроизвести аналогичный компонент с паритетом функций.
Современное веб-приложение должно быть доступно
Доступность должна быть во главу угла любого веб-дизайна. Большие сенсорные мишени, поддержка изменения размера экрана, высокая контрастность, правильное семантическое структурирование и простая навигация с клавиатуры делают веб-сайты лучше для всех. Чтобы доставить удовольствие каждому пользователю независимо от его способностей, потратьте время на изучение того, как использовать VoiceOver, и воспользуйтесь Контрольным списком веб-доступности A11y, Инструментами разработчика специальных возможностей Chrome и правилами линтинга специальных возможностей.
Современное веб-приложение должно быть тщательно протестировано со всех сторон. А потом снова проверил. И снова, и снова…
Без тестирования нет простого рефакторинга или обновления базовых библиотек. Чем тщательнее тестируется приложение, тем быстрее оно может быть выпущено, и время, потраченное на тестирование, окупится во много раз. Заполнение приложения с помощью интерфейса командной строки первого лица упростит настройку проекта для тестирования, поскольку придется позаботиться о большом количестве шаблонов. В Node & JavaScript существует много разных стратегий тестирования, и каждая имеет свои преимущества.
- ESLint / TSLint
Использование линтера гарантирует, что соглашения о кодировании соблюдаются и соблюдаются. Стерильные аргументы, такие как табуляция и пробелы или количество пробелов в табуляции, можно убрать, приняв внешнее руководство по стилю, такое как Руководство по стилю JavaScript AirBnb, Руководство по стилю JavaScript от Google и множество доступных правил TSLint. Обеспечьте согласованное форматирование с помощью Prettier. Запретить разработчикам продвигать код, который не является линтингом, с использованием Husky и lint-staged. Урегулируйте войну мнений и избегайте мнения самого высокооплачиваемого человека (HiPPO), проголосовав в канале Slack, если правила необходимо изменить. - Модульные тесты с Jest
Jest - мой любимый инструмент для выполнения тестов на данный момент, потому что он хорошо работает с Enzyme и React, имеет собственные утверждения стиля BDD, готовое покрытие и открывает дверь в Тестирование снимков. Я снова настоятельно рекомендую использовать Git Hooks (с Husky) для обеспечения высокого покрытия кода и 100% прохождения модульных тестов, прежде чем разрешить отправку кода. - Разработка и тестирование компонентов с помощью Storybook
Storybook - это мощный и легкий в освоении инструмент для разработки, управляемой компонентами. Вместо того, чтобы строить экраны, разработчики создают компоненты и собирают их для создания экранов. Storybook позволяет проводить Структурное тестирование, которое позволяет создавать и поддерживать набор модульных тестов, которые фактически не сработают, если изменится макет веб-приложения. Это сводит к минимуму количество визуальных дефектов и позволяет разработчикам проверять их перед открытием запроса на вытягивание и перед развертыванием кода. Storybook также включает Тестирование взаимодействия, Автоматическое визуальное тестирование и Ручное тестирование. Инженерам по качеству это нравится. Владельцы продуктов могут играть с компонентами, не приставая к команде разработчиков для демонстрации, и предоставлять обратную связь UX / UI на досуге, поэтому ценное демонстрационное время можно использовать для обсуждения улучшений функций, а не для сбоев пользовательского интерфейса. - Интеграция и End2End тесты с Cypress
Времена трудностей в написании и нестабильных тестов с Selenium прошли. Настройте и напишите тесты за считанные минуты с помощью Cypress и запустите их за считанные минуты как локально до отправки кода, так и в среде CI / CD. Прекратите повторять одни и те же шаги при тестировании новой функции, и пусть Cypress сделает это быстрее и точнее, чем любое ручное тестирование. - Эксперимент
Подсчитано, что 80% новых функций имеют нейтральное или негативное влияние на пользователей. Используйте Переключатели функций и A / B-тестирование, чтобы оценить влияние новых функций на ваш сайт. Не бойтесь уничтожить новую функцию, создание которой потребовало много времени и больших усилий, если она окажет негативное влияние. То, что большинство сочло бы неудачей, следует рассматривать как успешное исследование рынка, извлечь некоторые уроки из этого опыта и двигаться дальше.
То, что делает современное веб-приложение современным сегодня, изменится в течение 2019 года с использованием технологий, которые еще не получили широкого распространения (например, React Context и React Hooks переопределяют то, как мы думаем о состоянии в приложении React). Кроме того, есть много других вещей, которые входят в создание приложения, которые не затрагиваются в этой статье, например, внутренняя интеграция и вызовы API (Rest / GraphQL), микросервисы, облачная инфраструктура и отказоустойчивость.
Наконец, самая важная часть сборки - это люди, стоящие за ней, и это уже отдельная статья.
