React, Unidirectional Data Flow, and You

9cde37f47e4a800ea081ea42de8d749a?s=47 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

9cde37f47e4a800ea081ea42de8d749a?s=128

Doug Neiner

February 12, 2015
Tweet

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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  11. <MessageViewer /> <MessageList /> <Toolbar /> <MailLayout /> 11 R

    E A C T C O M P O N E N T S
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  30. L I N K S • lux.js: http://bit.ly/luxjs • lux-mail-example:

    http://bit.ly/luxmail • LeanKit: http://leankit.com
  31. T H A N K Y O U doug@dougneiner.com @dougneiner

    on Twitter dcneiner on Github http://code.dougneiner.com