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
1.3k
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
A Deep Dive into the Operator Pattern for Non-Clustered Resources
squer
0
37
The Rise of Reactive Microservices
squer
0
110
Apache Kafka — The Hard Parts
squer
0
76
The Rise of Reactive Microservices
squer
0
86
MicroFrontends — The Past, the Present, and the Future
squer
0
120
The Rise of Reactive Microservices
squer
0
270
Rethinking Reactive Architectures
squer
0
49
Leveraging the power of Reactive Architectures
squer
0
440
Rethinking Reactive Architectures
squer
0
390
Featured
See All Featured
Optimizing for Happiness
mojombo
365
64k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Code Review Best Practice
trishagee
50
11k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
The Invisible Side of Design
smashingmag
292
48k
The Invisible Customer
myddelton
113
12k
Design by the Numbers
sachag
271
18k
How to train your dragon (web standard)
notwaldorf
66
4.3k
Support Driven Design
roundedbygravity
88
8.9k
Practical Orchestrator
shlominoach
178
8.9k
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