Flux: A modern way of doing MVC?

E6c61f085d7aceaf97b7bd00e9195514?s=47 SQUER Solutions
March 13, 2018
810

Flux: A modern way of doing MVC?

Voxxed Days (Vienna, Austria)

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

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

March 13, 2018
Tweet

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