Flux: A modern way of doing MVC?

Voxxed Days (Vienna, Austria)

video: https://www.youtube.com/watch?v=h9SDuTSy7ps

Transcript

1. @duffleit @oetzn #VoxxedVienna Flux: A modern way 
 of doing MVC? Eizinger Thomas, Leitner David
2. We like React. @duffleit @oetzn
3. UI-State-Management record state session state screen state GUI Architectures - https://martinfowler.com/eaaDev/uiArchs.html @duffleit @oetzn
4. UI-State-Management record state session state screen state GUI Architectures - https://martinfowler.com/eaaDev/uiArchs.html ensure consistency @duffleit @oetzn
5. We love Redux. @duffleit @oetzn
6. Redux? @duffleit @oetzn
7. Redux? Predictable state container for JavaScript apps @duffleit @oetzn
8. Flux? @duffleit @oetzn
9. Flux? "An application architecture utilizing a unidirectional data flow.“ - Facebook @duffleit @oetzn
10. FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
11. FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
12. FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
13. FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
14. FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
15. Why create something new? @duffleit @oetzn
16. Why create something new? What about MVC or MVP? @duffleit @oetzn
17. They tried. [1] [1] https://www.infoq.com/news/2014/05/facebook-mvc-flux
19. Google Result #1 https://www.c-sharpcorner.com/article/introduction-to-Asp-Net-mvc @duffleit @oetzn
20. Google Result #2 https://www.infoworld.com/article/2941414/microsoft-net/best-practices-in-asp-net-mvc.html @duffleit @oetzn
21. Google Result #3 https://coldbox.ortusbooks.com/content/full/overview/what_is_mvc.html @duffleit @oetzn
22. Google Result #4 https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC @duffleit @oetzn
23. Bliki > Google @duffleit @oetzn
24. Bliki > Google “Different people reading about MVC in different places take different ideas from it and describe these as 'MVC’.” - Martin Fowler @duffleit @oetzn
25. - Adam Tornhill VIEW CONTROLLER MODEL @duffleit @oetzn
26. MVC • Trygve Reenskaug • 10 December 1979 • Smalltalk
27. Model dataflow association
28. Model View dataflow association
29. Model Controller View dataflow association
30. Model Controller View Different abstraction levels dataflow association
31. web.apply(MVC); @duffleit @oetzn
32. AbstractUIStateManagementPattern mvc = PatternStore.load(Patterns.MVC);
 // todo: use DI here Web theWeb = new WebFactory().create();
 try {
 theWeb.apply(mvc);
 } catch (PatternApplicationException e) {
 // never happens
 } @duffleit @oetzn
33. Model Controller View @duffleit @oetzn
34. Model Controller View @duffleit @oetzn
35. Model Controller View HTTP-Response @duffleit @oetzn
36. Model Controller View Server Client HTTP-Response @duffleit @oetzn
37. How things evolved with JavaScript. @duffleit @oetzn
38. Make it to the talk in time Fix DI-Todo Get Wunderlist mark as done Todos: <li class=“done”>...</li> <li>...</li> mark as done @duffleit @oetzn
39. Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit @oetzn
40. Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit @oetzn
41. Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit @oetzn
42. Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit @oetzn
43. Server Client Model Controller View Controller View HTTP-Request HTTP-Response JSON HTTP-Request HTTP-Response @duffleit @oetzn
44. Server Client Model Controller View Controller View HTTP-Request HTTP-Response JSON <li class=“done”>...</li> todo -> todo.addClass(“done”) HTTP-Request HTTP-Response @duffleit @oetzn
46. MVC in JavaScript. @duffleit @oetzn
47. MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria @duffleit @oetzn
48. MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria & React + Redux @duffleit @oetzn
49. @duffleit @oetzn
50. @duffleit @oetzn View → React
51. @duffleit @oetzn View → React Model → Redux-Store
52. @duffleit @oetzn View → React Model → Redux-Store Controller → […]
53. @duffleit @oetzn View → React Model → Redux-Store Controller → […] = structure very similar
54. Goals of Flux?
55. Unidirectionality @duffleit @oetzn
56. Unidirectionality @duffleit @oetzn
57. Unidirectionality Model Controller View @duffleit @oetzn
58. Predictability @duffleit @oetzn
59. Predictability StoreState + Action ! StoreState @duffleit @oetzn
60. Predictability StoreState + Action ! StoreState ModelState + Action ! ModelState @duffleit @oetzn
61. Single Source of Truth @duffleit @oetzn
62. Single Source of Truth @duffleit @oetzn
63. Single Source of Truth Model Controlle r View Model Controller View Model Controller View @duffleit @oetzn
64. Single Source of Truth Model Controlle r View Model Controller View Model Controller View @duffleit @oetzn
65. Consistently Display Data on UI @duffleit @oetzn
66. Consistently Display Data on UI View(StoreState) ! UI @duffleit @oetzn
67. Consistently Display Data on UI View(StoreState) ! UI View(ModelState) ! UI @duffleit @oetzn
68. Structure • View → React • Model → Store • Controller → […] Goals • Unidirectionality • Predictability • Single Source of Truth • Consistently Display Data @duffleit @oetzn
69. Flux: A modern way of doing MVC? @duffleit @oetzn
70. Flux: Another way of doing MVC. @duffleit @oetzn
71. Concepts > Buzzwords @duffleit @oetzn
72. Thomas Eizinger @oetzn David Leitner @duffleit
73. nobt.io
 
 split your bills with ease