class: center, middle
# React
## успешный синтез теории и практики
.meta[Alexander Solovyov, How Far Games]
.footer[UA Web Challenge, Nov 2013]
---
# В начале было СловоMVC
### И MVC было у Backbone
### И MVC был Backbone
--
# Но было ли это хорошо?
---
# Разделение интересов
- Уменьшить связанность (coupling, зв’язність)
- Увеличить связность (cohesion, пов’язаність)
---
# Связанность
Степень, в которой каждый программный модуль полагается на другие модули.
---
# Связность
Характеристика внутренней взаимосвязи между частями одного модуля.
---
# А что обычно?
- *Все разделено*
- На шаблоны
- И логику интерфейса
- Связанность - высокая
- И связность - тоже!
---
# Backbone
```javascript
Backbone.View.extend({
tagName: 'li',
events: {
'click .icon': 'open'
}
});
```
---
# Angular
```html
```
---
# MVC в JS прямо сейчас
- Разделение по технологиям, а не интересам
- Пытается решить, где твои интересы, за тебя
---
# FRP?
- Опиши отношения данных
- Расскажи, как построить UI на их основе
- Вуаля
---
# React
.center[]
---
# Компоненты
```javascript
var Root = React.createClass({
render: function() {
return {this.props.text}
;
}
});
React.renderComponent(
,
document.body);
```
---
# JSX
```
one
two
DOM.div({attr: "value"},
DOM.span(null, "one"),
DOM.span(null, "two")
);
```
---
# Как это работает
- Иерархия компонентов
- Односторонняя привязка данных
- Виртуальный DOM
---
# Иерархия компонентов
```
Item = React.createClass({
render: function() {
{this.props.text};
}});
List = React.createClass({
render: function() {
{this.props.list.map(function(x) {
return - ;
})}
}});
```
---
# Привязка данных
- render вызывается на каждом изменении данных, как на сервере
- Никаких магических биндингов
- Никаких проверок на "грязность"
- Всë декларативно
---
# Виртуальный DOM
- На каждое изменение обновляет граф объектов
- Применяет минимальные изменения к DOM'у
- Быстро
---
# Результат
- Быстро
- Удобно
- **Просто**
---
# Еще плюсы
- Можно рисовать на сервере (react-page)
- Можно рисовать в воркере (экспериментальное)
- Удобно использовать из ClojureScript (pump)
---
class: center, middle
# Спасибо за внимание!
### Не забудьте заценить http://reactjs.org/