react-flux-fluent-2015

Transcript

1. React + Flux Two Great Tastes that Taste Great Together Bill Fisher @fisherwebdev #ReactJS
2. https://speakerdeck.com/fisherwebdev/react-flux-fluent-2015 bit.ly/1Hrqfpc
3. React https://speakerdeck.com/fisherwebdev/react-flux-fluent-2015 Flux +
4. https://speakerdeck.com/fisherwebdev/react-flux-fluent-2015
5. https://speakerdeck.com/fisherwebdev/react-flux-fluent-2015
6. Model Model Model Model
7. Model Model Model Model
8. Model Model Model Model
9. Model Model Model Model
10. Model Model Model Model
14. "Tangled wires, Freegeek, Portland, Oregon, USA" by Cory Doctorow, used under CC BY 2.0\
15. "Spaghetti? Yum!" by Dan McKay, used under CC BY 2.0
16. Dispatcher Action Store View
17. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! actions   └──  MessageActionCreators.js AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js Dispatcher Action Store View
18. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! actions   └──  MessageActionCreators.js AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js Dispatcher Action Store View
19. actions   └──  MessageActionCreators.js Action Actions & Action Creators
20. Actions & Action Creators Actions: an object with a type property and new data, like events Action creators: semantic methods that create actions collected together in a module to become an API
21. "A copy of the San Francisco Chronicle from when the Apollo 11 mission made it to the moon." by zpeckler, used under CC BY 2.0
22. //  MessageActionCreators.js   ! var  AppDispatcher  =  require('../AppDispatcher');   var  AppConstants  =  require('../AppConstants');   ! var  ActionTypes  =  Constants.ActionTypes;   ! module.exports  =  {   !     ! ! ! ! ! ! }; messageCreated:  text  =>  {      AppDispatcher.dispatch({          type:  ActionTypes.MESSAGE_CREATED,          text      });   },
23. messageCreated:  text  =>  {      AppDispatcher.dispatch({          type:  ActionTypes.MESSAGE_CREATED,          text      });   },
24.    messageCreated:  text  =>  {          AppDispatcher.dispatch({              type:  ActionTypes.MESSAGE_CREATED,              text          });      }
25. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! actions   └──  MessageActionCreators.js AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js Dispatcher Action Store View
26. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! AppDispatcher.js Dispatcher Action Store View stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js actions   └──  MessageActionCreators.js
27. AppDispatcher.js Dispatcher The Dispatcher
28. The Dispatcher "Sunset at Sutro" by ohad*, used under CC BY 2.0
29. Dispatcher Action Store View
30. Available through npm or Bower as flux A singleton registry of callbacks, similar to EventEmitter dispatch(action): invokes all callbacks, provides action Primary API: dispatch(), register(), waitFor() The Dispatcher
31. waitFor() is a distinctive feature, vital for derived state Cannot dispatch within a dispatch Each dispatch is a discrete moment of change The Dispatcher
32. //  AppDispatcher.js   ! var  Dispatcher  =  require('Flux.Dispatcher');   ! //  export  singleton   module.exports  =  new  Dispatcher();
33. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! actions   └──  MessageActionCreators.js AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js Dispatcher Action Store View
34. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js Dispatcher Action Store View actions   └──  MessageActionCreators.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js
35. Stores Store stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js
36. Stores Courtesey of The Bancroft Library, UC Berkeley BANC PIC 1905.17500 v.10:141--ALB
37. Stores Each store is a singleton The locus of control within the application Manages application state for a logical domain Private variables hold the application data Numerous collections or values can be held in a store
38. Stores Register a callback with the dispatcher Callback is the only way data gets into the store No setters, only getters: a universe unto itself Emits an event when state has changed
39. //  MessageStore.js   ! var  _dispatchToken;   var  _messages  =  {};   ! class  MessageStore  extends  EventEmitter  {   !    constructor()  {          super();          _dispatchToken  =  AppDispatcher.register(action  =>  {   !            switch(action.type)  {   !                case  ActionTypes.MESSAGE_CREATE:                      var  message  =  {                          id:  Date.now(),                          text:  action.text                      }                      _messages[message.id]  =  message;                      this.emit('change');                      break;   !                case  ActionTypes.MESSAGE_DELETE:                      delete  _messages[action.messageID];                      this.emit('change');                      break;   !                default:                      //  no  op              }   !        });      }   !    getDispatchToken()  {          return  _dispatchToken;      }   !    getMessages()  {          return  _messages;      }   ! }   ! module.exports  =  new  MessageStore();          _dispatchToken  =  AppDispatcher.register(action  =>  {   !            switch(action.type)  {   !                case  ActionTypes.MESSAGE_CREATED:                      var  message  =  {                          id:  Date.now(),                          text:  action.text                      }                      _messages[message.id]  =  message;                      this.emit('change');                      break;   !                case  ActionTypes.MESSAGE_DELETED:                      delete  _messages[action.messageID];                      this.emit('change');                      break;   !                default:                      //  no  op              }   !        });  
40.        _dispatchToken  =  AppDispatcher.register(action  =>  {   !            switch(action.type)  {   !                case  ActionTypes.MESSAGE_CREATED:                      var  message  =  {                          id:  Date.now(),                          text:  action.text                      }                      _messages[message.id]  =  message;                      this.emit('change');                      break;   !                case  ActionTypes.MESSAGE_DELETED:                      delete  _messages[action.messageID];                      this.emit('change');                      break;   !                default:                      //  no  op              }   !        });  
41. Dispatcher Action Store View js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! actions   └──  MessageActionCreators.js AppDispatcher.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js
42. js   ├──   │   ├──  AppBootstrap.js   ├──  AppConstants.js   ├──   ├──   │   │   │   ├──  utils   │      ├──  AppWebAPIUtils.js   │      ├──  FooUtils.js   │      └──  __tests__   │              ├──  AppWebAPIUtils-­‐test.js   │              └──  FooUtils-­‐test.js   └──     ! AppDispatcher.js views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js Dispatcher Action Store View actions   └──  MessageActionCreators.js stores   ├──  MessageStore.js   └──  __tests__          └──  MessageStore-­‐test.js
43. Views & “Controller” Views View views   ├──  MessageControllerView.react.js   └──  MessageListItem.react.js
44. Views & “Controller” Views Tree of React components Controller views are near the root, listen for change events On change, controller views query stores for new data With new data, they re-render themselves & children
46. React & the DOM Component-based framework for managing DOM updates Uses a “Virtual DOM”: data structure and diff algorithm Updates the DOM as efficiently as possible Huge performance boost Bonus: we can stop thinking about managing the DOM
47. React’s Paradigm Based on Functional-Reactive principles Unidirectional data flow Composability Predictable, Reliable, Testable Declarative: what the UI should look like, given props
48. Using React Data is provided through props Rendering is a function of this.props and this.state Keep components as stateless as possible “Re-render” (or not) on every state change or new props Component lifecycle and update cycle methods
49. var  MessagesControllerView  =  React.createClass({   !    getInitialState:  function()  {          return  {  messages:  MessageStore.getMessages()  };      },   !    componentDidMount:  function()  {          MessageStore.on('change',  this._onChange);      },   !    componentWillUnmount:  function()  {          MessageStore.removeListener('change',  this._onChange);      },   !    render:  function()  {          //  TODO      },   !    _onChange:  function()  {          this.setState({  messages:  MessageStore.getMessages()  });      }   ! }); //  MessagesControllerView.react.js  
50. var  MessagesControllerView  =  React.createClass({   !    getInitialState:  function()  {          return  {  messages:  MessageStore.getMessages()  };      },   !    componentDidMount:  function()  {          MessageStore.on('change',  this._onChange);      },   !    componentWillUnmount:  function()  {          MessageStore.removeListener('change',  this._onChange);      },   !                   !    _onChange:  function()  {          this.setState({  messages:  MessageStore.getMessages()  });      }   ! });    render:  function()  {          //  TODO      }, //  MessagesControllerView.react.js  
51. render:  function()  {      var  messageListItems  =  this.state.messages.map(message  =>  {          return  (              <MessageListItem                  key={message.id}                  messageID={message.id}                  text={message.text}              />          );      });      return  (          <ul>              {messageListItems}          </ul>      );   },
52. //  MessageListItem.react.js   ! var  MessageActionCreators  =  require('MessageActionCreators');   var  React  =  require('react');   ! var  MessageListItem  =  React.createClass({   !    propTypes  =  {          messageID:  React.PropTypes.number.isRequired,          text:  React.PropTypes.string.isRequired      },   !    render:  function()  {          return  (              <li  onClick={this._onClick}>                  {this.props.text}              </li>          );      },   !    _onClick:  function()  {          MessageActionCreators.messageDeleted(this.props.messageID);      }   ! });   ! module.exports  =  MessageListItem;
53. Dispatcher Action Store View messageDeleted:  messageID  =>  {      AppDispatcher.dispatch({          type:  ActionTypes.MESSAGE_DELETED,          messageID      });   } case  ActionTypes.MESSAGE_DELETED:      delete  _messages[action.messageID];      this.emit('change');      break;   _onChange:  function()  {      this.setState({            messages:  MessageStore.getMessages()        });   }
54. Initialization of the App Usually done in a bootstrap module Initializes stores with an action Renders the topmost React component
55. //  AppBootstrap.js   ! var  AppConstants  =  require('AppConstants');   var  AppDispatcher  =  require('AppDispatcher');   var  AppRoot  =  require('AppRoot.react');   var  React  =  require('React');   ! require('FriendStore');   require('LoggingStore');   require('MessageStore');   ! module.exports  =  (initialData,  elem)  =>  {      AppDispatcher.dispatch({          type:  AppConstants.ActionTypes.INITIALIZE,          initialData      });      React.render(<AppRoot  />,  elem);   };
56. Calling a Web API Use a WebAPIUtils module to encapsulate XHR work. Start requests directly in the Action Creators, or in the stores. Important: create a new action on success/error. Data must enter the system through an action.
57. Immutable Data Boost performance in React’s shouldComponentUpdate() React.addons.PureRenderMixin immutable-js: http://facebook.github.io/immutable-js/
58. More Flux Patterns LoggingStore Error handling with client ID / dirty bit Error handling with actions queue Resolving dependencies in the Controller-view
59. Anti-patterns Application state/logic in React components Getters in render() Public setters in stores & the setter mindset trap Props in getInitialState()
60. Flux Dataflow Programming CQRS Functional and FRP MVC Reactive
61. FLUX TOTALLY WORKS Dispatcher Action Store View
62. Thank You! https://speakerdeck.com/fisherwebdev/react-flux-fluent
63. Thank You! https://speakerdeck.com/fisherwebdev/react-flux-fluent-2015 http://facebook.github.io/immutable-js/ http://facebook.github.io/react/ http://facebook.github.io/jest/ http://facebook.github.io/flux/