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?

1. Flux Architecture
Jakub Kocikowski

2. About me
● Software engineer for over 5 years
● Fan of simple solutions to complex
problems
● I like bridges

5. Agenda
1. Theory Part 1: Flux and Redux
2. Theory Part 2: Context
3. Practical Considerations

6. 1/3
Theory - Flux and Redux

7. MVC

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

11. The solution
(state, action) => newState

12. Flux Architecture

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

16. Action
● A simple object
● Has a type and some data

17. Action
● A simple object
● Has a type and some data

18. Action creators
● Factory for the action
● Makes sure the action is
formatted correctly

19. Flux Architecture

20. LET’S
TALK
ABOUT
RE-DUCKS

21. Redux

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

23. The Redux way

24. Reducers
● Pure function
● Takes current state and an action
● Returns a new state

25. dispatch()
● A simple function
● What it does:
1. Calls reducer with current state and action
2. Replaces current state
3. Notifies listeners

26. Redux

27. Selectors
● Pure function
● Takes the state as an argument
● Returns computed value

28. Middleware

29. Redux
benefits
● Time travel
● Snapshots
● Easy hydration
● Shallow comparison

30. 2/3
Theory II - Context

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

32. Flux Architecture

33. Event Sourcing

34. elm

35. Elm
● Functional language for frontend
● All the side effects are managed by the runtime
● Strict, Structural typing
● Compiles to JavaScript

37. Reactive
programming

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

40. Source: https://github.com/Reactive-Extensions/RxJS

41. How does it relate to Flux?
● You can implement it using a stream
● You can use a middleware to bridge RxJS and Redux

42. 3/3
Practical considerations

43. THE DOWNSIDES

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

52. I have this data I need to store
somewhere…

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?

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

61. Thank you
Jakub Kocikowski
Software Engineer
Contact me:
@kocikowski