Embed Size (px)
Citation preview
Пуленепробиваемый фронтенд
Станислав Панферов
Рассказывает
Рассказывает Станислав Панферов
Специализация Tech Lead
Чем занимается Разработка фронта и бекенда
Сейчас работаю Альфа Лаборатория
До этого работал NPTV
Опыт Более 7 лет
2
План доклада
1. Когда нужна и когда не нужна типизация
2. Типизация компонент ReactJS
3. Типизация и Flux
4. Инструменты сборки
3
4
Когда плюсы не очевидны?
➔ У вас в команде 2 - 3 человека
➔ Вы удерживаете в голове весь код проекта и основные зависимости
➔ Вы больше пишете, чем читаете и изменяете
➔ Покрытие кода юнит-тестами превышает 80%
5
Когда нужна типизация?
➔ Команда из четырех и более человек
➔ Вы не можете удержать в голове весь код проекта
➔ Вы много рефакторите и читаете код
➔ Покрытие кода юнит-тестами менее 80%
6
Почему React легко типизировать?
➔ Понятные точки типизации (props и state)
➔ Нет строковых шаблонов, только JavaScript
➔ Стандартная обвязка: ES6 Classes + ES6 Modules
Typed state
Component
Typed props Typed callbacks
export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior,
this.props.size
);
return dom.a({className: cssClass}, this.props.children);
}
}
export var Link = React.createFactory(LinkClass);
7
export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior, // 'normal', 'large'
this.props.size // 'navigate', 'control'
);
return dom.a({className: cssClass}, this.props.children);
}
}
export var Link = React.createFactory(LinkClass);
8
9
Link({}) // behavior обязательный
Link({
size : 'big', // значение не из допустимого набора
behavior : 'cotrol' // значение написано с ошибкой
})
propTypes: {
size: React.PropTypes.oneOf([
'normal',
'large'
]),
behavior: React.PropTypes.oneOf([
'navigate',
'control'
]).isRequired
}
10
11
Минусы propTypes:
1. Проверки типов осуществляются в runtime
2. Невозможно выразить контракты на функции
3. Проверяются только в development окружении
4. Нельзя типизировать бизнес-логику
ReactJS ♡ TypeScript
12
1. Напишем типы для полей Props и State
2. Напишем интерфейсы для Props и State
3. Укажем типы в компоненте
export enum LinkSize {
Normal = <any>'normal',
Large = <any>'large'
}
export enum LinkBehavior {
Navigate = <any>'navigate',
Control = <any>'control'
}
13
Перечисления:
1. Документируют значения
2. Позволяют проверять значения из набора при компиляции
Типы для полей
export interface LinkProps extends React.HTMLAttributes {
size?: LinkSize;
behavior: LinkBehavior;
}
export interface LinkState { }
14
Интерфейсы:
1. Документируют структуру объектов.
2. Позволяют проверять структуру объектов при компиляции.
Интерфейсы для Props и State
export class LinkClass extends React.Component<LinkProps, LinkState> {
/* the same ... */
}
15
Типы в компоненте
16
Link({})
> Argument of type '{}' is not assignable to parameter of type '{ size?:
LinkSize; behavior: LinkBehavior; }'. Property 'behavior' is missing in type
'{}'.
Link({
size : LinkSize.Big,
behavior : LinkBehavior.Cotrol
})
> Property 'Big' does not exist on type 'typeof LinkSize'.
17
Выводы
➔ TypeScript позволяет типизировать компоненты
➔ Проверки осуществляются в compile time
➔ Типизировать не сложно
➔ Система типов позволяет проверять больше
18
JSX в разработке
#2673
А что с Flux?
19
➔ Используем канонический Flux от
➔ Пишем с расчетом на типизацию
20
export class Navigate extends Action {
constructor(public route: Route) { super() }
}
dispatcher.dispatch(new Navigate(route))
class AppStore extends Store {
dispatch(action: Action) {
if (action instanceof Navigate) { /* .. */ }
}
}
21
1. Action — общий интерфейс для всех событий.
2. События делаем классами.
3. В сторах используем instanceof для автоматического приведения типов.
Выводы
➔ TypeScript для UI и бизнес-логики
➔ Больше контекста и документации
➔ Быстрое обнаружение ошибок
➔ Чтение, отладка и рефакторинг — быстрее
➔ Интеграция с IDE
22
Инструментарий
23http://bit.ly/react_typescript
Спасибо!C вами был Станислав Панферов
24
