В начале было СловоMVC

И MVC было у Backbone

И MVC был Backbone

Разделение интересов

• Уменьшить связанность (coupling, зв’язність)
• Увеличить связность (cohesion, пов’язаність)

Связанность

Степень, в которой каждый программный модуль полагается на другие модули.

Связность

Характеристика внутренней взаимосвязи между частями одного модуля.

А что обычно?

• Все разделено
  • На шаблоны
  • И логику интерфейса
• Связанность - высокая
• И связность - тоже!

Backbone

Backbone.View.extend({
  tagName: 'li',
  events: {
    'click .icon': 'open'
  }
});

Angular

<ul>
  <li ng-repeat="todo in todos">
    {{todo.text}}
  </li>
</ul>

MVC в JS прямо сейчас

• Разделение по технологиям, а не интересам
• Пытается решить, где твои интересы, за тебя

FRP?

• Опиши отношения данных
• Расскажи, как построить UI на их основе
• Вуаля

React

Компоненты

var Root = React.createClass({
  render: function() {
    return <div>{this.props.text}</div>;
  }
});
React.renderComponent(
  <Root text="hello">,
  document.body);

JSX

<div attr="value">
  <span>one</span>
  <span>two</span>
</div>
DOM.div({attr: "value"},
  DOM.span(null, "one"),
  DOM.span(null, "two")
);

Как это работает

• Иерархия компонентов
• Односторонняя привязка данных
• Виртуальный DOM

Иерархия компонентов

Item = React.createClass({
  render: function() {
    <li>{this.props.text}</li>;
}});
List = React.createClass({
  render: function() {
    <ul>{this.props.list.map(function(x) {
      return <Item text={x}/>;
    })}</ul>
}});

Привязка данных

• render вызывается на каждом изменении данных, как на сервере
• Никаких магических биндингов
• Никаких проверок на "грязность"
• Всë декларативно

Виртуальный DOM

• На каждое изменение обновляет граф объектов
• Применяет минимальные изменения к DOM'у
• Быстро

Результат

• Быстро
• Удобно
• Просто

Еще плюсы

• Можно рисовать на сервере (react-page)
• Можно рисовать в воркере (экспериментальное)
• Удобно использовать из ClojureScript (pump)