Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Intro to Flux
Damian Legawiec
CEO of Spark Solutions
@damianlegawiec
What is Flux?
Framework?
What is Flux?
Framework?
Library?
What is Flux?
Framework?
Library? Kinda :)
What is Flux?
Architecture Pattern
What is Flux?
Architecture Pattern
One Way Data Binding
What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic
What is Flux?
Architecture Pattern
One Way Data Binding
Framework Agnostic
Not MVC :)
What is Flux?
Store
Model?
Store
Model?
Store
Model?
Collection?
Store
Model?
Collection?
Store
Application State Container
Store
Application State Container
Can be used with ORM
Store
Application State Container
Can be used with ORM
Simple JavaScript object enhanced by EventEmitter
or MicroEvent
Actions
Used to invoke Change of state
Actions
Used to invoke Change of state
Invoked from Views (Components in React)
Actions
Actions
Used to invoke Change of state
Invoked from Views (Components in React)
They pass arguments (payload) to Dispatche...
Dispatcher
There can be only one!
Actions
Dispatcher
There can be only one!
Dispatches Actions to the Store
DispatcherActions
Smart Components
Aware of Store
Smart Components
Aware of Store
Listen for Store change
Smart Components
Aware of Store
Listen for Store change
Data is in State
Smart Components
Aware of Store
Listen for Store change
Data is in State
Pass data via props to Dumb Components
Dumb Components
Only display data passed in props
Single Page App Example
https://greetabl.com/builder
Web App Example
https://milanstyle.com
When to use Flux?
Single Page App
Complex UI
Real World apps :)
When not to use Flux?
Learning React :)
Simple components enhancing static site
What is Flux implementation use?
Short Answer
REDUX
What is Flux implementation use?
Long Answer
What is Flux implementation use?
1. Start with official Facebook one
2. Choose between more conventional
ones (Reflux, Alt...
Future reading List
1. https://facebook.github.io/flux/docs/o
verview.html#content
2. http://blog.andrewray.me/flux-for-
s...
Thanks for your attention!
Upcoming SlideShare
Loading in …5
×

Intro to Flux - ReactJS Warsaw #1

Intro and overview of the Flux architecture pattern with ReactJS

  • Login to see the comments

Intro to Flux - ReactJS Warsaw #1

  1. 1. Intro to Flux Damian Legawiec CEO of Spark Solutions @damianlegawiec
  2. 2. What is Flux? Framework?
  3. 3. What is Flux? Framework? Library?
  4. 4. What is Flux? Framework? Library? Kinda :)
  5. 5. What is Flux? Architecture Pattern
  6. 6. What is Flux? Architecture Pattern One Way Data Binding
  7. 7. What is Flux? Architecture Pattern One Way Data Binding Framework Agnostic
  8. 8. What is Flux? Architecture Pattern One Way Data Binding Framework Agnostic Not MVC :)
  9. 9. What is Flux?
  10. 10. Store Model?
  11. 11. Store Model?
  12. 12. Store Model? Collection?
  13. 13. Store Model? Collection?
  14. 14. Store Application State Container
  15. 15. Store Application State Container Can be used with ORM
  16. 16. Store Application State Container Can be used with ORM Simple JavaScript object enhanced by EventEmitter or MicroEvent
  17. 17. Actions Used to invoke Change of state
  18. 18. Actions Used to invoke Change of state Invoked from Views (Components in React) Actions
  19. 19. Actions Used to invoke Change of state Invoked from Views (Components in React) They pass arguments (payload) to Dispatcher Actions
  20. 20. Dispatcher There can be only one! Actions
  21. 21. Dispatcher There can be only one! Dispatches Actions to the Store DispatcherActions
  22. 22. Smart Components Aware of Store
  23. 23. Smart Components Aware of Store Listen for Store change
  24. 24. Smart Components Aware of Store Listen for Store change Data is in State
  25. 25. Smart Components Aware of Store Listen for Store change Data is in State Pass data via props to Dumb Components
  26. 26. Dumb Components Only display data passed in props
  27. 27. Single Page App Example https://greetabl.com/builder
  28. 28. Web App Example https://milanstyle.com
  29. 29. When to use Flux? Single Page App Complex UI Real World apps :)
  30. 30. When not to use Flux? Learning React :) Simple components enhancing static site
  31. 31. What is Flux implementation use? Short Answer REDUX
  32. 32. What is Flux implementation use? Long Answer
  33. 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. 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. 35. Thanks for your attention!

×