Dot.net building scalable java script application using react and typescript, Влад Плотнік

Создание масштабируемого приложения
используя React и Typescript
Владислав Плотник
Владислав Плотник

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

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

Выбор стека технологий

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

JavaScript – обманчиво простой язык

JavaScript – обманчиво простой язык
 Функциональный стиль
 Вариативность функций
 Динамическая типизация

Dot.net building scalable java script application using react and typescript, Влад Плотнік

Статическая типизация
Плюсы:
 Улучшает читаемость кода
 Надежный рефакторинг кода
 Предоставляет лучше поддержу в IDE
 Раннее обнаружение ошибок в коде
Минусы:
 Необходимость учить новые конструкции языка
 Необходимость писать дополнительный код

JavaScript flavors
https://2018.stateofjs.com/javascript-flavors/overview/

TypeScript
 Расширяет возможности языка JavaScript
 Поддерживает новые стандарты ECMAScript
 Можно использовать вместе с существующим JavaScript кодом
 Удобные инструменты для отладки и рефакторинга
 Разрабатывается и поддерживается Microsoft

Flow
 Flow – это не компилятор языка, а статический анализатор кода
 Объявление простейших типов идентично TypeScript
 Имеет более тесную интеграцию с React
 Разрабатывается и поддерживается Facebook

Что же выбрать?
 TypeScript и Flow очень сильно влияют друг на друга
 Обе технологии поддерживают React
 Обе технологии включают разнообразные типы (объединение, пересечение и обобщение)
 Flow проще интегрировать с существующим JS кодом
 TypeScript имеет лучше интеграцию со сторонними библиотеками

Пример TypeScript кода

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

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

Модульная структура кода
Плюсы:
 Разделяет код приложения по функциональному признаку
 Улучшает читаемость кода
 Упрощает рефакторинг кода
Минусы:
 Требуется предварительная подготовка и анализ домена

Типизация состояния
Плюсы:
 Описывает данные, которыми оперирует приложение
 Упрощает поддержку кода и работу в команде
Минусы:
 Дополнительная работа по определению типов

Типизация actions и action creators
Плюсы:
 Использование констант для объявления actions
 Использование типа union позволяет избежать ошибок при создании recuder функций
 Существенно упрощается рефакторинг кода
Минусы:
 Дополнительная работа по определению типов

Композиция reducer функций
Плюсы:
 Каждый модуль определяет свое состояние
 Независимое управление различными доменами данных
Минусы:
 Дополнительная работа по объединению состояния всех модулей

Типизация компонентов
Плюсы:
 Улучшается читаемость кода
 Использование типов повышает удобство работы в команде
Минусы:
 Необходимость писать дополнительный код

Производительность приложения
 Измеряйте Render Times
 Используйте Production Build
 Избегайте лишних перерисовок компонентов
 React.PureComponent
 shouldComponentUpdate()

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

Спасибо за внимание!
Полезные ссылки:
 Код приложения 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

Dot.net building scalable java script application using react and typescript, Влад Плотнік

Recommended

More Related Content

What's hot (20)

Similar to Dot.net building scalable java script application using react and typescript, Влад Плотнік (20)

More from Sigma Software (20)

Dot.net building scalable java script application using react and typescript, Влад Плотнік