The document discusses the Flux application architecture and its similarities to and differences from MVC. Flux utilizes a unidirectional data flow and aims for predictability, a single source of truth for application data, and consistently displaying data on the UI. While Flux shares similarities with MVC in separating concerns into views, models, and controllers, it aims to improve on MVC with its unidirectional data flow and emphasis on predictability. The document also notes that concepts are more important than buzzwords when it comes to architectural patterns.

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
ensure
consistency
@duffleit@oetzn

4. We love Redux.
@duffleit@oetzn

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

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

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

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

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

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

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

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

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

15. Bliki > Google
“Different people reading about MVC in different places take different
ideas from it and describe these as 'MVC’.”
- Martin Fowler
@duffleit@oetzn

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

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

18. Model
Controller View
Different abstraction levels
dataflow
association

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

20. 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

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

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

23. 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

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

25. Server
Client
Model
Controller ViewController View
HTTP-
Request
HTTP-Response
JSON
<li class=“done”>...</li>
todo -> todo.addClass(“done”)
HTTP-
Request
HTTP-Response
@duffleit@oetzn

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

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

29. Goals of Flux?

30. UnidirectionalityModel
Controller View
@duffleit@oetzn

31. Predictability
StoreState + Action → StoreState
ModelState + Action → ModelState
@duffleit@oetzn

32. Single Source of Truth
Model
Controller View
Model
Controller View
Model
Controller View
@duffleit@oetzn

33. Consistently Display Data on UI
View(StoreState) → UI
View(ModelState) → UI
@duffleit@oetzn

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

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

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

37. Concepts > Buzzwords
@duffleit@oetzn

38. Thomas Eizinger
@oetzn
David Leitner
@duffleit

39. nobt.io
split your bills with ease

40. Thomas Eizinger
@oetzn
David Leitner
@duffleit