Writing Maintainable SPA’s (i.e., the React.js/Flux story)

Talk I gave at WellMatch

Transcript

1. Writing Maintainable SPA’s (i.e., the React.js/Flux story)
2. “Those who forget the past... ...are doomed to debug it.” @jeremymorrell
3. React.js concepts in a Nutshell Everything is a component which represents a section of your UI
4. React.js concepts in a Nutshell What is special is how you can think about views: a.  UI produced is a function of the data b.  The same data input will always produce the same output c.  When data changes, React will re-render the UI
5. •  You don’t have to manage the state of objects over time or even keep the identity of them. •  You write your code as a series of snapshots, rather than a flow of changes.
6. Ok, what the heck is Flux? •  An architecture for developing large applications that allows straightforward reasoning about the data •  (Since data drives the UI for React.js, this sounds like a good idea!)
8. Real World Example TypeAhead Container Component: a. typing in the textbox triggers the "triggerSearch" function on the component which executes the TypeAhead fetchResults action b. fetchResults makes an empty dispatcher call (which tells all the stores that the "fetchResults" action ran) c. the TypeAheadStore is listening for the fetchResults action and has a handler set state that a fetch is occurring d. the container component is listening for changes in the store, it then sets its own state, which causes it to re- render showing the loading bar e. Utils/TypeAheadResultsFetcher.fetch makes an ajax call and returns data f. the fetch resolves it's promise and calls the updateResults action with the returned data. g. This returned data is passed through the dispatcher for all stores that might be listening h. The typeAhead store is listening for the updateResults action, it has a handler that sets its own state from the data sent with the dispatcher and also clears the “fetching” state flag i. The typeahead container is listening for typeAheadStore changes. It receives the new state from the store, hiding the loading indicator and passing the results down to the dumb typeAheadResults component j. The typeaheadResults (child) component takes the data and re-renders itself
9. Real World Example (follow up) •  Components listen to Stores •  Components trigger Actions •  Actions send data through the Dispatcher •  Stores listen to certain Actions sent with the Dispatcher •  Stores set their own state •  Components listen to that state and re- render themselves on changes
10. Data Flow with Flux •  Flux isolates all data mutations to a particular layer in the application and establishes a completely predictable way to get data in and out of there. •  This is nothing new, it’s called “Command Query Responsibility Segregation”
11. Important Note on Stores •  They do not have Setters. They are “read only”. They listen to actions and update themselves appropriately •  Meaning: no funny business can happen, data from actions is the only way to communicate with a Store. •  Easy mental model to follow (and debug!). Less surprises! •  A Store is the only place in your whole app that has privilege to mutate the data
12. Don’t be spooked •  Yes, it might be unfamiliar •  I can tell you the exact UI flow and data representation in the application •  I can tell you how to get to a particular state in the UI •  I can save and replay to get to a specific UI state. WHAT?
13. •  Observers and computed properties drive state/data flow into unexpected and mentally troubling paths. •  Observers have no context, you have no idea what triggered the change. •  Observers can cause chain reactions of other observers and can fire multiple times. Data driven State-based/UI is better!
14. Developer Happiness •  Simple API and mental model •  Clear separation of concerns (no cheating) •  Learning curve is not as steep as other framework-oriented development •  Karma+Mocha (QUnit FTL) •  React Hot Loader
15. Support/Maintainability/Debugging •  Debugging the dispatcher (Demo) •  Snapshots/bootstrapping state (Demo) •  More maintainable UI “event stream” •  Yes, they also have Chrome extensions
16. Chrome Extensions
19. Quick DEMO!
20. Finally •  I am not advocating for anything being rewritten •  I am advocating that based on my experience from using other frameworks, React.js with Flux solves very real (bad) problems in an easy to understand manner. •  My spike was an absolute pleasure to create •  I recommend future complex JavaScript development in this manner
21. References •  https://speakerdeck.com/jmorrell/jsconf-uy-flux-those-who-forget-the-past- dot-dot-dot •  https://facebook.github.io/flux/docs/overview.html •  http://facebook.github.io/react/docs/thinking-in-react.html •  https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6 •  https://medium.com/@patcito/reacteurope-interview-16-ryan-florence- cc9e89f8ee1 •  https://chrome.google.com/webstore/detail/react-developer-tools/ fmkadmapgofadopljbjfkapdkoienihi •  https://github.com/goatslacker/alt-devtool •  https://github.com/goatslacker/alt#alt-features •  http://www.thesoftwaresimpleton.com/blog/2015/04/07/observables-evil/ •  https://github.com/gaearon/react-hot-loader