flux-applicative

Transcript

1. React and Flux
   Building Applications with a Unidirectional Data Flow
   

   View Slide

2. Building Applications with a Unidirectional Data Flow
   React and Flux
   Bill Fisher
   @fisherwebdev
   

   View Slide

3. React and Flux
   Bill Fisher
   @fisherwebdev
   http://facebook.github.io/flux/
   http://facebook.github.io/react/
   https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

4. Bill Fisher
   @fisherwebdev
   #reactjs #fluxjs
   http://facebook.github.io/flux/
   http://facebook.github.io/react/
   https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

5. https://speakerdeck.com/fisherwebdev/flux-applicative
   React and Flux
   

   View Slide

6. https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

7. https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

8. "Couch" by Brian Teutsch, used under CC BY 2.0 / Modified from original
   https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

9. "Couch" by Brian Teutsch, used under CC BY 2.0 / Modified from original
   https://speakerdeck.com/fisherwebdev/flux-applicative
   

   View Slide

10. Model
    Model
    Model
    Model
    

    View Slide

11. Model
    Model
    Model
    Model
    

    View Slide

12. Model
    Model
    Model
    Model
    

    View Slide

13. Model
    Model
    Model
    Model
    

    View Slide

14. Model
    Model
    Model
    Model
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. "Tangled wires, Freegeek, Portland, Oregon, USA" by Cory Doctorow, used under CC BY 2.0\
    

    View Slide

19. "Spaghetti? Yum!" by Dan McKay, used under CC BY 2.0
    

    View Slide

20. Dispatcher
    Action
    Store
    View
    

    View Slide

21. "Couch" by Brian Teutsch, used under CC BY 2.0 / Modified from original
    

    View Slide

22. THE PLAN
    Anatomy of a React + Flux Application
    Actions & Action Creators
    The Dispatcher
    Stores + Testing
    Views, Controller-views and React
    Initialization, Interacting with a Web API, Immutable Data,
    Patterns & Anti-Patterns
    

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

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
    

    View Slide

26. actions  
    └──  MessageActionCreators.js
    Action
    ACTIONS & ACTION CREATORS
    

    View Slide

27. ACTIONS & ACTION CREATORS
    Actions:
    an object with a type property and new data
    Action creators:
    semantic methods that create actions
    collected together in a module to become an API
    

    View Slide

28. //  MessageActionCreators.js  
    !
    var  AppDispatcher  =  require('../AppDispatcher');  
    var  AppConstants  =  require('../AppConstants');  
    !
    var  ActionTypes  =  Constants.ActionTypes;  
    !
    module.exports  =  {  
    !
       createMessage:  text  =>  {  
           AppDispatcher.dispatch({  
               type:  ActionTypes.MESSAGE_CREATE,  
               text  
           });  
       }  
    !
    };
    

    View Slide

29.    createMessage:  text  =>  {  
           AppDispatcher.dispatch({  
               type:  ActionTypes.MESSAGE_CREATE,  
               text  
           });  
       }
    

    View Slide

30.    createMessage:  text  =>  {  
           AppDispatcher.dispatch({  
               type:  ActionTypes.MESSAGE_CREATE,  
               text  
           });  
       }
    

    View Slide

31.    createMessage:  text  =>  {  
           AppDispatcher.dispatch({  
               type:  ActionTypes.MESSAGE_CREATE,  
               text  
           });  
       }
    

    View Slide

32. 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
    

    View Slide

33. 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
    

    View Slide

34. THE DISPATCHER
    AppDispatcher.js
    Dispatcher
    

    View Slide

35. THE DISPATCHER
    Essentially a registry of callbacks
    To dispatch, it invokes all the callbacks with a payload
    Flux dispatcher is a singleton; payload is an action
    Primary API: dispatch(), register(), waitFor()
    Base class is available through npm or Bower.
    

    View Slide

36. //  AppDispatcher.js  
    !
    var  Dispatcher  =  require('Flux.Dispatcher');  
    !
    //  export  singleton  
    module.exports  =  new  Dispatcher();
    

    View Slide

37. 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
    

    View Slide

38. 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
    

    View Slide

39. Store
    stores  
    ├──  MessageStore.js  
    └──  __tests__  
           └──  MessageStore-­‐test.js
    STORES
    

    View Slide

