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
   

   View Slide

2. We like React.
   @duffleit
   @oetzn
   

   View Slide

3. UI-State-Management
   record state
   session state
   screen state
   GUI Architectures - https://martinfowler.com/eaaDev/uiArchs.html
   @duffleit
   @oetzn
   

   View Slide

4. UI-State-Management
   record state
   session state
   screen state
   GUI Architectures - https://martinfowler.com/eaaDev/uiArchs.html
   ensure
   consistency
   @duffleit
   @oetzn
   

   View Slide

5. We love Redux.
   @duffleit
   @oetzn
   

   View Slide

6. Redux?
   @duffleit
   @oetzn
   

   View Slide

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

   View Slide

8. Flux?
   @duffleit
   @oetzn
   

   View Slide

9. Flux?
   "An application architecture utilizing a unidirectional data flow.“
   - Facebook
   @duffleit
   @oetzn
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Why create something new?
    @duffleit
    @oetzn
    

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Bliki > Google
    @duffleit
    @oetzn
    

    View Slide

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
    

    View Slide

25. - Adam Tornhill
    VIEW
    CONTROLLER
    MODEL
    @duffleit
    @oetzn
    

    View Slide

26. MVC
    • Trygve Reenskaug
    • 10 December 1979
    • Smalltalk
    

    View Slide

27. Model
    dataflow
    association
    

    View Slide

28. Model
    View
    dataflow
    association
    

    View Slide

29. Model
    Controller View
    dataflow
    association
    

    View Slide

30. Model
    Controller View
    Different abstraction levels
    dataflow
    association
    

    View Slide

31. web.apply(MVC);
    @duffleit
    @oetzn
    

    View Slide

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
    

    View Slide

33. Model
    Controller View
    @duffleit
    @oetzn
    

    View Slide

34. Model
    Controller View
    @duffleit
    @oetzn
    

    View Slide

35. Model
    Controller View
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

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

    View Slide

37. How things evolved with JavaScript.
    @duffleit
    @oetzn
    

    View Slide

38. Make it to the talk in time
    Fix DI-Todo
    Get Wunderlist mark as done
    Todos:
    ...
    ...
    mark as done
    @duffleit
    @oetzn
    

    View Slide

39. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

40. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

41. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

42. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

43. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    JSON
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

44. Server
    Client
    Model
    Controller View
    Controller View
    HTTP-Request
    HTTP-Response
    JSON
    ...
    todo -> todo.addClass(“done”)
    HTTP-Request
    HTTP-Response
    @duffleit
    @oetzn
    

    View Slide

45. View Slide

46. MVC in JavaScript.
    @duffleit
    @oetzn
    

    View Slide

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

    View Slide

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

    View Slide

49. @duffleit
    @oetzn
    

    View Slide

50. @duffleit
    @oetzn
    View → React
    

    View Slide

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

    View Slide

52. @duffleit
    @oetzn
    View → React
    Model → Redux-Store
    Controller → […]
    

    View Slide

53. @duffleit
    @oetzn
    View → React
    Model → Redux-Store
    Controller → […]
    = structure very similar
    

    View Slide

54. Goals of Flux?
    

    View Slide

55. Unidirectionality
    @duffleit
    @oetzn
    

    View Slide

56. Unidirectionality
    @duffleit
    @oetzn
    

    View Slide

57. Unidirectionality
    Model
    Controller View
    @duffleit
    @oetzn
    

    View Slide

58. Predictability
    @duffleit
    @oetzn
    

    View Slide

59. Predictability
    StoreState + Action ! StoreState
    @duffleit
    @oetzn
    

    View Slide

60. Predictability
    StoreState + Action ! StoreState
    ModelState + Action ! ModelState
    @duffleit
    @oetzn
    

    View Slide

61. Single Source of Truth
    @duffleit
    @oetzn
    

    View Slide

62. Single Source of Truth
    @duffleit
    @oetzn
    

    View Slide

63. Single Source of Truth
    Model
    Controlle
    r
    View
    Model
    Controller View
    Model
    Controller View
    @duffleit
    @oetzn
    

    View Slide

64. Single Source of Truth
    Model
    Controlle
    r
    View
    Model
    Controller View
    Model
    Controller View
    @duffleit
    @oetzn
    

    View Slide

65. Consistently Display Data on UI
    @duffleit
    @oetzn
    

    View Slide

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

    View Slide

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

    View Slide

68. Structure
    • View → React
    • Model → Store
    • Controller → […]
    Goals
    • Unidirectionality
    • Predictability
    • Single Source of Truth
    • Consistently Display Data
    @duffleit
    @oetzn
    

    View Slide

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

    View Slide

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

    View Slide

71. Concepts > Buzzwords
    @duffleit
    @oetzn
    

    View Slide

72. Thomas Eizinger
    @oetzn
    David Leitner
    @duffleit
    

    View Slide

73. nobt.io

    

    split your bills with ease
    

    View Slide

74. View Slide