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

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