Flux on Rails

Talk for RubyDay 2015 in Turin, about React, Flux and Ruby on Rails.

Transcript

1. Flux on Rails
2. @GregorioSetti Gregorio Setti Web Developer
4. MVC vs FLUX
5. Flux
6. Application architecture for building user interfaces
7. Application architecture for building user interfaces
8. Why?
16. Component?
 What is that?
18. MARKUP
19. LISTENERS
20. DATA
21. render()
23. MARKUP
25. <div className="cards-half"> <div className={cardClasses} ref="card"> <div className="card__front"> {badge} <MiniGallery items={pictures} /> <div className="card__body"> <div className="card__body__description"> <div clasName="card__body__description__avatar"> <img src={result.host_avatar.mini_thumb} className="img-responsive-height img-circle" alt="" /> </div> <div className="card__body__description__content"> <a className="card__body__description__content__title" href="#">{result.name}</a></div> <a className="card__body__description__content__category" href="#">{result.resource_type}</a> </div> </div> <div className="card__body__price"> <a className="btn-transparent-dark btn--full">{result.start_price}</a> </div> </div> </div> {cardBack} </div> </div>
26. LISTENERS
29. DATA
30. Component’s data:
 STATE + PROPS
31. State is MUTABLE Props are IMMUTABLE
32. hotel: {
 experiences: 3, image: ‘http://image.jpg',
 avatar: ‘http://avatar.jpg',
 name: ‘Bed & Breakfast […]’,
 category: ‘B&B’,
 price: ‘€ 82’
 }
