Flux Architecture changes how we think about data in frontend applications. In the talk I will cover the theory — what Flux Architecture is, what are the driving principles behind it and how it compares to other patterns in software developer landscape. And practice — what implementation decisions made Redux the most popular implementation of the pattern and do you need Redux to use Flux in your project.
And finally I will try to answer the most important question: when will Flux add value to your project and when it just adds unnecessary complexity?
9. The problem with MVC
Given multiple interconnected components
When an event arrives at the system
Then it causes cascading updates
10. The problem with MVC
On the sufficiently large code base:
1. It is hard to reason about data flow
2. New modules increase complexity exponentially
3. The code base is fragile
13. View
● Listens to changes in the stores
● Dispatches actions to dispatcher
14. Store
● Encapsulating a whole domain
● Contains state
● Contains logic to update the state based on actions
● Notifies views about data changes
15. Dispatcher
● Single dispatcher per application
● Enforces one-directional synchronous data flow
● Receives actions and dispatches them to stores
● Allows you to specify dependencies between the stores
22. Flux vs Redux
Multiple stores
Dispatcher
Store updates state
Can mutate the data
Change events
One store
No Dispatcher
Reducer updates state
Immutable
Always rerender
31. CQRS
Command Query Responsibility
Segregation [...] is the notion that
you can use a different model to
update information than the model
you use to read information
- Martin Folwer
Image: https://www.martinfowler.com/bliki/CQRS.html
38. Reactive programming
● Declarative paradigm were time is a first-class citizen
● Two important types
○ signals - continuous function over time
○ streams - collection of discrete values over time
● We build the pipes through which we start pumping events
● Great to handle async and concurrency
44. The downsides
1. Boilerplate and indirection
2. Requires immutability
3. Requires all important state to live in one place
4. Stores only serializable data
5. Performance
6. Potentially hard to learn
7. Nested state may cause independent views to rerender when the state changes
45. Nested state may cause independent views to rerender when the state changes
46. Nested state may cause independent views to rerender when the state changes
47. Nested state may cause independent views to rerender when the state changes
48. Nested state may cause independent views to rerender when the state changes
49. Are there any alternatives? A word about Mobx
● more automation, less boilerplate
● less explicit
● no time travel
● simpler
● mutable
● observable
● multiple stores
● more OOP
50. What about setState?
● Not an antipattern
● Probably you should start from that
● If your state maps well to component structure
● Maybe Context
51. So when to use Flux?
● Dependencies between data and complex update logic
● Distant leaf components need access to state
● Your data and it’s lifecycle matches event-based architecture
● You want to use benefits like easy hydration
53. The rule of thumb is:
do whatever is less awkward.
Dan Abramov
54. I have this data I need to store somewhere…
● What is the convention in your team?
● Do I want to use specific Redux features?
Like cache the data between reloads in localStorage?
55. I have this data I need to store somewhere…
1. Why is it changing?
2. Is it causing other values to change?
56. I have this data I need to store somewhere…
● What components need to know about the data?
57.
58. Sources / Learn more
Flux and Redux
● Facebook Flux documentation https://facebook.github.io/flux/
● Redux documentation https://redux.js.org/
● From MVC to Flux https://www.youtube.com/watch?v=p8tqhf5qKOI
● Differences between Flux and Redux https://medium.com/edge-coders/the-difference-between-flux-and-redux-71d31b118c1
● Interview with the creator of React https://devchat.tv/js-jabber/179-jsj-redux-and-react-with-dan-abramov/
● Type Of Web on Redux, Flux, CQRS, rules of thumb https://typeofweb.com/2018/03/29/flux-i-redux/
● When to use local state and when to use Redux https://typeofweb.com/2018/05/16/kiedy-uzywac-state-a-kiedy-redux/
● Redux vs Mobx https://www.youtube.com/watch?v=76FRrbY18Bs
● You may not need Redux https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
● Downsides of Redux https://github.com/reduxjs/redux/issues/1385#issuecomment-182632703
● How to choose between Redux's store and React's state? - rule of thumb form Dan Abramov https://github.com/reduxjs/redux/issues/1287
● Comparison of some implementations of Flux https://github.com/voronianski/flux-comparison#ready
59. Sources / Learn more
Elm
● Elm documentation https://guide.elm-lang.org/architecture/
● Podcast on Elm https://softwareengineeringdaily.com/2015/11/03/elm-with-richard-feldman-and-srinivas-rao/
● Tutorial for sign up form in Elm https://blog.noredink.com/post/129641182738/building-a-live-validated-signup-form-in-elm
● Motivation for creating Elm https://venturebeat.com/2013/07/26/why-i-designed-a-front-end-programming-language-from-scratch/
● Talk on Elm https://www.youtube.com/watch?v=EDp6UmaA9CM
Others
● Reactive Javascript https://softwareengineeringdaily.com/2016/10/25/reactive-javascript-with-ben-lesh/
● ReactiveX Documentation http://reactivex.io/
● Reactive Programming at Netflix https://www.youtube.com/watch?v=AslncyG8whg
● CQRS https://www.martinfowler.com/bliki/CQRS.html
● Event Sourcing https://martinfowler.com/eaaDev/EventSourcing.html
60. Images used
1. CQRS diagram - https://www.martinfowler.com/bliki/CQRS.html
2. Duck gifs - https://giphy.com
3. Social media icons - https://flaticon.com
4. Martin Fowler photo https://en.wikipedia.org/wiki/Martin_Fowler_(software_engineer)#/media/File:Webysther_20150414193208_-_Martin_Fowler.jpg
5. Dan Abramov photo https://cdn-images-1.medium.com/max/1200/1*Vko_9kRNbjQGCqyBM9OnVw.jpeg
6. Diagram of MVC gone wrong from slide 8 - https://youtu.be/nYkdrAPrdcw
7. Rest of the diagrams are by me, created in http://draw.io