Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Flux: A modern way of doing MVC?
SQUER Solutions
March 13, 2018
0
880
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
Share
More Decks by SQUER Solutions
See All by SQUER Solutions
squer
0
42
squer
0
29
squer
0
330
squer
0
110
squer
0
120
squer
0
410
squer
0
43
squer
0
87
squer
0
69
Featured
See All Featured
lauravandoore
11
1.5k
geoffreycrofte
21
920
samanthasiow
56
6.4k
notwaldorf
15
1.8k
searls
205
36k
paulrobertlloyd
72
1.4k
keithpitt
401
20k
rasmusluckow
318
18k
lynnandtonic
272
16k
rmw
11
810
iamctodd
19
2k
marcelosomers
221
15k
Transcript
@duffleit @oetzn #VoxxedVienna Flux: A modern way of doing
MVC? Eizinger Thomas, Leitner David
We like React. @duffleit @oetzn
UI-State-Management record state session state screen state GUI Architectures -
https://martinfowler.com/eaaDev/uiArchs.html @duffleit @oetzn
UI-State-Management record state session state screen state GUI Architectures -
https://martinfowler.com/eaaDev/uiArchs.html ensure consistency @duffleit @oetzn
We love Redux. @duffleit @oetzn
Redux? @duffleit @oetzn
Redux? Predictable state container for JavaScript apps @duffleit @oetzn
Flux? @duffleit @oetzn
Flux? "An application architecture utilizing a unidirectional data flow.“ -
Facebook @duffleit @oetzn
FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
FLUX - https://facebook.github.io/flux/ @duffleit @oetzn
Why create something new? @duffleit @oetzn
Why create something new? What about MVC or MVP? @duffleit
@oetzn
They tried. [1] [1] https://www.infoq.com/news/2014/05/facebook-mvc-flux
None
Google Result #1 https://www.c-sharpcorner.com/article/introduction-to-Asp-Net-mvc @duffleit @oetzn
Google Result #2 https://www.infoworld.com/article/2941414/microsoft-net/best-practices-in-asp-net-mvc.html @duffleit @oetzn
Google Result #3 https://coldbox.ortusbooks.com/content/full/overview/what_is_mvc.html @duffleit @oetzn
Google Result #4 https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC @duffleit @oetzn
Bliki > Google @duffleit @oetzn
Bliki > Google “Different people reading about MVC in different
places take different ideas from it and describe these as 'MVC’.” - Martin Fowler @duffleit @oetzn
- Adam Tornhill VIEW CONTROLLER MODEL @duffleit @oetzn
MVC • Trygve Reenskaug • 10 December 1979 • Smalltalk
Model dataflow association
Model View dataflow association
Model Controller View dataflow association
Model Controller View Different abstraction levels dataflow association
web.apply(MVC); @duffleit @oetzn
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
Model Controller View @duffleit @oetzn
Model Controller View @duffleit @oetzn
Model Controller View HTTP-Response @duffleit @oetzn
Model Controller View Server Client HTTP-Response @duffleit @oetzn
How things evolved with JavaScript. @duffleit @oetzn
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
Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit
@oetzn
Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit
@oetzn
Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit
@oetzn
Server Client Model Controller View Controller View HTTP-Request HTTP-Response @duffleit
@oetzn
Server Client Model Controller View Controller View HTTP-Request HTTP-Response JSON
HTTP-Request HTTP-Response @duffleit @oetzn
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
None
MVC in JavaScript. @duffleit @oetzn
MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria @duffleit @oetzn
MVC in JavaScript. Maria MVC: https://github.com/petermichaux/maria & React + Redux
@duffleit @oetzn
@duffleit @oetzn
@duffleit @oetzn View → React
@duffleit @oetzn View → React Model → Redux-Store
@duffleit @oetzn View → React Model → Redux-Store Controller →
[…]
@duffleit @oetzn View → React Model → Redux-Store Controller →
[…] = structure very similar
Goals of Flux?
Unidirectionality @duffleit @oetzn
Unidirectionality @duffleit @oetzn
Unidirectionality Model Controller View @duffleit @oetzn
Predictability @duffleit @oetzn
Predictability StoreState + Action ! StoreState @duffleit @oetzn
Predictability StoreState + Action ! StoreState ModelState + Action !
ModelState @duffleit @oetzn
Single Source of Truth @duffleit @oetzn
Single Source of Truth @duffleit @oetzn
Single Source of Truth Model Controlle r View Model Controller
View Model Controller View @duffleit @oetzn
Single Source of Truth Model Controlle r View Model Controller
View Model Controller View @duffleit @oetzn
Consistently Display Data on UI @duffleit @oetzn
Consistently Display Data on UI View(StoreState) ! UI @duffleit @oetzn
Consistently Display Data on UI View(StoreState) ! UI View(ModelState) !
UI @duffleit @oetzn
Structure • View → React • Model → Store •
Controller → […] Goals • Unidirectionality • Predictability • Single Source of Truth • Consistently Display Data @duffleit @oetzn
Flux: A modern way of doing MVC? @duffleit @oetzn
Flux: Another way of doing MVC. @duffleit @oetzn
Concepts > Buzzwords @duffleit @oetzn
Thomas Eizinger @oetzn David Leitner @duffleit
nobt.io split your bills with ease
None