Подходы и технологии в React Redux
•Download as PPTX, PDF•
1 like•271 views
Андрей Лазарев. Доклад «Подходы и технологии в React Redux»
Подходы и технологии в 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