React, Unidirectional Data Flow, and You

Transcript

1. R E A C T,
   U N I D I R E C T I O N A L D ATA F L O W,
   A N D Y O U
   D O U G N E I N E R @ D O U G N E I N E R
   1
   

   View Slide

2. A B O U T M E
   • Doug Neiner 

   @dougneiner
   • Married with 5 kids
   • Work from home in 

   rural Iowa, USA
   • I enjoy making and building stuff

   (cooking, woodworking, coding)
   • Front End Web Developer at LeanKit
   2
   

   View Slide

3. W H AT I S R E A C T ?
   • React is a library for building user interfaces in
   JavaScript that are performant and predictable.
   • http://facebook.github.io/react/
   • Often described as the V in MVC…
   3
   

   View Slide

4. W H AT I S F L U X ?
   • Flux is an architectural guideline for building web
   applications that pairs exceptionally well with React.js
   • https://facebook.github.io/flux/
   • Heavily focused on predicability
   • Replaces MVC with an alternative architecture model
   (The actual code part of Flux is simply the Dispatcher, which we'll discuss in a bit.)
   4
   

   View Slide

5. M Y J O U R N E Y T O F L U X
   • jQuery + Widgets
   • Backbone with Underscore Templates
   • Backbone with Two-Way Binding
   • Knockout
   • React (since May 2014)
   • React + Flux (since September 2014)
   5
   

   View Slide

6. G O A L S
   • Understand the guiding principles behind Flux
   • Understand what goes where in a React + Flux app
   • See how to test React + Flux
   • Gain tips and tricks for tackling 

   React + Flux applications
   6
   

   View Slide

7. M A I L A P P L I C AT I O N
   L E A R N I N G E X A M P L E
   7
   

   View Slide

8. T H E H I G H P O I N T S
   • Not a step-by-step tutorial
   • Code is open source and available on Github:

   https://github.com/LeanKit-Labs/lux-mail-example
   8
   

   View Slide

9. F E AT U R E S
   W H A T D O W E N E E D ?
   9
   • View list of messages
   • View full text of selected
   message
   • Compose new message
   • Reply, Forward, Archive
   active message
   • Check for new messages
   • Distinguish between
   unread/read messages
   

   View Slide

10. B U I L D I N G W I T H R E A C T
    • Static HTML + CSS
    • Static React Components with props
    • Dynamic React Components with state
    10
    

    View Slide

11. 
    
    
    
    11
    R E A C T C O M P O N E N T S
    

    View Slide

12. Q U I C K I N T E R FA C E S 

    W I T H R E A C T
    1. Copy all interface HTML into a single React
    component’s render call. Replace class with
    className and for with htmlFor
    2. Break into smaller components, with each
    component still rendering static HTML.
    3. Start to replace static HTML with prop values (Use
    getDefaultProps to help)
    4. Keep as many components as you can to strictly
    using props
    12
    

    View Slide

13. H O W D O W E B U I L D I T ?
    C O M P O N E N T S ? M O D E L S ? A J A X ?
    13
    

    View Slide

14. A N Y C H A N G E S TA R T S
    W I T H A N A C T I O N
    14
    

    View Slide

15. U N I D I R E C T I O N A L F L O W
    F L U X A R C H I T E C T U R E
    From https://facebook.github.io/flux/docs/overview.html
    15
    ACTION DISPATCHER STORE VIEW
    

    View Slide

16. A C T I O N S
    • Created by almost any part of your application
    • User Interaction
    • Results of AJAX requests
    • Timers
    • Web Socket events
    • Globally unique actions names
    • Once the cycle starts, a second action should not be
    created until the first action cycle has completed
    16
    ACTION
    DISPATCHER STORE VIEW
    

    View Slide

17. A C T I O N S
    W H A T D O W E N E E D ?
    17
    • Load Messages
    • Load User
    • Select Message
    • Start Reply, Start Forward
    • Archive Message
    • Start New Message
    • Mark Message as Read
    

    View Slide

18. A C T I O N S
    Load Messages
    Load User
    Select Message
    Start Reply, Start Forward
    Archive Message
    Start New Message
    Mark Message as Read
    R E S U LT S
    Display all messages, first one selected
    Populate user menu
    Highlight message, open message
    Open compose window
    Remove from list, close viewer
    Open compose window
    Remove blue mark from list view
    18
    ACTION
    DISPATCHER STORE VIEW
    

    View Slide

19. A C T I O N S
    Load Messages
    Messages Loaded
    Load User
    User Loaded
    Select Message
    Start Reply, Start Forward
    Archive Message
    Start New Message
    Mark Message as Read
    R E S U LT S
    Data requested from server
    Display all messages, first one selected
    User data requested from server
    Populate user menu
    Highlight message, open message
    Open compose window
    Remove from list, close viewer
    Open compose window
    Remove blue mark from list view
    19
    ACTION
    DISPATCHER STORE VIEW
    

    View Slide

20. A C T I O N S
    Load Messages
    Messages Loaded
    Load User
    User Loaded
    Select Message
    Start Reply, Start Forward
    Archive Message
    Start New Message
    Mark Message as Read
    R E S U LT S
    Show “Loading messages…”
    Display all messages, first one selected
    User data requested from server
    Populate user menu
    Highlight message, open message
    Open compose window
    Remove from list, close viewer
    Open compose window
    Remove blue mark from list view
    20
    ACTION
    DISPATCHER STORE VIEW
    

    View Slide

21. D I S PAT C H E R
    • Coordinates relaying the actions to the stores that are
    interested in the actions.
    • Ensures the stores action handlers are executed in the
    correct order.
    • Handled entirely by the library you are using (Flux,
    lux.js, etc)
    • It is important, but you don’t have to think about it.
    ACTION
    DISPATCHER
    STORE VIEW
    21
    

    View Slide

22. S T O R E S
    • Application state lives in stores, included content
    and state needed to render the views.
    • Each store manages data and actions for a single
    related domain of information
    • Stores can be dependent on other stores
    • Stores should expose helper methods to return the
    data for the views
    ACTION DISPATCHER
    STORE
    VIEW
    22
    

    View Slide

23. S T O R E S
    • The state of a store does not change outside of an
    action/dispatch cycle
    • Stores can choose to handle any of the actions being
    dispatched
    • Multiple stores can participate in the same action
    ACTION DISPATCHER
    STORE
    VIEW
    23
    

    View Slide

24. S T O R E S
    messagesStore
    !
    messages
    !
    !
    !
    getMessages()
    getMessage(id)
    !
    layoutStore
    !
    currentMessageId
    loading
    !
    !
    getCurrentMessageId()
    getLoadingStatus()

    userStore
    !
    username
    id
    !
    !
    getUser()
    24
    ACTION DISPATCHER
    STORE
    VIEW
    S T O R E H E L P E R M E T H O D S
    S T O R E S TA T E
    

    View Slide

25. S T O R E S
    messagesStore
    !
    !
    messagesLoaded
    markAsRead
    !
    archive
    !
    layoutStore
    !
    loadMessages
    messagesLoaded
    !
    selectMessage
    archive
    reply
    forward

    userStore
    userLoaded
    !
    !
    25
    ACTION DISPATCHER
    STORE
    VIEW
    S T O R E A C T I O N H A N D L E R S
    

    View Slide

26. V I E W S
    • React.js components
    • Get their initial state from the stores
    • Get notified when the stores change, and can
    optionally setState on themselves with new data.
    • Can kick off the action/dispatch cycle. As a general
    rule, do not kick off the action dispatch cycle in
    response to a setState call or render call.
    26
    ACTION DISPATCHER STORE
    VIEW
    

    View Slide

27. U N I D I R E C T I O N A L F L O W
    R E V I E W
    27
    ACTION DISPATCHER STORE VIEW
    

    View Slide

28. B U I L D I N G W I T H R E A C T + F L U X
    • Static HTML + CSS
    • Static React Components with props
    • Dynamic React Components with state
    • State moved to Flux Stores
    • User feedback added to React, triggering Flux actions
    28
    

    View Slide

29. T I M E F O R C O D E
    • Overview of the example mail app
    • Breaking larger React components into smaller
    components
    • Unit testing Stores and React Components
    • Triggering actions from other pieces in your
    application
    • Using non-React DOM widgets with React
    29
    

    View Slide

30. L I N K S
    • lux.js: http://bit.ly/luxjs
    • lux-mail-example: http://bit.ly/luxmail
    • LeanKit: http://leankit.com
    

    View Slide

31. T H A N K Y O U
    [email protected]
    @dougneiner on Twitter
    dcneiner on Github
    http://code.dougneiner.com
    

    View Slide