Angular and React Tech Hangout

1. React Redux Starter Kit
VS
Create React App
Рекомендации по выбору React Boilerplate

2. Андрей Лазарев
Senior Front End Developer at Innovecs
○ 11 лет в разработке.
○ 8 лет в разработке программных продуктов.
○ Применял React Redux Starter Kit в 3-х проектах.
○ Применяю Create React App в 1-ом проекте

3. Введение
○ Решаемые проблемы.
○ Сравнение React Boilerplates
○ Совпадающие особенности RRSK и CRA.
○ Отличия между RRSK и CRA.
○ Как начать использовать.

4. Решаемые проблемы
○ Создание архитектуры
○ Настройка окружения и сценариев сборки.
○ Подключение библиотек, решений и технологий
○ Организация работы со стилями
○ Реализация тестов и анализа кода

5. Сравнение React Boilerplates
kriasoft/react-starter-kit
erikras/react-redux-universal-hot-example
davezuko/react-redux-starter-kit
react-boilerplate/react-boilerplate
facebookincubator/create-react-app

6. Сравнение React Boilerplates
Boilerplate Особенности
kriasoft/react-starter-kit Isomorphic web app
erikras/react-redux-universal-hot-example Redux, Ducks, Redux Form, NodeJS
davezuko/react-redux-starter-kit React, Plaine Routes
react-boilerplate/react-boilerplate Offline first, styled-components
facebookincubator/create-react-app No build configuration

7. Совпадающие особенности RRSK и CRA
○ React, Redux, React Router, Babel, ES6, ESLint, Yarn
○ Сценарии запуска приложения: Start, Build, Test + Lint (RRSK)
○ Настройка с помощью .ENV

8. Отличия между RRSK и CRA
RRSK
❏ Выше порог входа
❏ Необходимость конфигурирования
❏ Необходимо изучить архитектуру
❏ Полный доступ к Webpack
❏ SCSS, LESS, PostCSS, CSS Modules
❏ Webpack, ESLint, Babel, NPM config
CRA
❏ Не высокий порог входа
❏ Быстрый старт без настройки
❏ Минимум требований к архитектуре
❏ Отсутствие декораторов и алиасов
❏ Autoprefixer, SCSS конвертирует в CSS
❏ NPM config

9. Как начать использовать RRSK или CRA
○ Проведите анализ текущего проекта.
○ Определите почему не стоило использовать Boilerplate.
○ Определите, что можете улучшить, оптимизировать и автоматизировать
с помощью использования Boilerplate.
○ Попробуйте использовать Boilerplate в новом проекте.

10. Андрей Лазарев
Skype: lazarev911
andrii.lazariev@innovecs.com
http://lazarev.org.ua
Скачать