CodeFest 2018. Михаил Шатихин (СКБ Контур) — Как типизировать Redux-приложение на TypeScript или Flow

Посмотрите выступление Михаила: https://2018.codefest.ru/lecture/1313/

Расскажу о типизации приложений на TypeScript и Flow, сравню плюсы и минусы, упомяну об ограничениях Flow. Покажу, как добавить с нуля типы в Redux-приложение и получить максимум контроля над приложением. Расскажу, как типизация (интерфейсы) помогает автоматически документировать компоненты. Покажу, почему в типизированном приложении можно писать меньше тестов и из него полностью исчезают ошибки определённых классов — если компилируется, то просто работает. Раскрою негативную сторону: расскажу, насколько увеличивается время разработки и размер кодовой базы. Объясню, как типы помогают привлечь бэкендеров к разработке фронтенда.

Уровень
Фронтенд-разработчики, создающие приложения на React и Redux. Начальный и средний уровень.

Transcript

1. Как затипизировать 
 React-Redux приложение 
 на TS или Flow Михаил Шатихин Ведущий инженер-программист СКБ Контур
2. Обо мне В прошлом бэкендер Люблю ходить в горы Пишу типизированный фронтенд
3. Контур.Гособлако • Модульная учётная система • Цель — захватить мир рынок госов • Старт проекта — январь 2017 • Работа ведётся в сжатые ср@ки !3
4. Контур.Гособлако • Модульная учётная система • Цель — захватить мир рынок госов • Старт проекта — январь 2017 • 8 бэков и 1 фронтендер
5. Типизация на фронте
6. Хотели получить от типизации • Упростить внедрение новых бизнес фич • Ускорить отладку приложения • Сделать код надежнее • Избежать «детских» проблем JS !6
7. JS AWESOME Слабая типизация Прототипное наследование Метапрограммирование Лямбда выражения loose coupling
8. Но есть проблемы
9. Опечатки !9 case 'SEARCH_PAGE_UPDATE_RESLUTS' action.payload.qeury chengeQueryText()
10. Как узнать параметры событий? !10 onSearch(query) onSearch({ query }) onSearch(() => {...})
11. Какие параметры принимает функция? !11 // что прийдёт в options const onSearch = (options) => { ... }
12. Нет ли проблем после обновления пакета? !12 import Input from 'ui/Input'; <Input size="large" width={600} value={props.query} onUpdate={props.onUpdate} ... /> // поменялось имя свойства onUpdate → onChange
13. Нет IntelliSense
15. Сложно рефакторить код • Страшно вносить правки в большие проекты • Бесконечный Ctrl + R • Рассинхрон контрактов с бэкендом* !15
16. Решение
17. Использовать строгую типизацию ✓ Опечатки ✓ Неизвестные параметры событий ✓ Непредсказуемые входные параметры ✓ Проблемы после обновления npm пакетов ✓ Нет IntelliSense ✓ Сложно рефакторить код
18. Чем типизировать в 2К18 TS
19. • Компилятор • Нужно писать типы • Умеет в ES3, ES5, ES6 • Инструменты ООП и ФП • Экспериментальные фичи • Анализатор • Можно не писать типы • Создан для легаси кода Typescript Flow wsd.events/2018/02/03/pres/type-dive.pdf !19
20. Скачиваний Typescript / Flow 2017/18 npmtrends.com/typescript-vs-flow-bin !20 0 2 500 000 500 000
21. Typescript JS Typescript • Язык со статической типизацией • Динамично развивается c 2012 • Универсален в использовании • Понятнее для бэкендеров* !21
22. Джентльменский набор
23. Библиотека для построения интерфейса Kontur-UI библиотека компонентов Redux Реализация FLUX архитектуры Контейнер состояния Прост и предсказуем в работе React !23
24. Redux Flow Объекты действия {type, payload} События Новые данные !24 Действия Состояние Компоненты
25. “Есть один нюанс
26. Печально, когда нет типизации
27. Что в props? !27 const SearchPage = props => ( <SearchBar // что такое props.onSearch onSearch={props.onSearch} /> ... )
28. Что приходит в reducer? !28 const reducer = ( previousState, // ← что здесь action ) => { ... }
29. Что приходит в reducer? !29 const reducer = ( previousState, action // ← а здесь ) => { ... }
30. Текстовые константы action.type !30 const reducer = ( previousState, action ) => { // какие значения // может принимать action.type switch (action.type) { ... } }
31. Что будем делать? • Будем жить с этим • Напишием пачку тестов • Затипизируем !31
32. Затипизируем
33. Возьмём инструменты • TypeScript 2.8.1 • React 16.2.0 • Redux 4.0.0-beta.2 !33
34. Подготовим файлы • *.js → *.ts • *.jsx → *.tsx • добавим tsconfig.json • ts-loader !34 reactjs.org/docs/static-type-checking
35. Вуаля
37. Заберите это
38. Чуть-чуть теории о Typescript
39. Типы данных !39 const isDone: boolean; const query: string; const onSearch: (query: string) => void; const list: any[] = [1, true, 'free'];
40. Строковые типы !40 const size = 'small'; // какого типа size const size: string = 'small'; const size: 'small' = 'small'; const size: 'mini' = 'small'; //[ts] Type '"small"' is not assignable to type '"mini"'.
41. Псевдонимы типов !41 type Size = string; type SizeResolver = () => string; type SizeOrResolver = Size | SizeResolver; function getSize(s: SizeOrResolver): Size { return typeof s === "string" ? s : s(); }
42. Объединение типов !42 type Size = 'small' | 'medium' | 'big'; // const small: "small" | "medium" | "big" const small: Size = 'small';
43. Контракты !43 interface Action { type: string; payload: number; } const anyAction: Action = { type: 'ANY_ACTION', payload: 0 }
44. Дженерики !44 interface Action<T> { type: string; payload: T; } const numberAction: Action<number> = { type: 'NUMBER_ACTION', payload: 0 }
45. Redux4 прогнулся под Typescript !45 interface Action<T = any> { type: T; } type Reducer< S = any, A extends Action = AnyAction > = (state: S | undefined, action: A) => S;
46. План типизации !46 ПРИЛОЖЕН • events • props • type • payload • state • reducer • selectors КОМПОНЕНТЫ ДЕЙСТВИЯ СОСТОЯНИЕ
47. Компоненты
48. Типизируем props в компонентах !48 interface Props { query: string; onSearch: (options: SearchParams) => void; } const SearchPage: SFC<Props> = props => ( <SearchBar query={props.query} onSearch={props.onSearch} /> )
49. IntelliSense в компонентах
51. План типизации !51 ПРИЛОЖЕН • events • props • type • payload • state • reducer • selectors КОМПОНЕНТЫ ДЕЙСТВИЯ СОСТОЯНИЕ
52. Действия
53. Объект action по FSA github.com/acdlite/flux-standard-action !53 interface Action<Payload, Type> { readonly type: Type; payload: Payload; error: boolean; meta: any; }
54. ActionCreator версия без типизации !54 const searchRequest = (options) => ({ type: 'SEARCH_PAGE_REQUEST', payload: { ...options } })
55. Первое приближение с типами !55 interface SearchPayload { query: string; } type Search = Action<SearchPayload, 'SEARCH_REQUEST'>; const searchRequest = (options: SearchPayload): Search => ({ type: 'SEARCH_REQUEST', payload: { ...options } })
56. DRY
57. Функция помощник actionCreator !57 function actionCreator(Ctor) { return payload => new Ctor(payload); }
58. Функция помощник actionCreator !58 function actionCreator< T extends Action<any, string> >(Ctor: { new(payload: T['payload']): T }) { return (payload: T['payload']): T => new Ctor(payload); }
59. Функция помощник actionType !59 function actionType<Payload, Type>(type: Type) { return class implements Action<Payload, Type> { static readonly Type = type; public readonly type = type; constructor(public payload: Payload) { return { payload, type }; } }; }
60. ActionCreator после рефакторинга !60 class Search extends actionType< { query: string }, 'SEARCH_REQUEST' >('SEARCH_REQUEST') { } const search = actionCreator(Search);
61. Что получили • Конструктор действий ActionCreator • Определение типа action.payload и action.type !61
62. План типизации !62 ПРИЛОЖЕН • events • props • type • payload • state • reducer • selectors КОМПОНЕНТЫ ДЕЙСТВИЯ СОСТОЯНИЕ
63. Состояние
64. Типизируем state !64 interface State { readonly query: string; readonly searchResult: SearchResult; } const searchPageReducer = ( previousState: State, action: AppActions ): State => { ... }
65. Типизируем action !65 const searchPageReducer = ( previousState: State, action: AppActions ): State => { switch (action.type) { ... } };
66. Автокомплит типов действий
68. Получили вывод типа action.payload !68 const searchPageReducer = ( previousState: State, action: AppActions ): State => { switch (action.type) { const payload = action.payload; // (property) payload: SearchResult ... } }
69. Вывод типа action.payload
71. Типизируем селектор состояния !71 const getState = ( state: State, ownProps: OwnProps ): State => ({ ...state, ...ownProps });
72. Типизируем rootReducer !72 const rootReducer = combineReducers< AppState, AppActions >({ searchPageReducer, authReducer }); interface AppState { searchPageReducer: SearchPageState; authReducer: AuthState; } type AppActions = SearchPageActions | AuthActions;
73. Что получили • State всего приложения типизирован • Каждый reducer типизирован (state, action) • Автокомплит action.type в reducer • Вывод типа action.payload в reducer • Типизированные селекторы состояния !73
74. План типизации !74 ПРИЛОЖЕН • events • props • type • payload • state • reducer • selectors КОМПОНЕНТЫ ДЕЙСТВИЯ СОСТОЯНИЕ
75. Бонусы • не нужно тестировать component props • можно затипизировать css свойства • можно переиспользовать контракты с бэкенда !75
76. Автокомплит css классов
78. Синхронизация моделей DTO • Автогенерация контрактов с бэкенда (*.cs → *.d.ts) • Model.cs → interface Model { ... } Web API Client App !78 Models.d.ts JSON API
79. Model.cs → interface Model { ... } !79 public class AddressFullObjectM { public AddressM address { get; set; } public string postalCode { get; set; } public HouseM house { get; set; } public string building { get; set; } public string room { get; set; } } interface AddressFullObjectM { address: server.AddressM; building: string; house: server.HouseM; postalCode: string; room: string; }
80. “Сколько стоит?
81. Цена использования • Нужно разбираться в типах • Увеличится количество кода !81
82. Когда применять • Система часто изменяется • Требуется высокое качество и скорость разработки • В крупных и open source проектах Anders Hejlsberg@Build2016: Big JavaScript codebases tend to become "read-only". Создатель: Turbo Pascal, Delphi, C#, Typescript !82
83. Пишите типизированный фронтенд
84. t.me/@mshatikhin Q&A shatikhin@skbkontur.ru Ведущий инженер-программист СКБ Контур Михаил Шатихин