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
   

   View Slide

2. UI Engineer
   Trunk Club
   @peterpme
   github.com/ppiekarczyk
   

   View Slide

3. Getting Started
   

   View Slide

4. What Is React Not?
   • Not a framework like Angular or Backbone
   • Not a templating engine
   • Not a framework replacement
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. SOA
   BWP BWP
   

   View Slide

8. BWP BWP BWP
   BWP
   BWP
   

   View Slide

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?
   

   View Slide

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
    

    View Slide

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.
    

    View Slide

12. React to the Rescue!
    Templates & Views
    Our code became much more manageable
    

    View Slide

13. React to the Rescue!
    CSS Styles as Components
    Our design & code became much more manageable
    

    View Slide

14. Passing Down Data
    What are Props?
    Properties that are received from above and are immutable

    as far as the component is concerned
    

    View Slide

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).
    

    View Slide

16. Passing Down Data
    

    View Slide

17. Now What?
    

    View Slide

18. Flux
    • Pattern, not a framework
    • Data layer
    • Uni directional data flow
    • Actions - facilitate data
    • Stores - application state & logic
    • Dispatcher - traffic control
    

    View Slide

19. Uni Directional Flow
    STORE COMPONENT
    Model View
    

    View Slide

20. Flux
    STORE
    COMPONENT
    `CHANGE`
    event
    user
    interaction
    ACTION

    CREATOR
    `CREATE`
    action
    DISPATCHER
    STORE
    callback
    

    View Slide

21. Component
    Sign up modal
    

    View Slide

22. Component
    Click Handler
    

    View Slide

23. Action Creator
    

    View Slide

24. Dispatcher
    

    View Slide

25. Store
    

    View Slide

26. Store
    

    View Slide

27. Component
    

    View Slide

28. Flux Keeps Things Predictable
    

    View Slide

29. View Slide

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!
    

    View Slide

31. Thank you
    

    View Slide