Your SlideShare is downloading. ×
LvivJS 2014 - Win-win c React.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LvivJS 2014 - Win-win c React.js

486

Published on

Почему с React.js бежать быстре, чем с другими на больших приложениях

Почему с React.js бежать быстре, чем с другими на больших приложениях

Published in: Software
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
486
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Win-win с react.js Максим Климишин ! CTO at Zakaz.ua ! ! @maxmaxmaxmax
  • 2. • Бегаю • Рублю дрова • Увлекаюсь политикой Обо мне
  • 3. React.js
  • 4. React.js JavaScript библиотека для создания UI (Wikipedia) ! ! Надо описать, как приложение должно выглядеть в любой момент времени и React.js автоматически будет управлять всеми обновлениями UI, если основные данные поменяются
  • 5. Что такое UI? UI – это интерактивная проекция состояния приложения
  • 6. React.js tree • Компоненты React.js реализованы в виде дерева • Есть Root Node, от которой все пляшет • Каждый компонент может содержать дочерние компоненты • В дочерние компоненты можно передавать состояние в виде аттрибутов • Дочерний компонент не может изменить props, которые были ему переданы из родительского компонента
  • 7. Виртуальное DOM дерево • Virtual DOM - это объекты JS, которые описывают структуру UI • Реакт использует алгоритм, для нахождения минимального числа шагов модификаций DOM дерева в браузере
  • 8. JSX • XML-похожий трансформер синтаксиса в JavaScript (React.DOM) ! • Визуализирует структуру DOM внутри React.js компонент ! • Помогает избежать избыточного кода на чистом JavaScript и повысить читаемость компонент
  • 9. Hello, John! /** @jsx React.DOM */! var HelloMessage = React.createClass({! render: function() {! return <div>Hello {this.props.name}</div>;! }! });! ! React.renderComponent(! <HelloMessage name="John" />, mountNode);!
  • 10. JSX to JS /** @jsx React.DOM */! var HelloMessage = React.createClass({displayName: 'HelloMessage',! render: function() {! return React.DOM.div(null, "Hello ", this.props.name);! }! });! ! React.renderComponent(! HelloMessage( {name:"John"} ), document.getElementById("hello"));!
  • 11. Rendering • Во время вызова setState реакт помечает его как “грязный” (dirty) и перестраивает виртуальное DOM дерево • На следующей итерации event loop-a происходит обновление
  • 12. Diff алгоритмы и массивы • Особый случай для списков - по умолчанию элементы списка ассоциировались последовательно • Для однозначного маппинга между элементом списка и компонентой React.js необходимо указывать ключ
  • 13. Решаем сами, что рендерим • По желанию можно самостоятельно решать изменилось ли дерево boolean shouldComponentUpdate( object nextProps, object nextState)
  • 14. Синтетические события • React.js слушает события только с корневой ноды • Когда событие происходит, react.js ищет компонент, соответствующей ноде, которая сгенерировала событие • Дальше React.js оборачивает событие в SyntheticEvent • И это дело работает совершенно одинаково во всех поддерживаемых браузерах
  • 15. Работа с CSS • Поначалу в React.js было неудобно работать с классами CSS <div className=“class-a class-b class-c class-d class-e class-f class-…> </div> • Но появился classSet и жизнь наладилась
  • 16. classSet { render: function() { var cx = React.addons.classSet; var classes = cx({ 'message': true, 'message-important': this.props.isImportant, 'message-read': this.props.isRead }); // same final string, but much cleaner return ( <div className={classes}>Great, I'll be there.</div> ) } }
  • 17. Рутинное телодвижение кажется сложным var NoLink = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return <input type="text" value={value} onChange={this.handleChange} />; } });
  • 18. Two way data binding • Angular и Ember разбаловал некоторых разработчиков в плане two-way data binding. ! • Но пацанчики из facebook оказались ровными и сделали linkState …
  • 19. Two way data binding var WithLink = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return {value: 'Hello!'}; }, render: function() { return <input type="text" valueLink={this.linkState('value')} />; } });
  • 20. Чем хорошо для дела • Практически нет гемора для поддержки зоопарка браузеров • Быстрая и “не распухающая” разработка новых фич • Легко внедряется в существующий и работающий код • Легко ре-использовать компоненты • Сложно написать “говнокод” - помогает односторонний data flow
  • 21. Производительность Based on: http://vuejs.org/perf/ Backbone React Plain JS 0 10 20 30 40 Анимация 100 кружков, Chrome 34, ~ms на цикл
  • 22. Model & Controller React.js занимается только уровнем представления
  • 23. А что насчет приложений?
  • 24. Flux
  • 25. Flux - это архитектура/design pattern приложений для Rect.js, которая использует однонаправленный поток данных
  • 26. Идея архитектуры Flux
  • 27. Что внутри Flux? • По сути Flux - design pattern, уникальная тулза - Dispatcher • В экземпляр диспетчера региструются колебли, присваивается уникальный ID • Диспетчеру можно послать некоторое событие (dispatcher.dispatch) • Внутри коллбека можно объявить зависимость от выполнения другого (dispatcher.waitFor) • Коллбеки будут выполнены согласно описанным зависимостям
  • 28. Какую проблемы решает Flux? • Мультинаправленное движение данных внутри приложения • Структурную организацию React.js- based приложений • Избыточный инструментарий, которые приезжает с хранилищами из других подходов • Структурирование зависимостей хэндлеров событий
  • 29. Bidirectional data flow Button 1 Button 2 Input 1 Input 2 Result area 1 Result area 2 Handler 3 API Endpoint 1 API Endpoint 2 API Endpoint 3 Handler 2 Handler 1 Handler 4 Среднесложное приложение на jQuery
  • 30. Bidirectional data flow Action View 1 View 2 View 3 State Action State State State
  • 31. Flux Dispatcher var base = new Dispatcher(); var v1 = {"country": null}, v2 = {"city": null}, v3 = {"price": null}; ! v1.dispatchToken = base.register(function (payload) { console.log("v1 handler"); if (payload.actionType == "update-v1") v1.country = payload.country; console.log(v1.country, v2.city, v3.price); }); !
  • 32. Flux Dispatcher v2.dispatchToken = base.register(function (payload) { console.log("v2 handler"); if (payload.actionType === "update-v1") { base.waitFor([v1.dispatchToken]); v2.city = payload.country + " - related data to v2"; } console.log(v1.country, v2.city, v3.price); }); ! base.register(function (payload) { console.log("v3 handler"); if (payload.actionType === "update-v2") { base.waitFor([v1.dispatchToken, v2.dispatchToken]); v2.city = payload.city; v3.price = 123; } console.log(v1.country, v2.city, v3.price); });
  • 33. Flux Dispatcher ! document.getElementById("dispatch").addEventListener("click", function () { base.dispatch({ actionType: "update-v1", country: 'ukraine' }); base.dispatch({ actionType: "update-v2", city: "kiev"}); });
  • 34. Результат v1 handler ukraine kiev 123 v2 handler ukraine ukraine - related data to v2 123 v3 handler ukraine ukraine - related data to v2 123 ! v1 handler ukraine ukraine - related data to v2 123 v2 handler ukraine ukraine - related data to v2 123 v3 handler ukraine kiev 123
  • 35. А нахера это нужно? Разделение ответственности (Separation of concerns) - уменьшать связанность между модулями, увеличивать связность внутри модуля Please, stop the bullshit © John Legere, T-Mobile CEO
  • 36. Coupling vs cohesion? • Связанность плоха тем, что она мешает менять компоненты независимо от общего кода • Разработчику необходимо понимать как работает вся система для того, чтобы безопасно внести изменения • Изменения требований потенциально влечет рефакторинг нескольких компонент • Стоимость изменений выше
  • 37. Спасибо за горячую воду, Львов!
  • 38. Спасибо! ! facebook.github.io/react/ ! facebook.github.io/flux/

×