Практический пример: обновление PizzaPortal с помощью React и NodeJS. Часть 2

В прошлой статье мы объяснили процесс планирования нового веб-сайта PizzaPortal и то, как React взял на себя бремя запуска сложного SPA. На этот раз все дело в том, чтобы окружить React правильными инструментами сборки и тестирования.

Предварительная обработка и процедура разработки

Для комфортной работы над сайтом нескольких разработчиков создана среда быстрой разработки. Работает на Gulp и постоянно следит за исходной папкой на наличие изменений (добавлений, удалений и обновлений файлов). SASS является основой для нашего кода CSS, мы обрабатываем модули JavaScript, написанные в формате CommonJS, через Browserify и генерируем спрайты с различной плотностью пикселей из изображений.

Скрипт Gulp сигнализирует браузеру о том, что произошли изменения с помощью LiveReload. Наиболее значительные изменения в коде требуют перезапуска ExpressJS (который обслуживает веб-сайт для пользователей в средах разработки и производства), а во время разработки это выполняется в контролируемой задаче Gulp, поэтому, когда он не может перезапуститься из-за некоторых проблем в исходном коде , Gulp по-прежнему будет работать, и как только появятся исправления, попробуйте запустить его снова.

Обычно Gulp отправляет сообщение на сервер с просьбой корректно завершить работу, ждет, пока это не произойдет, а затем запускает другой сервер, который примет изменения. Только с внешними модификациями ему не нужно делать все это. Вместо этого он может просто перезапустить веб-сайт. Чтобы он знал, что и когда делать, исходные файлы были разделены на несколько каталогов, а у Gulp есть несколько разных наблюдателей. Мы использовали chokidar вместо gulp.watch, потому что не получали уведомлений внутри динамически созданных каталогов. Задачи также регулируются, поэтому, когда несколько изменений в файлах происходят с небольшими задержками, мы обрабатываем файлы только один раз. Например, мы можем добавить в проект сразу много новых изображений, но нам нужен новый спрайт только после того, как все они появятся.

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

Все, что используется для запуска проекта, вынесено в отдельный каталог. Таким образом, мы не смешиваем исходные и обработанные файлы и публикуем только минимальное количество файлов, необходимых для его запуска, что, в конце концов, не так уж и много :). Мы сжимаем код только для внешнего интерфейса, а не для внутреннего, поэтому целевые серверы должны вызывать npm install для загрузки библиотек, используемых NodeJS, после получения файлов для проекта.

Перед запуском версии требуется еще один шаг — ссылка на файл конфигурации. Это простой файл JSON, который связывается через системную переменную. В папке развертывания нет файла конфигурации по умолчанию по нескольким причинам. Во-первых, на многих серверах работают виртуальные машины, которые могут перезапускаться в неожиданное время. Поэтому файл конфигурации следует хранить в постоянном хранилище, которое может находиться в другом месте, чем файлы проекта. Во-вторых, разработчики должны знать, какие опции есть в конфигурационном файле. Если они не знают, что он существует, они могут, например, начать искать проблемы, не осознавая, что номер порта для сервера отличается от ожидаемого, или использовать режим отладки в производственной среде, не осознавая этого.

Чтобы упростить написание задач, мы быстро перешли на Gulp 4, который все еще находится в разработке, но также достаточно стабилен для использования. У него есть две очень полезные функции: gulp.series и gulp.parallel для организации порядка выполнения кода в gulpfile.js. Их можно комбинировать как угодно. Например, мы можем захотеть сначала собрать первоначальную версию проекта, а затем использовать более быстрые задачи, которые отлавливают только изменения в файлах, но могут выполняться одновременно. Чтобы иметь такое поведение, мы должны написать:

Если вы посмотрите достаточно внимательно, также происходят некоторые действия по очистке кеша.

Поскольку Gulp — это терминальная программа, независимая от какой-либо IDE, мы выбрали те, которые нам нравятся, Sublime и WebStorm.

Тестирование

К проекту прилагается большое количество end-to-end и модульных тестов. Mocha с Sinon и Chai (с chai-as-promise) использовались для их создания в стиле TDD. В React встроена собственная функция тестирования, которая имитирует взаимодействие пользователя с компонентами, но это всего лишь имитация использования интерфейса. Вместо этого нам нужны были тесты, чтобы помочь с API и всей логикой, которую React использует для отображения контента и управления им. Для API мы в основном использовали набор инструментов Sinon с такими элементами, как шпионы и макеты. React получил кастомный скрипт, который может подключать методы жизненного цикла компонентов к среде тестирования. Благодаря этому, когда мы тестируем компонент, мы можем точно проверить поток информации, даже не запуская компонент в безголовом браузере. Если необходимо проверить реакцию на действие пользователя, мы просто вызываем функцию, которую вызовет действие, прямо в тесте.

Вывод…

Конечно, все вышеперечисленное — лишь верхушка айсберга. Для полного описания проекта потребовалось бы штук 6 таких статей. Чего особенно не хватает, так это информации о еженедельных встречах SCRUM/EVO, которые в итоге позволили нам реализовать нужные вещи в нужное время. Мы также работали над оптимизацией SEO, производительностью рендеринга и добавлением дополнительных функций для пользователей, которые тоже интересны.

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

Но это все истории для другого дня.

Мы объединяем аналитиков, разработчиков, дизайнеров и исследователей. Посетите нас на senfino.com, чтобы реализовать свою следующую идею.