Intro and overview of the Flux architecture pattern with ReactJS

1. Intro to Flux
Damian Legawiec
CEO of Spark Solutions
@damianlegawiec

2. What is Flux?
Framework?

3. What is Flux?
Framework?
Library?

4. What is Flux?
Framework?
Library? Kinda :)

5. What is Flux?
Architecture Pattern

6. What is Flux?
Architecture Pattern
One Way Data Binding

7. What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic

8. What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic
Not MVC :)

9. What is Flux?

10. Store
Model?

11. Store
Model?

12. Store
Model?
Collection?

13. Store
Model?
Collection?

14. Store
Application State Container

15. Store
Application State Container
Can be used with ORM

16. Store
Application State Container
Can be used with ORM
Simple JavaScript object enhanced by EventEmitter
or MicroEvent

17. Actions
Used to invoke Change of state

18. Actions
Used to invoke Change of state
Invoked from Views (Components in React)
Actions

19. Actions
Used to invoke Change of state
Invoked from Views (Components in React)
They pass arguments (payload) to Dispatcher
Actions

20. Dispatcher
There can be only one!
Actions

21. Dispatcher
There can be only one!
Dispatches Actions to the Store
DispatcherActions

22. Smart Components
Aware of Store

23. Smart Components
Aware of Store
Listen for Store change

24. Smart Components
Aware of Store
Listen for Store change
Data is in State

25. Smart Components
Aware of Store
Listen for Store change
Data is in State
Pass data via props to Dumb Components

26. Dumb Components
Only display data passed in props

27. Single Page App Example
https://greetabl.com/builder

28. Web App Example
https://milanstyle.com

29. When to use Flux?
Single Page App
Complex UI
Real World apps :)

30. When not to use Flux?
Learning React :)
Simple components enhancing static site

31. What is Flux implementation use?
Short Answer
REDUX

32. What is Flux implementation use?
Long Answer

33. What is Flux implementation use?
1. Start with official Facebook one
2. Choose between more conventional
ones (Reflux, Alt) or bleeding edge
Redux

34. Future reading List
1. https://facebook.github.io/flux/docs/o
verview.html#content
2. http://blog.andrewray.me/flux-for-
stupid-people/

35. Thanks for your attention!