Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Пуленепробиваемый
фронтенд
Станислав Панферов
Рассказывает
Рассказывает Станислав Панферов
Специализация Tech Lead
Чем занимается Разработка фронта и бекенда
Сейчас раб...
План доклада
1. Когда нужна и когда не нужна типизация
2. Типизация компонент ReactJS
3. Типизация и Flux
4. Инструменты с...
4
Когда плюсы не очевидны?
➔ У вас в команде 2 - 3 человека
➔ Вы удерживаете в голове весь код проекта и
основные зависимо...
5
Когда нужна типизация?
➔ Команда из четырех и более человек
➔ Вы не можете удержать в голове весь код проекта
➔ Вы много...
6
Почему React легко типизировать?
➔ Понятные точки типизации (props и state)
➔ Нет строковых шаблонов, только JavaScript
...
export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior,
this.props.size
...
export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior, // 'normal', 'la...
9
Link({}) // behavior обязательный
Link({
size : 'big', // значение не из допустимого набора
behavior : 'cotrol' // значе...
propTypes: {
size: React.PropTypes.oneOf([
'normal',
'large'
]),
behavior: React.PropTypes.oneOf([
'navigate',
'control'
]...
11
Минусы propTypes:
1. Проверки типов осуществляются в runtime
2. Невозможно выразить контракты на функции
3. Проверяются...
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...
export interface LinkProps extends React.HTMLAttributes {
size?: LinkSize;
behavior: LinkBehavior;
}
export interface Link...
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; }'....
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(rou...
Выводы
➔ TypeScript для UI и бизнес-логики
➔ Больше контекста и документации
➔ Быстрое обнаружение ошибок
➔ Чтение, отладк...
Инструментарий
23
http://bit.ly/react_typescript
Спасибо!
C вами был Станислав Панферов
24
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
How to Make Awesome SlideShares: Tips & Tricks
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав Панферов, MoscowJS 21

Download to read offline

«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав Панферов, MoscowJS 21

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав Панферов, MoscowJS 21

  1. 1. Пуленепробиваемый фронтенд Станислав Панферов
  2. 2. Рассказывает Рассказывает Станислав Панферов Специализация Tech Lead Чем занимается Разработка фронта и бекенда Сейчас работаю Альфа Лаборатория До этого работал NPTV Опыт Более 7 лет 2
  3. 3. План доклада 1. Когда нужна и когда не нужна типизация 2. Типизация компонент ReactJS 3. Типизация и Flux 4. Инструменты сборки 3
  4. 4. 4 Когда плюсы не очевидны? ➔ У вас в команде 2 - 3 человека ➔ Вы удерживаете в голове весь код проекта и основные зависимости ➔ Вы больше пишете, чем читаете и изменяете ➔ Покрытие кода юнит-тестами превышает 80%
  5. 5. 5 Когда нужна типизация? ➔ Команда из четырех и более человек ➔ Вы не можете удержать в голове весь код проекта ➔ Вы много рефакторите и читаете код ➔ Покрытие кода юнит-тестами менее 80%
  6. 6. 6 Почему React легко типизировать? ➔ Понятные точки типизации (props и state) ➔ Нет строковых шаблонов, только JavaScript ➔ Стандартная обвязка: ES6 Classes + ES6 Modules Typed state Component Typed props Typed callbacks
  7. 7. 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
  8. 8. 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. 9. 9 Link({}) // behavior обязательный Link({ size : 'big', // значение не из допустимого набора behavior : 'cotrol' // значение написано с ошибкой })
  10. 10. propTypes: { size: React.PropTypes.oneOf([ 'normal', 'large' ]), behavior: React.PropTypes.oneOf([ 'navigate', 'control' ]).isRequired } 10
  11. 11. 11 Минусы propTypes: 1. Проверки типов осуществляются в runtime 2. Невозможно выразить контракты на функции 3. Проверяются только в development окружении 4. Нельзя типизировать бизнес-логику
  12. 12. ReactJS ♡ TypeScript 12 1. Напишем типы для полей Props и State 2. Напишем интерфейсы для Props и State 3. Укажем типы в компоненте
  13. 13. export enum LinkSize { Normal = <any>'normal', Large = <any>'large' } export enum LinkBehavior { Navigate = <any>'navigate', Control = <any>'control' } 13 Перечисления: 1. Документируют значения 2. Позволяют проверять значения из набора при компиляции Типы для полей
  14. 14. export interface LinkProps extends React.HTMLAttributes { size?: LinkSize; behavior: LinkBehavior; } export interface LinkState { } 14 Интерфейсы: 1. Документируют структуру объектов. 2. Позволяют проверять структуру объектов при компиляции. Интерфейсы для Props и State
  15. 15. export class LinkClass extends React.Component<LinkProps, LinkState> { /* the same ... */ } 15 Типы в компоненте
  16. 16. 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. 17. 17 Выводы ➔ TypeScript позволяет типизировать компоненты ➔ Проверки осуществляются в compile time ➔ Типизировать не сложно ➔ Система типов позволяет проверять больше
  18. 18. 18 JSX в разработке #2673
  19. 19. А что с Flux? 19
  20. 20. ➔ Используем канонический Flux от ➔ Пишем с расчетом на типизацию 20
  21. 21. 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 для автоматического приведения типов.
  22. 22. Выводы ➔ TypeScript для UI и бизнес-логики ➔ Больше контекста и документации ➔ Быстрое обнаружение ошибок ➔ Чтение, отладка и рефакторинг — быстрее ➔ Интеграция с IDE 22
  23. 23. Инструментарий 23 http://bit.ly/react_typescript
  24. 24. Спасибо! C вами был Станислав Панферов 24
  • ssuser4d010f

    Jun. 7, 2015
  • yaminyaylo

    Apr. 30, 2015

«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав Панферов, MoscowJS 21

Views

Total views

1,623

On Slideshare

0

From embeds

0

Number of embeds

113

Actions

Downloads

10

Shares

0

Comments

0

Likes

2

×