Бежим быстрее с react.js Максим Климишин Zakaz.ua ! ! @maxmaxmaxmax 

О себе • Нравятся JS и удобные интерфейсы 

No content

Очень коротко о react.js • Библиотека для создания UI • UI и только UI. Говорят, V в MVC • Виртуальное DOM дерево и быстрый diff-алгоритм • One way data flow - биндинг данных в одну сторону 

А нахера это нужно? • Разделение ответственности (Separation of concerns) - уменьшать связанность между модулями, увеличивать связность внутри модуля • Шаблоны плохо соотносятся с принципом SoC Please, stop the bullshit © John Legere, T-Mobile CEO 

Cohesion vs coupling Если Вы хотите, чтобы собака побежала, глупо командовать ее ногами, лучше отдать команду собаке, а она уже разберётся со своими ногами сама. 

Потому что можно так 

Или так 

Даже так 

Закон Деметры (Law of Demetra, LoD) • модуль должен обладать ограниченным знанием о других модулях: знать о модулях, которые имеют «непосредственное» отношение к этому модулю. • должен взаимодействовать только с известными ему модулями «друзьями», не взаимодействовать с незнакомцами. • обращаться только к непосредственным «друзьям». 

Таким образом экономим время 

Hello, John! /** @jsx React.DOM */! var HelloMessage = React.createClass({! render: function() {! return ;! }! });! ! React.renderComponent(! , mountNode);! 

No content

JSX или типа HTML внутри JS кода • Меньше файлов, проще удерживать контекст • Удобно для народа без понимания структуры приложения (дизайнеры, верстальщики) • Мы знаем HTML и оно тупо и понятно 

Синтетические события • React.js слушает события только с корневой ноды • Когда событие происходит, react.js ищет компонент, соответствующей ноде, которая сгенерировала событие 

• Работает идентично во всех браузерах • Нет проблем с bind/unbind событий • Возможность расширять (event plugins system) Чем хорошо 

Виртуальное DOM дерево • Virtual DOM - это объекты JS, которые описывают структуру UI • Реакт использует алгоритм, для нахождения минимального числа шагов модификаций DOM дерева в браузере 

Key for lists • Особый случай для списков - по умолчанию элементы списка ассоциируются последовательно • Для однозначного маппинга надо указывать ключ 

Rendering • Во время вызова setState реакт помечает его как “грязный” (dirty) и перестраивает виртуальное DOM дерево • На следующей итерации event loop-a происходит обновление 

Решаем сами, что рендерим • По желанию можно самостоятельно решать изменилось ли дерево boolean shouldComponentUpdate( object nextProps, object nextState) 

В скором будущем • Shadow DOM & x-tags • Поддержка SWG • sourceMaps for JSX • Анимация 

Интеграция с D3.js (Donut Chart) https://github.com/joymax/js-fw-days-2014 

Model & Controller • React.js занимается только уровнем представления, поэтому Backbone.js Angular.js … ! He's just a rock n' roll clown 

Сборка проекта (grunt) /*global module:false*/! module.exports = function(grunt) {! grunt.initConfig({ ! react: {! jsx: {! files: [! { expand: true, cwd: 'public/js',! src: [ '**/*.jsx' ], dest: 'public/js', ext: '.js'}! ]}},! watch: {! react: {! files: 'public/js/**/*.jsx',! tasks: ['react']! }}});! ! grunt.loadNpmTasks('grunt-contrib-watch');! grunt.loadNpmTasks('grunt-react');! ! grunt.registerTask('default', ['react']);! };! 

Чем хорошо для дела • Практически нет гемора для поддержки зоопарка браузеров • Быстрая и “не распухающая” разработка новых фич • Легко внедряется в существующий и работающий код • Легко ре-использовать компоненты • Сложно написать “говнокод” - помогает односторонний data flow 

Производительность Based on: http://vuejs.org/perf/ Backbone React Plain JS 0 10 20 30 40 Анимация 100 кружков, Chrome 34, ~ms на цикл 

Community #backbonejs #reactjs #angularjs 75K 150K 225K 300K Twitter, Facebook, Github 

Links ! facebook.github.io/react/ 

No content