Документ описывает процесс создания масштабируемого корпоративного javascript приложения с использованием технологий Angular, React и TypeScript. В нем изложены принципы работы с Redux для управления состоянием приложения, а также преимущества выбранного стека технологий, такие как простота добавления нового функционала и безопасность рефакторинга кода. В итоге команда успешно применила технологии, улучшив фокусировку на потребностях бизнеса и избежав технического долга.

1. Создаем масштабируемое корпоративное
JavaScript приложение
Владислав Плотник

2. Обо мне
 .NET Team Lead в Sigma Software
 Опыт построения веб приложений с помощью AngularJS и React
 Domain driven design и microservices architecture

3. Масштабируемое JavaScript приложение
Позволяет:
 Легко добавлять новый функционал
 Удобно взаимодействовать с общим кодом
 Повторно использовать код
 Безопасно рефакторить код
 Сократить время вхождения для новых разработчиков
 Просто тестировать код

4. Выбор стека технологий
 Цель разработки приложения
 Angular
 React

5. JavaScript – обманчиво простой язык
 Функциональное vs. объектно-ориентированное программирование
 Динамическая vs. статическая типизация

6. TypeScript – JavaScript, который масштабируется
 Любой JavaScript код = валидный TypeScript код
 Поддерживает новые стандарты ECMAScript
 Можно использовать вместе с существующим JavaScript кодом
 Строгая и статическая типизация
 Удобство разработки сравнимо с написанием C# кода

7. Пример React кода на TypeScript

8. Управление состоянием приложения

9. Redux – контейнер для управления состоянием

10. Основные понятия Redux
 Store – хранилище для состояния приложения в виде дерева объектов
 State – состояние приложение в определенный момент времени
 Actions – объекты с обязательным свойством type
 Action creators – небольшие функции, которые создают action объекты
 Reducers – функции, которые принимают action объекты и возвращают обновленное состояние

11. Создание приложения
1. Выбор структуры кода
2. Определение состояния приложения
3. Объявление actions и action creators
4. Создание компонентов

12. 1. Структура кода приложения
 Концептуальная
 Модульная

13. 2. Определение состояния приложения
 Каждый модуль управляет своим состоянием
 Объединяем состояние всех модулей
 Определяем общий reducer для всех модулей

14. 3. Объявление actions и action creators
 Используем константы для объявления actions
 Объединяем actions с помощью типа union
 Проверяем actions с помощью строгой типизации

15. 4. Создание компонентов
 Stateless компоненты
 Stateful компоненты
 Используем пересечение типов
 Подключаем компоненты к redux хранилищу

16. Достигнутый результат
По итогу нам удалось:
 Легко добавлять новый функционал 
 Удобно взаимодействовать с общим кодом 
 Повторно использовать код 
 Безопасно рефакторить код 
 Сократить время вхождения для новых разработчиков 
 Просто тестировать код 

17. Выводы
 Команда быстро изучила и успешно применяет выбранные технологии
 Стек технологий позволил масштабировать приложение после выпуска MVP версии
 Использование Redux сделало предсказуемым обновление состояния приложения
 Удобство разработки позволило лучше сфокусироваться на потребностях бизнеса
 Удалось избежать появления технического долга

18. Спасибо за внимание!
Полезные ссылки:
 Код приложения https://github.com/vladplotnik/realworld-react-redux-typescript
 TypeScript https://www.typescriptlang.org
 React https://reactjs.org
 Redux https://redux.js.org
Как со мной связаться:
Skype: vlad.plotnik
Email: vladyslav.plotnyk@sigma.software

19. We are hiring!
PROJECT TEAM:
 Team Lead/Architect
 4 Full Stack Developers
 Test Engineer
 Business Analyst
 Project Manager
TECHNOLOGIES WE USE:
 .NET Core
 React
 TypeScript
 Entity Framework
 RabbitMQ
As a Full Stack Developer, you will be a part of the team building a system automating IP data management.
2 MAJOR CHALLENGES
 complex logic that accounts many parameters, from client peculiarities to legal specifics of 200+ countries
 simple solutions for complex domain problems
SEND YOUR CV TO TEAM@SIGMA.SOFTWARE