Flux: A modern way of doing MVC?

Transcript

1. 1.

   @duffleit @oetzn #VoxxedVienna Flux: A modern way 
 of doing

   MVC? Eizinger Thomas, Leitner David
2. 2.

   We like React. @duffleit @oetzn

3. 3.

   UI-State-Management record state session state screen state GUI Architectures -

   https://martinfowler.com/eaaDev/uiArchs.html @duffleit @oetzn
4. 4.

   UI-State-Management record state session state screen state GUI Architectures -

   https://martinfowler.com/eaaDev/uiArchs.html ensure consistency @duffleit @oetzn
5. 5.

   We love Redux. @duffleit @oetzn

6. 6.

   Redux? @duffleit @oetzn

7. 7.

   Redux? Predictable state container for JavaScript apps @duffleit @oetzn

8. 8.

   Flux? @duffleit @oetzn

9. 9.

   Flux? "An application architecture utilizing a unidirectional data flow.“ -

   Facebook @duffleit @oetzn
10. 10.

    FLUX - https://facebook.github.io/flux/ @duffleit @oetzn

11. 11.

    FLUX - https://facebook.github.io/flux/ @duffleit @oetzn

12. 12.

    FLUX - https://facebook.github.io/flux/ @duffleit @oetzn

13. 13.

    FLUX - https://facebook.github.io/flux/ @duffleit @oetzn

14. 14.

    FLUX - https://facebook.github.io/flux/ @duffleit @oetzn

15. 15.

    Why create something new? @duffleit @oetzn

16. 16.

    Why create something new? What about MVC or MVP? @duffleit

    @oetzn
17. 17.

    They tried. [1] [1] https://www.infoq.com/news/2014/05/facebook-mvc-flux

18. 18.

    None
19. 19.

    Google Result #1 https://www.c-sharpcorner.com/article/introduction-to-Asp-Net-mvc @duffleit @oetzn

20. 20.

    Google Result #2 https://www.infoworld.com/article/2941414/microsoft-net/best-practices-in-asp-net-mvc.html @duffleit @oetzn

21. 21.

    Google Result #3 https://coldbox.ortusbooks.com/content/full/overview/what_is_mvc.html @duffleit @oetzn

22. 22.

    Google Result #4 https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC @duffleit @oetzn

23. 23.

    Bliki > Google @duffleit @oetzn

24. 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. 25.

    - Adam Tornhill VIEW CONTROLLER MODEL @duffleit @oetzn

26. 26.

    MVC • Trygve Reenskaug • 10 December 1979 • Smalltalk

27. 27.

    Model dataflow association

28. 28.

    Model View dataflow association

29. 29.

    Model Controller View dataflow association

30. 30.

    Model Controller View Different abstraction levels dataflow association

31. 31.

    web.apply(MVC); @duffleit @oetzn

32. 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. 33.

    Model Controller View @duffleit @oetzn

34. 34.

    Model Controller View @duffleit @oetzn

35. 35.

    Model Controller View HTTP-Response @duffleit @oetzn

36. 36.

    Model Controller View Server Client HTTP-Response @duffleit @oetzn

37. 37.

    How things evolved with JavaScript. @duffleit @oetzn

38. 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. 39.

    Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit

    @oetzn
40. 40.

    Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit

    @oetzn
41. 41.

    Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit

    @oetzn
42. 42.

    Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit

    @oetzn
43. 43.

    Server Client Model Controller View Controller View HTTP-Request HTTP-Response JSON

    HTTP-Request HTTP-Response @duffleit @oetzn
44. 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
45. 45.

    None
46. 46.

    MVC in JavaScript. @duffleit @oetzn

47. 47.

    MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria @duffleit @oetzn

48. 48.

    MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria & React + Redux

    @duffleit @oetzn
49. 49.

    @duffleit @oetzn

50. 50.

    @duffleit @oetzn View → React

51. 51.

    @duffleit @oetzn View → React Model → Redux-Store

52. 52.

    @duffleit @oetzn View → React Model → Redux-Store Controller →

    […]
53. 53.

    @duffleit @oetzn View → React Model → Redux-Store Controller →

    […] = structure very similar
54. 54.

    Goals of Flux?

55. 55.

    Unidirectionality @duffleit @oetzn

56. 56.

    Unidirectionality @duffleit @oetzn

57. 57.

    Unidirectionality Model Controller View @duffleit @oetzn

58. 58.

    Predictability @duffleit @oetzn

59. 59.

    Predictability StoreState + Action ! StoreState @duffleit @oetzn

60. 60.

    Predictability StoreState + Action ! StoreState ModelState + Action !

    ModelState @duffleit @oetzn
61. 61.

    Single Source of Truth @duffleit @oetzn

62. 62.

    Single Source of Truth @duffleit @oetzn

63. 63.

    Single Source of Truth Model Controlle r View Model Controller

    View Model Controller View @duffleit @oetzn
64. 64.

    Single Source of Truth Model Controlle r View Model Controller

    View Model Controller View @duffleit @oetzn
65. 65.

    Consistently Display Data on UI @duffleit @oetzn

66. 66.

    Consistently Display Data on UI View(StoreState) ! UI @duffleit @oetzn

67. 67.

    Consistently Display Data on UI View(StoreState) ! UI View(ModelState) !

    UI @duffleit @oetzn
68. 68.

    Structure • View → React • Model → Store •

    Controller → […] Goals • Unidirectionality • Predictability • Single Source of Truth • Consistently Display Data @duffleit @oetzn
69. 69.

    Flux: A modern way of doing MVC? @duffleit @oetzn

70. 70.

    Flux: Another way of doing MVC. @duffleit @oetzn

71. 71.

    Concepts > Buzzwords @duffleit @oetzn

72. 72.

    Thomas Eizinger @oetzn David Leitner @duffleit

73. 73.

    nobt.io
 
 split your bills with ease

74. 74.

    None