Сборка react-boilerplate совсем недавно, 26.06.2018, была обновлена до версии 3.6.0. Этой сборке уже более трех лет, но, заметно выделяясь на фоне множества других (более 18 тыс. Stars GitHub), она практически никак не была замечена на Хабре. В чем же ее особенность? Если кратко — сборка предлагает разработчику «все и сразу»!

Сначала о грустном

Сначала немного о грустном. Значение стартовых сборок для react-проектов просто огромно. Как известно, собственно React — это всего лишь библиотека реализующая уровень представления и для того, чтобы создать полноценное приложение, потребуется применить множество других библиотек, благо экосистема React предлагает немало таковых. По этой причине конфигурация проекта React представляет собой серьезную проблему, решение которой отдельному разработчику найти крайне сложно. Это прекрасно понимает и сам Dan Abramov, заявляя: “Конфигурация не должна стоять на пути к началу работы”. И предлагает решение — Create React App. В этой стартовой сборке, снискавшей значительную популярность (более 51 тыс. Stars GitHub), авторы постарались максимально оградить разработчика от вопросов конфигурирования, пряча конфигурацию по умолчанию, урезав набор модулей до минимума, предоставляя возможности автоматической генерации составных частей, создавая тем самым ощущение простоты и легкости разработки react-приложения. Более того, они же, исходя из того же посыла, предлагают свой список рекомендуемых сборок. Подход, возможно, хорош для привлечения новичков, но быстро себя исчерпывающий себя своей ограниченностью и вопросы конфигурации, вопросы применения лучших модулей, лучших практик все так же требуют своего решения. И как тут быть, например, разработчику, который разрабатывает свой первый react-проект?

Выход есть

Сборка react-boilerplate представляет собой альтернативный подход к решению проблемы и предлагает «все и сразу». Это набор модулей, признанных де-факто стандартными и проверенных в работе, набор, в котором применены лучшие практики в организации проекта, в том числе и с учетом масштабируемости и производительности, внедрены технологии помогающие программисту быстрее разрабатывать и отлаживать код.

Разработчики сборки позиционируют ее, как высокомасштабируемую, «offline-first» (однажды загруженное приложение работает и в офлайн-режиме), учитывающую опыт лучших разработчиков, нацеленную на высокую производительность и построенную с учетом «best practice», крепкую, «production ready», проверенную в боях основу для разработки react-приложения.

Применяемые библиотеки

Подробнее о применяемых модулях:

• React, v16.4 (Fiber) — прогрессивная реализация ключевого алгоритма React, увеличивающая производительность при разработке таких задач, как анимация, организация элементов на странице и движение элементов;
• React Router, v4.3 — роутер де-факто для react приложений, делает возможным строить приложения с дружественными для поисковых серверов УРЛами;
• Redux, v4 — библиотека обеспечивающая строго однонаправленный поток данных, делая логику приложения более предсказуемой и легкой для понимания;
• Redux Saga, v0.16 — библиотека, которая призвана упростить и улучшить выполнение побочных эффектов (т.е. таких действий, как асинхронные операции типа загрузки данных и др.) в React/Redux приложениях;
• Reselect, v3 — библиотека позволяющая предотвратить ненужные перерисовки и пересчеты полученных данных, что, в свою очередь, ускоряет React/Redux приложение;
• ImmutableJS, v4 – библиотека облегчающая работу с иммутабельными данными в React/Redux приложениях;
• Styled Components, v3.3 – библиотека позволяющая избавиться от CSS-классов, как промежуточного этапа между компонентом и его стилями;
• React Loadable, v5.4 — библиотека позволяющая осуществить компонентно-ориентированный подход к разделению кода и реализовать позднюю загрузку;
• Jest v23.1, Enzyme v3.3 – библиотеки для тестирования react-приложений.

Масштабируемость и производительность

В сборке последовательно внедрены принципы поддержки масштабируемости и увеличения производительности, детально изложенные разработчиком сборки Max Stoiber в его лекции «Масштабирование ReactJS приложений» и Dan Abramov в лекции «Компонены презентационные и компоненты-контейнеры».

В частности, эти принципы включают в себя:

• разделение компонентов на презентационные и контейнеры;
• размещение кода по принципу один компонент – одна папка;
• применение современных средств (styled-components, CSS Modules) для решения проблем с наследственностью CSS в больших проектах;
• применение Redux/Saga для упорядочения потока данных, упрощения выполнения асинхронных операций.

Кодирование, отладка, тестирование

Сборка предоставляет широкие возможности в содействии программисту в написании и отладке кода:

• JavaScript следующего поколения (строчные шаблоны, деструктуризация объектов, JSX синтаксис и др.);
• быстрая генерация компонентов/контейнеров/роутов вместе с их селекторами, сагами, редьюсерами и тестами посредством командной строки;
• «горячая замена» модулей, позволяющая без задержек видеть результаты изменений вносимых в код приложения;
• использование Webpack Dll Plugin, что улучшает на 40% время старта приложения на сервере и при «горячей перезагрузке» модулей;
• использование AppVeyor и TravisCI (установочные файлы включены по умолчанию), что позволяет автоматически запускать тесты приложения на Windows и Unix;
• статический анализ кода: ESLint, Prettier и stylelint автоматически проверяют и форматируют код в вашем редакторе(требуется настройка, конфигурационные файлы и инструкции прилагаются);
• размещение на облачных сервисах Heroku, AWS S3: (требуется настройка, инструкции прилагаются).

Командная строка

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

• инициализация нового проекта со 100% покрытием тестами;
• запуск приложения на сервере разработчика;
• генерация компонентов, контейнеров с их селекторами, сагами, редьюсерами и тестами;
• генерация «production» варианта кода проекта;
• тестирование проекта;
• удаленная отладка, позволяющая путем использования сервиса Ngrok предоставлять безопасный доступ к локальному серверу из сети Интернет;
• линтинг;
• управление переводами (добавление языков, экстракция сообщений в i18n JSON файлы);
• профилирование, хоть и упомянуто среди достоинств командной строки сборки, но, к сожалению, не обнаружено.

Есть что-то лишнее?

Если же вы решите, что какие-то модули вам не нужны, их можно удалить и сборка вам поможет своими инструкциями (здесь и тут).

Вам показалось, что чего-то не хватает?

Дополнительные возможности, предоставляемые сборкой:

• «offline-first», что означает, что однажды загруженное приложение работает в офлайн-режиме даже на устаревших браузерах;
• «native web app», означает, что при повторных посещениях приложения пользователь получит приглашение добавить иконку на домашний экран и приложение может быть использовано в точности как “нативное” приложение (но без ограничений накладываемыми магазинами приложений);
• поддержка поисковой оптимизации (управление head-тегами страницы) для поисковых серверов поддерживающих индексацию JavaScript контента;
• быстрая загрузка Web Font, позволяющая устранить задержку отображения страницы, связанную с задержкой загрузки шрифтов;
• оптимизация изображений посредством Webpack's image-loader.

Документация

Сборка хорошо документирована, и, например, содержит даже раздел по решению возможных проблем.

Обновления, баги

Проект регулярно обновляется, своевременно откликаясь на изменения в составляющих его модулях, (последнее обновление 26.06.2018), активно решает проблемы: например, на 11.08.2018 решено 1367 и 9 проблем находятся в процессе решения.

Итак?

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

И в заключение — послание от автора сборки Maximilian Stoiber и его команды:

“Если вам нужна крепкая, проверенная в боях основа для построения вашего следующего суперпродукта, и вы обладаете некоторым опытом работы с React, это идеальный вариант для вас!”