Андрей Лазарев. Доклад «Подходы и технологии в React Redux»

1. ПОДХОДЫ И ТЕХНОЛОГИИ
в React Redux
РЕКОМЕНДАЦИИ ПО ВЫБОРУ ТЕХНОЛОГИЙ И ПОДХОДОВ

2. Андрей Лазарев
Lead Software Engineer at
Innovecs
12 лет в разработке
10 лет в разработке программных
продуктов
3 года создания проектов на React
2

3. Введение
Что такое продукт
Решение задач
Подходы к созданию React проектов
Выбор технологий для React проекта
Советы по выбору
3 Innovecs. All rights reserved
2018

4. Что такое продукт
Продукт !== Код
Время и стоимость создания продукта
Инструменты производства
Технический долг
4 Innovecs. All rights reserved
2018
Продукт — произведение труда, законченный
результат некоторой деятельности

5. Решение задач
5
Сторонние технологии,
инструменты и модули
Подходы решения задач
в React / Redux

6. Подходы к
созданию
React
проектов
МОДУЛЬНАЯ СТРУКТУРА
УМНЫЕ И ГЛУПЫЕ КОМПОНЕНТЫ
СТРОГАЯ ТИПИЗАЦИЯ
REDUX
УТИНАЯ ТИПИЗАЦИЯ (DUCK)
ФУНКЦИЯ ВЫСШЕГО ПОРЯДКА (HOC)
6 Innovecs. All rights reserved
2018

7. Модульная структура
Модуль —
функционально
законченный фрагмент
программы.
Модульное
программирование —
это организация программы как
совокупности небольших
независимых блоков,
называемых модулями,
структура и поведение которых
подчиняются определенным
правилам.
7 Innovecs. All rights reserved
2018

8. Умные и глупые компоненты
8 Innovecs. All rights reserved
2018

9. Строгая типизация
Smart и Dump
компоненты
PropTypes
DefaultProp
s
ESDock
<Component {…props} />
_ { }
/
9 Innovecs. All rights reserved
2018

10. Использование Redux
Redux –
это инструмент
управления как
состоянием данных, так и
состоянием интерфейса.
Единственный
источник истины
Состояние
доступно только
для чтения
Изменения делаются
«чистыми» функциями
Innovecs. All rights reserved
2018
10

11. Утиная типизация (Duck)
Если это выглядит как утка,
плавает как утка и крякает как
утка, то это, возможно, и есть
утка
Группировка actionTypes,
actions, reducer
Необходимо использовать
export default функции reducer()
Необходимо экспортировать
action creater как функции
Необходимо использовать action types
в виде npm-module-or-app/reducer/
ACTION_TYPE
Можно экспортировать action types в
виде UPPER_SNAKE_CASE для
использования в внешних редюсерах
или переиспользования библиотеки
9

12. Функция Высшего Порядка (HOC)
- это функция которая может принимать в качестве аргументов другие
функции и/или возвращать функции.
class BirthdayPresents extends Components {}
export default compose(
connect(mapState, mapDispatch),
withUsers,
withBirthday,
withFetchPresents,
withToys,
withoutBlue,
withEmpty,
withStyles
)(BirthdayPresents);
12 Innovecs. All rights reserved
2018
Работы с данными, а не с JSX
Зависимость от порядка вызова
Зависимость аргументов от результатов
выполнения других HOC
Перезапись значений другими функциями

13. Выбор технологий
для React проекта
УСТАНОВКА И НАСТРОЙКА СБОРКИ ПРОЕКТА
Innovecs. All rights reserved
2018
BOILERPLATE
RECOMPOSE
REACT MATERIAL UI
13

14. Установка и
настройка
сборки
проекта
Установка пакетов с
помощью npm, Bower
Подключение jQuery
ииспользование
ES5
Сборка с помощью
Webpack, Gulp, Grunt
Использование Boilerplates
Настройка стилей
SASS/SCSS, LESS, JSS, inline
CSS
НЕ ДЕЛАЙТЕ ТАК!
14 Innovecs. All rights reserved
2018

15. Recompose
HOC – Higher-order components
Pure
shouldUpdate
Compose
renderNothing
15 Innovecs. All rights reserved
2018
export default compose(
connect(mapState, mapDispatch),
pure()
)(Component);

16. Material UI
ДОСТОИНСТВА НЕДОСТАТКИ
Начальная скорость разработки
Список компонентов
Иконочные шрифты
Интеграция в Redux Form
Серверный рендеринг
Сложность расширения
Сложность кастомизации
Inline стили
Использование px
Наличие багов
16 Innovecs. All rights reserved
2018

17. Советы по выбору
Проведите анализ
текущего проекта
Составьте список
проблем
Определите, что можете
улучшить, оптимизировать
Определите
приоритеты и
критерии оценки
Выберите
технологи
и
Начнит
е
проект
17 Innovecs. All rights reserved
2018

18. Андрей Лазарев
lazarev911
andrii.lazariev@innovecs.com
www.linkedin.com/in/andrey-lazarev
СКАЧАТЬ
Innovecs. All rights reserved
2018