Артем Тритяк, Lead Front-End developer в Electric Cloud

React.jsBackbone и FLUX

Артем Тритяк

• Построение сложного UI без боли

• Все просто - перерисовка всей страницы на любое изменение

• React.js сделает diff и внесет только изменения в DOM

Реакт? Что такое Реакт? Зачем Реакт?

JSX, Virtual DOM

Композиция элементов

Вложенные элементы

Вложенные элементы

Вложенные элементы

this.props.children

JSX -> JS compilerReact Rails

PyReact, Django React

Grunt.js React, Gulp.js React, React Tools

• SEO - не нужен phantom.js renderer для SPA

• Ускорение первой загрузки

• Подхватывание JS-bindings «на лету»

Server Side Rendering

Server Side Rendering: Node.js

Server Side Rendering: Node.js

https://github.com/artyomtrityak/react-server-render-node

Flux

Flux: one directional data flow

Сервер

Model.fetch

Model.destroy

Model.saveCollection.fetch

Model.parse

onClick onSelect

onChange …

Actions.actionName(params)8!

UserActions.createUser(…) UserActions.selectGroup(…) 1

2

3

Flux: Кто главный? React главный

1

2

3

4

Flux: Action -> WebUtils -> Dispatcher

12

3

Model

Model Eventschange

change:fieldName invalid

…

1

2

3

Flux: examples

https://github.com/facebook/flux/tree/master/examples

https://github.com/gaearon/flux-react-router-example

+Bonus

React Native

Facebook groups app

• JavaScript

• НЕ WebView

• НЕ браузер

• JavaScript логика в отдельном потоке, не блокирует Native UI

• JSX HTML -> Native platform elements

• Learn once, write everywhere

• Example: http://www.facebookgroups.com/

React Native

CSSBEM, MCSS…

!

SASS, Akella SASS :) LESS, STYLUS…

!

Пре-процессоры Пост-процессоры

Приоритет: #id .class <div> inline

Глобальный namespace использовать плохо, да?

CSS

Inline CSS, CSS in JS

• Все знают JavaScript

• Функции

• Переменные

• Scopes

• Минификация

• Наследование

Преимущества

Но это же…