Flux: A modern way of doing MVC?

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

18. None

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
45. None

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

74. None