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

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
April 29, 2014

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

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

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

April 29, 2014
Tweet

Transcript

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

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

  3. None
  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);!
  13. None
  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/

  29. None