Как бежать быстрее с react.js

Максим Климишин

Transcript

1. Бежим быстрее с react.js Максим Климишин Zakaz.ua ! ! @maxmaxmaxmax
2. О себе • Нравятся JS и удобные интерфейсы
4. Очень коротко о react.js • Библиотека для создания UI • UI и только UI. Говорят, V в MVC • Виртуальное DOM дерево и быстрый diff-алгоритм • One way data flow - биндинг данных в одну сторону
5. А нахера это нужно? • Разделение ответственности (Separation of concerns) - уменьшать связанность между модулями, увеличивать связность внутри модуля • Шаблоны плохо соотносятся с принципом SoC Please, stop the bullshit © John Legere, T-Mobile CEO
6. Cohesion vs coupling Если Вы хотите, чтобы собака побежала, глупо командовать ее ногами, лучше отдать команду собаке, а она уже разберётся со своими ногами сама.
7. Потому что можно так
8. Или так
9. Даже так
10. Закон Деметры (Law of Demetra, LoD) • модуль должен обладать ограниченным знанием о других модулях: знать о модулях, которые имеют «непосредственное» отношение к этому модулю. • должен взаимодействовать только с известными ему модулями «друзьями», не взаимодействовать с незнакомцами. • обращаться только к непосредственным «друзьям».
11. Таким образом экономим время
12. Hello, John! /** @jsx React.DOM */! var HelloMessage = React.createClass({! render: function() {! return <div>Hello {this.props.name}</div>;! }! });! ! React.renderComponent(! <HelloMessage name="John" />, mountNode);!
14. JSX или типа HTML внутри JS кода • Меньше файлов, проще удерживать контекст • Удобно для народа без понимания структуры приложения (дизайнеры, верстальщики) • Мы знаем HTML и оно тупо и понятно
15. Синтетические события • React.js слушает события только с корневой ноды • Когда событие происходит, react.js ищет компонент, соответствующей ноде, которая сгенерировала событие
16. • Работает идентично во всех браузерах • Нет проблем с bind/unbind событий • Возможность расширять (event plugins system) Чем хорошо
17. Виртуальное DOM дерево • Virtual DOM - это объекты JS, которые описывают структуру UI • Реакт использует алгоритм, для нахождения минимального числа шагов модификаций DOM дерева в браузере
18. Key for lists • Особый случай для списков - по умолчанию элементы списка ассоциируются последовательно • Для однозначного маппинга надо указывать ключ
19. Rendering • Во время вызова setState реакт помечает его как “грязный” (dirty) и перестраивает виртуальное DOM дерево • На следующей итерации event loop-a происходит обновление
20. Решаем сами, что рендерим • По желанию можно самостоятельно решать изменилось ли дерево boolean shouldComponentUpdate( object nextProps, object nextState)
21. В скором будущем • Shadow DOM & x-tags • Поддержка SWG • sourceMaps for JSX • Анимация
22. Интеграция с D3.js (Donut Chart) https://github.com/joymax/js-fw-days-2014
23. Model & Controller • React.js занимается только уровнем представления, поэтому Backbone.js Angular.js … ! He's just a rock n' roll clown
24. Сборка проекта (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']);! };!
25. Чем хорошо для дела • Практически нет гемора для поддержки зоопарка браузеров • Быстрая и “не распухающая” разработка новых фич • Легко внедряется в существующий и работающий код • Легко ре-использовать компоненты • Сложно написать “говнокод” - помогает односторонний data flow
26. Производительность Based on: http://vuejs.org/perf/ Backbone React Plain JS 0 10 20 30 40 Анимация 100 кружков, Chrome 34, ~ms на цикл
27. Community #backbonejs #reactjs #angularjs 75K 150K 225K 300K Twitter, Facebook, Github
28. Links ! facebook.github.io/react/