Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React, Unidirectional Data Flow, and You

Doug Neiner
February 12, 2015

React, Unidirectional Data Flow, and You

My slides from JSSummit where I primarily discuss Flux architecture, and what goes where in a Flux + React application. The second part of the presentation was live coding which isn't shown here, but the example repo is available: http://bit.ly/luxmail

Doug Neiner

February 12, 2015
Tweet

More Decks by Doug Neiner

Other Decks in Programming

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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide





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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide