Flux & Redux

Flux is proposed by people as the replacement of MVC in Frontend projects. However, Flux is a new application structure or design pattern so both patterns have different approaches and solve different problems. Discover the difference between Flux and MVC and learn about Redux, a functional and reactive implementation of Flux.

Transcript

1. Confidential Meetup Flux & Redux
2. Confidential Angel M de Miguel Engineer at Bitnami laux.es | irb.rocks Angelmmiguel @laux_es
3. Confidential
4. Confidential Trygve Reenskaug
5. Confidential MVC Xerox PARC 1978-79
6. Confidential
7. Confidential
8. Confidential It's a general reusable solution to a commonly occurring problem.
9. Confidential
10. Confidential It adds unnecessary complexity to your projects.
11. Confidential It breaks your projects.
12. Confidential Flux A cartoon guide to Flux by Lin Clark
13. Confidential Flux
14. Confidential Flux
15. Confidential Flux
16. Confidential Flux
17. Confidential Flux Message Read
18. Confidential Flux
19. Confidential Action creator He formats your message into a way the system can understand
20. Confidential Action creator "The user 2344 has read the message"
21. Confidential Action creator type: MESSAGE_READ user_id: 2344
22. Confidential Dispatcher Callbacks readMessage sendMessage deleteMessage
23. Confidential Action creator type: MESSAGE_READ user_id: 2344
24. Confidential Dispatcher readMessage sendMessage deleteMessage
25. Confidential Store Key Value messages [...] user { ... }
26. Confidential Store Key Value messages [...] user { ... } readMessage Key Value messages [...]* user { ... }
27. Confidential View It's subscribed to the store. It dispatches new actions.
28. Confidential Flux
29. Confidential Redux Redux is a predictable state container for JavaScript apps.
30. Confidential Redux @dan_abramov
31. Confidential Redux • Reactive Flux implementation • Based on functional principles • Predictable. Easy to test • Lightweight (~600 loc) • Has integrations with a lot of frameworks
32. Confidential Redux Reducer
33. Confidential Actions
34. Confidential Reducers Reducer
35. Confidential Store
36. Confidential Dispatch an action
37. Confidential Dispatch an action Reducer
38. Confidential Dispatch an action
39. Confidential Redux Immutable
40. Confidential State changes
41. Confidential Redux https://jsbin.com/wixivif/
42. Confidential Why Flux? • Easy to share data in your application • Reuse business logic • Predictable. The data is only updated by dispatchers • Scalable • Developer friendly
43. Confidential Why Redux? • Reactive • TDD • Pre-fill your initial state • Store the state in localStorage • Every version of the state is an snapshot of the application
44. Confidential Why not Flux? • Define your state and changes in your application as plain objects • To modify the state, you need to create an action and a dispatcher (complexity) • Sync problems on retrieving and modifying. Flux is sync.
45. Confidential Why not Redux? • Last slide • All the business logic should be pure • The state is immutable. Good for me, but you need to write more code or use ImmutableJS.
46. Confidential MVC vs Flux
47. Confidential Design patterns It's a general reusable solution to a commonly occurring problem.
48. Confidential Questions?
49. Thank You