33. How to give the hotel to the component?
34. PROPS
35. React.render(<HotelCard hotel={hotel} />, document.getElementById(“myDiv”));
36. propTypes: { hotel: ? }
37. propTypes: { hotel: React.PropTypes.shape({
 // OBJECT STRUCTURE HERE }) }
38. propTypes: { hotel: React.PropTypes.shape({
 experiences: 3, image: ‘http://image.jpg', avatar: ‘http://avatar.jpg',
 name: ‘Bed & Breakfast […]’,
 category: ‘B&B’,
 price: ‘€ 82’ }) }
39. propTypes: { hotel: React.PropTypes.shape({
 experiences: React.PropTypes.number, image: React.PropTypes.string, avatar: React.PropTypes.string,
 name: React.PropTypes.string,
 category: React.PropTypes.string,
 price: React.PropTypes.string }) }
40. RENDER TIME!
41. render: function() { var hotel = this.props.hotel; return (
 // …
 ) }
42. render: function() { var hotel = this.props.hotel; return (
 // JSX -> LOLWUT HTML IN JS? U MED BRO?
 ) }
43. JSX
44. <div>
 {var}
 </div>
45. render: function() { var hotel = this.props.hotel; return (
 <div className="cards-half"> <div className={cardClasses} ref="card"> <div className="card__front"> {badge} <MiniGallery items={pictures} /> <div className="card__body"> <div className="card__body__description"> <div clasName="card__body__description__avatar"> <img src={result.host_avatar.mini_thumb} className="img-responsive-height img-circle" alt="" /> </div> <div className="card__body__description__content"> <a className="card__body__description__content__title" href="#">{result.name}</a></div> <a className="card__body__description__content__category" href="#">{result.resource_type}</a> </div> </div> <div className="card__body__price"> <a className="btn-transparent-dark btn--full">{result.start_price}</a> </div> </div> </div> {cardBack} </div> </div> ) }
46. var HotelCard = React.createClass({ propTypes: { hotel: React.PropTypes.shape({ experiences: React.PropTypes.number, image: React.PropTypes.string, avatar: React.PropTypes.string, name: React.PropTypes.string, category: React.PropTypes.string, price: React.PropTypes.string }); }, render: function() { var hotel = this.props.hotel; return (
 <div className="cards-half"> <div className={cardClasses} ref="card"> <div className="card__front"> {badge} <MiniGallery items={pictures} /> <div className="card__body"> <div className="card__body__description"> <div clasName="card__body__description__avatar"> <img src={result.host_avatar.mini_thumb} className="img-responsive-height img-circle" alt="" /> </div> <div className="card__body__description__content"> <a className="card__body__description__content__title" href="#">{result.name}</a></div> <a className="card__body__description__content__category" href="#">{result.resource_type}</a> </div> </div> <div className="card__body__price"> <a className="btn-transparent-dark btn--full">{result.start_price}</a> </div> </div> </div> {cardBack} </div> </div> ) } });
49. Hotels List
50. var HotelsList = React.createClass({ getInitialState: function() { hotels: [] }, render: function() { var hotels = []; _.each(this.state.hotels, function(h) { hotels.push(<Card hotel={hotel} key={[“hotel”, hotel.name].join(“_”)}>) }); return ( <div className=“list”> {hotels} // JSX CAN RENDER ARRAYS </div> ) } }
51. hotels hotelsList ?
52. STORES to the rescue!
53. Stores contain the application state and logic. […] they manage the state of many objects.
55. Uhm…
 it’s some kind of BOOKING!
56. var hotels = [{…},{…},{…}] 
 var HotelBookingStore = assign({}, EventEmitter.prototype, {
 getHotels: function() {
 return hotels;
 }
 }
57. function getStateFromStores() { return { hotels: HotelBookingStore.getHotels() }; } var HotelsList = React.createClass({ getInitialState: function() { return getStateFromStores(); }, componentDidMount: function() { HotelBookingStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { HotelBookingStore.removeChangeListener(this._onChange); }, _onChange: function() { this.setState(getStateFromStores()); }, render: function() { var hotels = []; _.each(this.state.hotels, function(h) { hotels.push(<Card hotel={hotel} key={[“hotel”, hotel.name].join(“_”)}>) }); return ( <div className=“list”> {hotels} // JSX CAN RENDER ARRAYS </div> ) } }
58. FAILING TEST: 
 When the user changes dates, the hotels on list and map should update
59. The action that triggers the update is an input change
61. var BookingForm = React.createClass({ getInitialState: function() { checkin: today, checkout: tomorrow guests: 1 }, componentDidMount: function() { this.refs.checkin.getDOMNode().addEventListener('change', BookingActionsCreator.updateHotels); this.refs.checkout.getDOMNode().addEventListener('change', BookingActionsCreator.updateHotels); this.refs.guests.getDOMNode().addEventListener('change', BookingActionsCreator.updateHotels); }, componentWillUnmount: function() { this.refs.checkin.getDOMNode().removeEventListener('change', BookingActionsCreator.updateHotels); this.refs.checkout.getDOMNode().removeEventListener('change', BookingActionsCreator.updateHotels); this.refs.guests.getDOMNode().removeEventListener('change', BookingActionsCreator.updateHotels); }, render: function() { return ( <div> <input type="text" ref="checkin" value={this.state.checkin}> <input type="text" ref="checkout" value={this.state.checkout}> <input type="text" ref="guests" value={this.state.guests}> </div> ) } } INPUT ACTION
62. Lightweight JS objects
63. Actions are passed to each store through the dispatcher. One at a time.
64. var hotels = [{…},{…},{…}] 
 var HotelBookingStore = assign({}, EventEmitter.prototype, {
 getHotels: function() {
 return hotels;
 } fetchHotels: function(payload) { return $.getJSON(“/hotels”), payload, function(response) { hotels = response.hotels; }); }
 }
65. HotelBookingStore.dispatchToken = AppDispatcher.register(function(action) { switch(action.type) { case ActionTypes.UPDATE_HOTELS: HotelBookingStore.fetchHotels(action.data).done(function() { HotelBookingStore.emitChange(); }); break; default: // do nothing } });
66. When a store emits a change event, all components listening to that event can react.
67. Render time, AGAIN!
68. Components redraw themselves when their data change.
69. Superfast! Only diffs are redrawn.
70. View / Component Dispatcher Store View / Component Action
72. PASSING TEST: 
 When the user changes dates, the hotels on list and map should update
73. What about the map?
75. Same data Different view
76. FAILING TEST: When the user click on the card badge, the map should show only the hotel with the related experiences.
77. HotelCard component - listen for clicks on the badge - create and trigger the new action FOCUS_HOTEL HotelBookingStore - create getter for var focusHotel - store the hotel (id or any other reference) in var focusHotel - emit change event Map component - add the focusMarker key in the internal state - update the state with the new focusMarker on change event
78. PASSING TEST: When the user click on the card badge, the map should show only the hotel with the related experiences.
79. ?
82. Sprockets /assets/ |- javascripts/ |- landing.js |- application.js |- admin.js /client/ |- components/ |- myComponent.jsx |- anotherComponent.jsx |- stores/ |- awesomeStore.jsx |- omgStore.jsx |- actions/ |- awesomeActionCreators.js |- omgActionCreators.js
83. Multiple entry points
84. Faster page load
85. Faster dev cycle
86. Strongly opinionated.
 Fully configurable.
87. Server-side rendering?
88. gem ‘react_on_rails’
89. Webpack on Rails • Multiple entry points • Faster page load • Faster dev cycle • Strongly opinionated, but fully configurable • Server side rendering with react_on_rails gem
90. Convince your boss
91. High testability
93. Mock everything. By default.
94. Reusability
95. Huge community support
96. Plain JS
97. Up and running in no time
98. Convince your boss • High testability • Mock everything by default. • Reusability • Huge community support • Plain JS • Up and running in no time
100. Thank you!