40. 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
    

    View Slide

41. 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
    

    View Slide

42. //  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_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  
               }  
    !
           });  
    

    View Slide

43.        _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  
               }  
    !
           });  
    

    View Slide

44. TESTING STORES WITH JEST
    Stores have no setters — how to test is not obvious
    Jest is Facebook’s auto-mocking test framework
    Built on top of Jasmine
    http://facebook.github.io/jest/
    

    View Slide

45. callback  =  AppDispatcher.register.mock.calls[0][0];  
    

    View Slide

46. jest.dontMock('MessageStore');  
    !
    var  AppConstants  =  require('AppConstants');  
    !
    var  ActionTypes  =  AppConstants.ActionTypes;  
    !
    describe('MessageStore',  function()  {  
    !
       var  callback;  
    !
       beforeEach(function()  {  
           AppDispatcher  =  require('AppDispatcher');  
           MessageStore  =  require('MessageStore');  
           callback  =  AppDispatcher.register.mock.calls[0][0];  
       });  
    !
       it('can  create  messages',  function()  {  
           callback({  
               type:  ActionTypes.MESSAGE_CREATE,  
               text:  'test'  
           });  
           var  messages  =  MessageStore.getMessages();  
           var  firstKey  =  Objects.keys(messages)[0];  
           expect(MessageStore.getMessages()[firstKey].text).toBe('test');  
       });  
    !
    });  
    callback  =  AppDispatcher.register.mock.calls[0][0];  
    

    View Slide

47. 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
    

    View Slide

48. 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
    

    View Slide

49. View
    VIEWS & CONTROLLER VIEWS
    views  
    ├──  MessageControllerView.react.js  
    └──  MessageListItem.react.js
    

    View Slide

50. 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
    

    View Slide

51. REACT
    

    View Slide

52. REACT AND THE DOM
    Component-based system for managing DOM updates
    Uses a “Virtual DOM”: data structure and algorithm
    Updates the DOM as efficiently as possible
    Huge performance boost
    Bonus: we can stop thinking about managing the DOM
    

    View Slide

53. REACT’S PARADIGM
    Based on Functional-Reactive principles
    Unidirectional data flow
    Composability
    Predictable, Reliable, Testable
    Declarative: what the UI should look like, given props
    

    View Slide

54. USING REACT
    Data is provided through props
    Rendering is a function of this.props and this.state
    “Re-render” (or not) on every state change
    Keep components as stateless as possible
    Component lifecycle and update cycle methods
    

    View Slide

55. getDefaultProps()  
    getInitialState()  
    componentWillMount()  
    render()
    componentWillReceiveProps()*  
    shouldComponentUpdate()  
    componentWillUpdate()  
    render()
    DOM  Mutations  Complete
    componentDidMount() componentDidUpdate()
    componentWillUnmount()
    Lifecycle:    
    Mounting  and  Unmounting
    Update:    
    New  Props  or  State
    *Called  only  with  new  props
    

    View Slide

56. getDefaultProps()  
    getInitialState()  
    componentWillMount()  
    render()
    componentWillReceiveProps()*  
    shouldComponentUpdate()  
    componentWillUpdate()  
    render()
    DOM  Mutations  Complete
    componentDidMount() componentDidUpdate()
    componentWillUnmount()
    Lifecycle:    
    Mounting  and  Unmounting
    Update:    
    New  Props  or  State
    *Called  only  with  new  props
    

    View Slide

57. !
    !
    var  React  =  require('react');  
    !
    !
    !
    !
    !
    !
    !
    !
    !
    module.exports  =  MessagesControllerView;
    //  MessagesControllerView.react.js  
    var  MessagesControllerView  =  React.createClass({  
    !
       render:  function()  {  
           //  TODO  
       }  
    !
    });
    

    View Slide

58. //  MessagesControllerView.react.js  
    var  MessagesControllerView  =  React.createClass({  
    !
       render:  function()  {  
           //  TODO  
       }  
    !
    });
    

    View Slide

59. var  MessagesControllerView  =  React.createClass({  
    !
       componentDidMount:  function()  {  
           MessageStore.on('change',  this._onChange);  
       },  
    !
       componentWillUnmount:  function()  {  
           MessageStore.removeListener('change',  this._onChange);  
       },  
    !
       render:  function()  {  
           //  TODO  
       }  
    !
    });
    //  MessagesControllerView.react.js  
    

    View Slide

