Знакомьтесь: «все и сразу», React Boilerplate от Maximilian Stoiber v3.6.0

Сборка 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, это идеальный вариант для вас!”
Поделиться публикацией
Похожие публикации
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 17
    +4
    Эх, лучше сделали бы уже хороший Boilerplate с Mobx или вообще Boilerplate без менеджера состояний. Пихаемый всюду Redux уже порядком надоел(
    +1

    Хороший набор, но вот Enzyme я бы не включал, а заменил бы на react-testing-library. Поддержка Enzyme для React 16 так себе, да и в целом они сильно тормозят с новыми фичами.

      +1
      Хороший бойлерплэйт. Еще в нем очень радует работа с настройками Webpack. Можно задать общие для всех режимов работы, а также свои для каждого отдельного режима: dev, prod. Очень много npm-скриптов «из коробки»: сборка, линтинг, тестирование (+ покрытие в консоли и в html-формате), различные очистки и настройки. Для коммитов по умолчанию стоит режим предварительного линтинга. Информативная система логов сборки, показывающая, например, circular dependencies. Еще у проекта неплохая документация. Понятно, что можно все это собрать и по-отдельности, но тут оно уже есть и неплохо работает.
        –1
        Опять этот styled components. Когда весь мир из всех сил пытается отделить логику от отображения, тут же опять впаривается эта адская смесь, которая лишает возможностей по удобному тестированию и редизайну.
          +1
          styled components — средство преодоления проблемы глобальности стилей. Нет проблемы — не используйте. В больших проектах, да если они еще находятся в постоянном развитии, глобальность стилей может приводить к таким неприятностям, как коллизии селекторов и нежелательное каскадирование. Человечество, столкнувшись с этим, выработало противоядия разной степени кардинальности — препроцессоры ( Sass, Less и др.), методологию BEM (Block Element Modifier), ну и CSS Modules, и styled components. Отделение логики, даже в случае styled components от отображения сохраняется, хоть и становится более (сильно) локальным.
          Но какие-то глобальные стили тоже остаются. Конечно, не очень хорошо, что программисту приходится заниматься и версткой, и трудно определить, что оставить в глобальных стилях, а что перенести в компонент, но другого пока ничего не придумано.
            0
            Да я понимаю это. Но просто данное решение проблемы приводит к новым проблемам, в конечном итоге проблем становиться ну никак не меньше.
              0
              А расскажите, к каким проблемам приводит?

              Я сейчас к styled-components присматриваюсь, какие там подводные камни?
                0
                Здесь приведены интересные размышления на тему практического применения styled-components, о его достоинствах и недостатках
                  0
                  Недостатков там указано 4 штуки:

                  * Yet to be tested in the wild
                  * Built for React
                  * Super young
                  * Testing needs to be done via aria-labels or using classNames

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

                  Именно поэтому интересно, что думает AxisPod
                  0
                  Я заметил такие вещи:

                  1) конструкции из sass по типу «background-color: rgba(red, .5);» не работают (подозреваю многие другие «сахарные» sass-конструкции тоже)

                  2) плагин emmet для Sublime Text 3 не раскрывает сокращения, к примеру «w100» -> «width: 100px;» после нажатия Tab

                  3) Нет подсветки синтаксиса в Sublime Text 3

                  Но я конкретно тестил эти styled-components примерно год назад, и как не странно именно эти три пункта меня оттолкнули. Как сейчас обстоят дела с этим не знаю. Было бы здорово если б пофиксили.
                    0

                    1) Для таких ситуаций есть вспомогательная библиотека: https://github.com/styled-components/polished


                    2,3) это все же проблемы саблайма а не фреймворка. Активно развивающиеся редакторы (VSCode, Webstorm, например) таких проблем не имеют

            0
            Был у нас один проект на saga, в последующих проектах решили не использовать, да и в телеграмм чате @js_ru большинство не благоприятно отзывается о saga.
              0
              А в чем была «засада» с saga-ми, если не секрет?
              +2
              Напротив, с удовольствием открыл для себя redux-saga. Необыкновенно удобно писать асинхронный код с обработкой результатов вызовов сервисов (реконнекты, маршрутизация сообщений и оркестровка процессов). C использованием saga это решается очень элегантно и минималистично. Learning curve, конечно, поначалу крутоват, но потом необычайно удобно.

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

            Самое читаемое