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.2k
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
The Rise of Reactive Microservices
squer
0
23
Apache Kafka — The Hard Parts
squer
0
11
The Rise of Reactive Microservices
squer
0
35
MicroFrontends — The Past, the Present, and the Future
squer
0
58
The Rise of Reactive Microservices
squer
0
150
Rethinking Reactive Architectures
squer
0
23
Leveraging the power of Reactive Architectures
squer
0
400
Rethinking Reactive Architectures
squer
0
370
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
squer
0
220
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
A Philosophy of Restraint
colly
192
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
How to Ace a Technical Interview
jacobian
265
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Atom: Resistance is Futile
akmur
255
20k
Designing for humans not robots
tammielis
241
23k
A better future with KSS
kneath
225
15k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
WebSockets: Embracing the real-time Web
robhawkes
57
5.4k
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