![Page 1: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/1.jpg)
Frontend by Backend Developer
Андрей Захаров
![Page 2: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/2.jpg)
SenseНовый мобильный клиент для Альфа-Банка
Чат поддержки как в Рокетбанке
![Page 3: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/3.jpg)
![Page 4: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/4.jpg)
Backend● Python / Tornado (асинхронный фреймворк)● MongoDB● RabbitMQ (WebSocket)● ElasticSearch
![Page 5: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/5.jpg)
![Page 6: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/6.jpg)
https://github.com/rynclark/flux-getting-started
![Page 7: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/7.jpg)
https://github.com/facebook/flux/tree/master/examples/flux-chat
![Page 8: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/8.jpg)
![Page 9: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/9.jpg)
Какие были сложности● Туториалы устаревали на глазах● Большинство готовых компонентов — просто обертка над старой либой● Отложенное обновление данных, при запросах к серверу
![Page 10: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/10.jpg)
ВиджетХедер — компонент с текущим залогиненым юзером
Список сообщений и поле ввода такие же как у оператора
![Page 11: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/11.jpg)
Какие есть проблемы ● Данные хранятся в разных сторах● Cannot dispatch in the middle of a dispatch
![Page 12: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/12.jpg)
Что изменилось за год● Почти весь новый код на ES2015● Миксины для React-компонентов● Меньше умных компонентов со стейтом из сторов (все через props)● Переменные окружения задаются через контекст
![Page 13: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/13.jpg)
![Page 14: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/14.jpg)
DeployПриватный npm-репозиторий
npm set @magneta:registry http://npm.octoberry.ru
npm login --registry=http://npm.octoberry.ru --scope=@magneta
Username: admin
Password:
Email: (this IS public) [email protected]
npm install @magneta/workstation
![Page 15: FrontDays #2. Андрей Захаров, React.js в продакшене](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58775e881a28ab4e4f8b6291/html5/thumbnails/15.jpg)
Вопросы?