$30 off During Our Annual Pro Sale. View Details »

Flux: A modern way of doing MVC?

SQUER Solutions
March 13, 2018
1.5k

Flux: A modern way of doing MVC?

Voxxed Days (Vienna, Austria)

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

SQUER Solutions

March 13, 2018
Tweet

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