class: center, middle # React ## или как начать жить проще .meta[Alexander Solovyov, How Far Games] .footer[Frontend DevConf '14] --- # Начнëм с начала ## Как писать большие программы - Разделение ответственностей - Повышение связности .transparent[(cohesion)] - Уменьшение связанности .transparent[(coupling)] --- # Связанность Степень, в которой каждый программный модуль полагается на другие модули. > Знает ли `A` про `B`? --- # Связность Степень внутренней взаимосвязи между частями одного модуля. > Есть ли смысловая связь между `A.fn1` и `A.fn2`? --- # HTML vs JS - Отображение vs Логика отображения - Как показывать vs Что показывать - Связанность - высокая - И связность - тоже! --- # Нас всю жизнь обманывали! - Нужно решать самому, у кого какая ответственность - Логика отображения неотрывна от его описания --- class: center, middle # Шаблоны — это разделение .highlight[технологий], а не ответственностей. --- # Компоненты - Иерархические - Высокая связность - Простой протокол, поощряющий низкую связанность - Легко переиспользовать - Легко компоновать --- # Пример ```javascript var Text = React.createClass({ render: function() { return React.DOM.p( nil, this.props.text); } }); var Root = React.createClass({ render: function() { return Text({text: "hello"}); } }); ``` --- # Как же верстальщики? ```javascript var Text = React.createClass({ render: function() { return
{this.props.text}
} }); var Root = React.createClass({ render: function() { return