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