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

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