What The Flux? A Quick Primer on React & Flux

Transcript

1. What The Flux? A Quick Primer on React & Flux Peter Piekarczyk June 10, 2015
2. UI Engineer Trunk Club @peterpme github.com/ppiekarczyk
3. Getting Started
4. What Is React Not? • Not a framework like Angular or Backbone • Not a templating engine • Not a framework replacement
5. What Is React? • A library for creating UI • Data flows in, virtual DOM comes out • Diff the next virtual DOM with the current one • When the data changes, re-render! • Render only what I need
6. Past & Present Brunch With Panache A modular approach to building web apps with Brunch github.com/trunkclub/brunch-with-panache speakerdeck.com/jhabdas/brunch-with-panache • Backbone • Chaplin • JQuery • Brunch • Coffeescript • Automatic memory management • Controllers & composition • Rails-like routes in custom router • Consistent CLI interface • CommonJS + Amd Support
7. SOA BWP BWP
8. BWP BWP BWP BWP BWP
9. “Ugh, guys?” Everything worked great for a long time Until it stopped working that great.. • Numerous API calls & hydrations • Lot of useless re-rendering • Increased load times • Huge flame chart spikes • User complaints • Dedicating way too much time 
 for render debugging & optimization • Patches weren’t doing the trick What could UI solve on its own?
10. React to the Rescue! • Reusable, encapsulated components • Single responsibility • Makes no assumptions about your current stack • Efficient diff’ing algorithm re-renders only what it needs to • Declarative style makes it easier to focus on the app itself • Less mental overhead of bringing in templates & views together For the first time, our backend’s were much more comfortable with our code
11. React to the Rescue! Why is React a big deal? • State is hard • UI is a lot of state • Debugging is a pain • Open sourced for over 3 years • Easy to integrate into any project • Used by Facebook, Instagram, Firefox Devtools, Hipchat, Squarespace • Everyone wants to be React React Solves Your Problems. All of them.
12. React to the Rescue! Templates & Views Our code became much more manageable
13. React to the Rescue! CSS Styles as Components Our design & code became much more manageable
14. Passing Down Data What are Props? Properties that are received from above and are immutable
 as far as the component is concerned
15. Passing Down Data What is State? The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events).
16. Passing Down Data
17. Now What?
18. Flux • Pattern, not a framework • Data layer • Uni directional data flow • Actions - facilitate data • Stores - application state & logic • Dispatcher - traffic control
19. Uni Directional Flow STORE COMPONENT Model View
20. Flux STORE COMPONENT `CHANGE` event user interaction ACTION
 CREATOR `CREATE` action DISPATCHER STORE callback
21. Component Sign up modal
22. Component Click Handler
23. Action Creator
24. Dispatcher
25. Store
26. Store
27. Component
28. Flux Keeps Things Predictable
30. Today React with (Re)Flux Build all the things • React • Reflux • Babel • Webpack • npm • Idea of components • A flavor of Flux • ES6 to 5 transpiler • Module Bundler • No more bower!
31. Thank you