60. 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  
    

    View Slide

61. 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  
    

    View Slide

62.    render:  function()  {  
           //  TODO  
       },
    

    View Slide

63. render:  function()  {  
       return  (  
             
             
       );  
    },
    

    View Slide

64. render:  function()  {  
       var  messageListItems  =  [];  
       return  (  
             
               {messageListItems}  
             
       );  
    },
    

    View Slide

65. render:  function()  {  
       var  messageListItems  =  this.state.messages.map(message  =>  {  
           return  (  
                               key={message.id}  
                   messageID={message.id}  
                   text={message.text}  
               />  
           );  
       });  
       return  (  
             
               {messageListItems}  
             
       );  
    },
    

    View Slide

66. //  MessageListItem.react.js  
    !
    var  React  =  require('react');  
    !
    var  MessageListItem  =  React.createClass({  
    !
       propTypes  =  {  
           messageID:  React.PropTypes.number.isRequired,  
           text:  React.PropTypes.string.isRequired  
       },  
    !
       render:  function()  {  
           return  (  
                 
                   {this.props.text}  
                 
           );  
       }  
    !
    });  
    !
    module.exports  =  MessageListItem;
    

    View Slide

67. //  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  (  
                 
                   {this.props.text}  
                 
           );  
       },  
    !
       _onClick:  function()  {  
           MessageActionCreators.deleteMessage(this.props.messageID);  
       }  
    !
    });  
    !
    module.exports  =  MessageListItem;
    

    View Slide

68. //  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  (  
                 
                   {this.props.text}  
                 
           );  
       },  
    !
       _onClick:  function()  {  
           MessageActionCreators.deleteMessage(this.props.messageID);  
       }  
    !
    });  
    !
    module.exports  =  MessageListItem;
    

    View Slide

69. Dispatcher
    Action
    Store
    View
    

    View Slide

70. Dispatcher
    Action
    Store
    View
    deleteMessage:  messageID  =>  {  
       AppDispatcher.dispatch({  
           type:  ActionTypes.MESSAGE_DELETE,  
           messageID  
       });  
    }
    

    View Slide

71. Dispatcher
    Action
    Store
    View
    deleteMessage:  messageID  =>  {  
       AppDispatcher.dispatch({  
           type:  ActionTypes.MESSAGE_DELETE,  
           messageID  
       });  
    }
    case  ActionTypes.MESSAGE_DELETE:  
       delete  _messages[action.messageID];  
       this.emit('change');  
       break;  
    

    View Slide

72. INITIALIZATION OF THE APP
    Usually done in a bootstrap module
    Initializes stores with an action
    Renders the topmost React component
    

    View Slide

73. //  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(,  elem);  
    };
    

    View Slide

74. 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.
    

    View Slide

75. IMMUTABLE DATA
    Boost performance in React’s shouldComponentUpdate()
    React.addons.PureRenderMixin
    immutable-js: http://facebook.github.io/immutable-js/
    

    View Slide

76. getDefaultProps()  
    getInitialState()  
    componentWillMount()  
    render()
    componentWillReceiveProps()*  
    shouldComponentUpdate()  
    componentWillUpdate()  
    render()
    DOM  Mutations  Complete
    componentDidMount() componentDidUpdate()
    componentWillUnmount()
    Lifecycle:    
    Mounting  and  Unmounting
    Update:    
    New  Props  or  State
    *Called  only  with  new  props
    

    View Slide

77. MORE FLUX PATTERNS
    LoggingStore
    Error handling with client ID / dirty bit
    Error handling with actions queue
    Resolving dependencies in the Controller-view
    

    View Slide

78. ANTI-PATTERNS FOR REACT+FLUX
    Getters in render()
    Public setters in stores & the setter mindset trap
    Application state/logic in React components
    Props in getInitialState()
    

    View Slide

79. FLUX
    Dataflow
    Programming CQRS
    Functional and FRP
    MVC
    Reactive
    

    View Slide

80. FLUX
    TOTALLY
    WORKS
    Dispatcher
    Action
    Store
    View
    

    View Slide

81. THANK YOU!
    

    View Slide