Flux Enlightenment

Slides for this talk http://www.meetup.com/ReactJS-Toronto/events/220509315/.

Source code is here: https://github.com/z5h/yocto-flux

Transcript

1. Flux Enlightenment
2. Mark Bolusmjak Application Architect at Nudge Rewards bolusmjak@gmail.com @z5h, github.com/z5h
3. Flux Enlightenment Explain Flux. Walk you through implementing a Flux framework. Use that framework to build a simple app. Talk about “wiggle room” in a Flux architecture.
4. Audience Never looked at docs or written any React. Reading React/Flux docs and playing with examples. Written features/apps in React/Flux.
5. Questions to answer What is Flux? What are some typical confusions? FB Y U NO FLUX? Which of the 392+ flux things on npm do I need? Am I fluxxing right? Angular/Ember/etc users may ask: should I care? Why should I listen to this person talking?
6. About Me Last 2+ years app architect at Nudge Rewards. Year 1 just me and CTO: Android, iOS, Blackberry, full app stack, etc. Then full server stack. Not a front end specialist. (No deep comparisons.) Don’t didn’t like web front end. If I can enjoy being productive with React/Flux, so can you.
7. React and me React is a gateway drug to more React. Unsuccessfully evaluated other libraries/frameworks. Started playing in 2 hour R&D time. Kept building cool stuff. Apply to perpetually redesigned side project. Must flux it. Wrote fluir. Small React production features at work. Used fluir work. Rewrote it. Wrote yocto-flux for talk.
8. Cut to the chase.
9. Abridged Flux & React Flux is an application shape concerned with unidirectional data flow. React is a technology that helps realize that application shape. It’s easy to Flux with React. Flux frameworks and libraries are not needed to adhere to a Flux architecture. But they help.
10. Abridged React react(state) -> viewRepresentation Bonus: keeps rendered DOM in sync. Optimally.
11. Abridged Flux “Flux is a fold* that: repeatedly generates the next app state from the current app state and most recent action.” - me * reduce, accumulate, aggregate, compress, inject
12. Fold (Reduce) fold([1,3,5], function(lastResult, nextThing){ return lastResult + nextThing; }, 0 ) // applies function repeatedly to build // up a result from previous results f(0,1) -> 1 f(1,3) -> 4 f(4,5) -> 9
13. Flux fold(actions, function(state, action){ return update(state, action); }, initialState ) // applies actions repeatedly to // maintain app state f(initialState, addEntry) -> nextState f(nextState, updateEntry) -> nextState …
14. Flux fold(actions, function(state, action){ var nextState = update(state, action); react(nextState); return nextState; }, initialState ) f(initialState, addEntry) -> nextState f(nextState, updateEntry) -> nextState …
15. Flux “Flux applications have three major parts: the dispatcher, the stores, and the views (React components).” - Facebook Dispacher: multiplexes an event to interested Stores. Store: wraps up data and logic, can be dispatched to and give us data to render.
16. Action View Store Dispatcher Action state + update function Facebook’s Flux diagram foldp : (a -> state -> state) -> state -> Signal a -> Signal state React components
17. FRP Functional: think functions, side effects, mutation. Reactive: think spreadsheets. Programming: think of creating bugs.
18. History 101. FRP 1936 Alonzo Church formalizes computation with Lambda Calculus Functional & pure functional languages ML 1973, Miranda 1985, Haskell 1990. 1997 Paul Hudak and Conal Elliott formulate FRP in Haskell in “Functional Reactive Animation”. Today: Evan Czaplicki’s Elm is a cutting edge FRP implementation. http://elm-lang.org/Learn.elm
19. Edsger W. Dijkstra “The computing scientist's main challenge is not to get confused by the complexities of one’s own making.” (Turing award winner, creator of ALGOL.)
20. Why the Confusion? “Coming from AngularJS, I want to pass my model into the component as a property and have the component modify the model directly.” - 586181 “How to update a component from another?” - 185921 “I am trying to set input values from other sibling component to perform update.” - 2304819 “Moving state into the parent isn't practical when the state may exist in multiple components and sub- components” - 4437717
21. Points of confusion 1.Flux seems so simple, it must not be important. 2.Flux seems so simple, it must be wrong. 3.Flux seems so simple, it must be incomplete. 4.I believe it, but how do I follow the rules?
22. Let’s look at code soon Just a few more points…
23. Implementing Flux “Flux is more of a pattern than a framework, and does not have any hard dependencies.” - Facebook “The one piece of Flux not readily available elsewhere is the Dispatcher.” - Facebook Dispatcher: “it is a simple mechanism for distributing the actions to the stores” -Facebook Details are up to you.
24. Code https://github.com/z5h/yocto-flux
25. Rules of Flux club 1.Don’t stray from Flux. 2.Drive before you render. 3.Centralize state. 4.BONUS: Using an immutable model and PureRenderMixin.
26. Flux 1. is simple 2. is sufficient 3. has allowances for your personal style/needs 1. router 2. ‘scope’, contexts 3. action smartness 4. Yahoo isomorphic Flux
27. Find the Flux that’s right for you.
28. Thank you: Owen Uken Nudge Rewards