Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flux: A modern way of doing MVC?
Search
SQUER Solutions
March 13, 2018
0
1.7k
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
Patterns Of Architectural Modernization
squer
1
220
Architecting for Scale
squer
0
87
Platform Engineering: It's Not What You Think It Is
squer
0
84
Platform Engineering— the Good, the Bad, and the Ugly
squer
1
210
Your Platform Monolith is Probably a Bad Idea
squer
1
120
Architecting for Scale
squer
0
160
Cultivating Architecture in an Agile World
squer
0
150
Platform Engineering Beyond the Buzzwords
squer
2
170
Micro Frontends —Unraveling the Illusions
squer
0
96
Featured
See All Featured
Navigating Team Friction
lara
183
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Mythical Team-Month
searls
218
43k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Designing for humans not robots
tammielis
248
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Atom: Resistance is Futile
akmur
261
25k
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