Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Или так

Slide 9

Slide 9 text

Даже так

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Сборка проекта (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']);! };!

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Links ! facebook.github.io/react/

Slide 29

Slide 29 text

No content