Speaker: Sven Kölpin
Facebooks ReactJS ist der neue Stern am Himmel der client-seitigen JavaScript-Bibliotheken. Neben diesem innovativen Framework hat der Software-Gigant zusätzlich ein Pattern veröffentlicht, welches die Nachteile des klassischen MVC-Prinzips umgehen soll: Die Flux-Architektur. Auf Basis dieser Architektur wurden bereits Web-Anwendungen wie facebook.com und instagram.com entwickelt.
2. Herbstcampus 2015 – Flux Application Architecture 2
Model View Controller im Web
ControllerModel View
ClientServer
3. Herbstcampus 2015 – Flux Application Architecture 3
Model View Controller im Web
ControllerModel View
ClientServer
DB ROUTER HTML
HTML
4. Herbstcampus 2015 – Flux Application Architecture 4
Model View Controller im Web
ControllerModel View
ClientServer
DB ROUTER HTML
HTML
Business
Logik
5. Herbstcampus 2015 – Flux Application Architecture 5
Model View Controller im Web
• Applikationsstatus: Entitäten der DB
• Statusänderung:
• Per URL
• Per Form-Submit
• Kein Status im Browser
• View ist „dumm“
• HTML = Server-Status
6. Herbstcampus 2015 – Flux Application Architecture 6
Model View Controller im Web
http://davidatlanta.com/
7. Herbstcampus 2015 – Flux Application Architecture 7
Model View Controller im Web
ControllerModel View
ClientServer
DB
RESTful-
Service
HTML
JavaScript
HTML
JSON
Business
Logik
8. Herbstcampus 2015 – Flux Application Architecture 8
Model View Controller im Web
ControllerModel View
ClientServer
DB
RESTful-
Service
HTML
JavaScript
HTML
JSON
ControllerModel View
Business
Logik
9. Herbstcampus 2015 – Flux Application Architecture 9
Model View Controller im Web
• JavaScript-MVC – Frameworks FTW
• Back to traditional MVC
10. Herbstcampus 2015 – Flux Application Architecture 10
Model View Controller
Controller Model View
updates
queries
notifies
user actions
11. Herbstcampus 2015 – Flux Application Architecture 11
Model View Controller
• Model:
• Verhalten und Status einer Anwendung
• View:
• Visuelle Repräsentation des Models
• Controller:
• Interaktionen, Manipulation des Modells
Controller Model View
updates
queries
notifies
user actions
13. Herbstcampus 2015 – Flux Application Architecture 13
MVC in JavaScript
• MV* oder MVW
• MVC, MVP, MVVM..
• BackboneJS: kein Controller
• AngularJS: MVVM
• ReactJS: nur View
14. Herbstcampus 2015 – Flux Application Architecture 14
MVC in JavaScript
• MV* oder MVW
• MVC, MVP, MVVM..
• BackboneJS: kein Controller
• AngularJS: MVVM
• ReactJS: nur View
Separation of view and logic
15. Herbstcampus 2015 – Flux Application Architecture 15
MVC in JavaScript
Model View
Controller, Router, ..
observer
16. Herbstcampus 2015 – Flux Application Architecture 16
MVC in JavaScript
• Und außerdem:
• Entity-State
• Nicht mehr Vordergründig
• View braucht eigenen State
• UI-State
• Server-State
18. Herbstcampus 2015 – Flux Application Architecture 18
MVC – Facebooks‘ Probleme
Model View
View
View
View
Model
Model
Model
Controller
19. Herbstcampus 2015 – Flux Application Architecture 19
MVC – Facebooks‘ Probleme
Model View
View
View
View
Model
Model
Model
Controller Bidirektional!
20. Herbstcampus 2015 – Flux Application Architecture 20
MVC – Facebooks‘ Probleme
• Beispiel FB-Chat:
• View A: Liste aller Nachrichten,
ungelesene hervorgehoben
• View B: Anzahl ungelesener Nachrichten
21. Herbstcampus 2015 – Flux Application Architecture 21
MVC – Facebooks‘ Probleme
Model
(thread model)
View
View
View
View
Model
(unread thread count
model)
Model
Model
32. Herbstcampus 2015 – Flux Application Architecture 32
Flux im Schnelldurchlauf
View
Action
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
33. Herbstcampus 2015 – Flux Application Architecture 33
Flux im Schnelldurchlauf
View
Action
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
34. Herbstcampus 2015 – Flux Application Architecture 34
Flux im Schnelldurchlauf
View
Action API
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
36. Herbstcampus 2015 – Flux Application Architecture 36
Flux im Detail
View
Action API
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
37. Herbstcampus 2015 – Flux Application Architecture 37
Flux - Views
• Ähnlich MVC-View
• Rufen Actions auf
• Aktualisieren sich selbst
• Hören auf Stores
• View vs. Controller-View
• Controller-View: Kleber zw.
Store und Kind-Views
State
Store
View View
Controller-View
39. Herbstcampus 2015 – Flux Application Architecture 39
Flux - Views
• Besonderheiten:
• Stores geben gesamten Status an die Views
• Komplexitätsreduzierung
• ReactJS: Virtueller DOM-Tree
• Performante Überprüfung auf Änderungen
• Best-Practice: Ein Controller-View für einen Bereich
40. Herbstcampus 2015 – Flux Application Architecture 40
Flux im Detail
View
Action API
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
41. Herbstcampus 2015 – Flux Application Architecture 41
Flux - Actions
• Verarbeitung von Interaktionen
• Vermittlung zw.View und Store
• Action creator
• Sammlung von Funktionen
• Action
• POJO
• Action-Type + Payload
var action = {
actionType: TodoConstants.TODO_CREATE,
payload: {
title :"get milk",
details : "must be soja milk"
}
}
44. Herbstcampus 2015 – Flux Application Architecture 44
Flux - Actions
• Besonderheiten
• Actions über Konstanten definiert
• Übergabe von Actions an Dispatcher
• API-Zugriff erfolgt in den Actions
var SessionStoreConstants = {
LOGIN : "LOGIN",
LOGOUT : "LOGOUT“
…
};
var action = {
actionType: SessionStoreConstants.LOGIN,
data: data
});
AppDispatcher.handleAction(action);
45. Herbstcampus 2015 – Flux Application Architecture 45
Flux im Detail
View
Action API
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
46. Herbstcampus 2015 – Flux Application Architecture 46
Flux - Dispatcher
• Zentraler HUB der Applikation
• Es gibt nur einen Dispatcher!
• Versendet (dispatches) Actions an Stores
• Ähnlich zu pub/sub (JS first-class functions)
• != Controller in MVC!
• Singleton
• Keinerlei Geschäftslogik, ausschließlich pub/sub
• Domänenunabhängig
47. Herbstcampus 2015 – Flux Application Architecture 47
Flux - Dispatcher
Payload
Dispatcher
Store Store Store
48. Herbstcampus 2015 – Flux Application Architecture 48
Flux - Dispatcher
var AppDispatcher = new Dispatcher();
AppDispatcher.handleAction = function(action) {
this.dispatch({
source: 'VIEW_ACTION',
action: action
});
};
var action = {
actionType: SessionStoreConstants.LOGIN,
data: data
});
AppDispatcher.handleAction(action);
50. Herbstcampus 2015 – Flux Application Architecture 50
Flux im Detail
View
Action API
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
Business logic based on action
& payload
emit change event
Update view and
children
51. Herbstcampus 2015 – Flux Application Architecture 51
Flux - Store
• Application state
• Domain-spezifische Daten
• View state
• Businesslogik
• Registriert sich am Dispatcher
• Benachrichtigt Views (über Events)
52. Herbstcampus 2015 – Flux Application Architecture 52
Flux - Store
• != Model in MVC
• View state
• N Domänenobjekte
• Datenfluss:
Controller-View
Store
emit event request state
61. Herbstcampus 2015 – Flux Application Architecture 61
Lösung für alles? (1/2)
• Fluxs‘ Stärken
• Viele Views, kein direkter Domain-Model-Bezug
• N-Models darstellen
• In kleinen CRUD Anwendungen?
• Views passen genau auf Models
• Passende View-Technologie
62. Herbstcampus 2015 – Flux Application Architecture 62
Lösung für alles? (2/2)
• Flux ist gut wenn…
• Daten sich häufig ändern
• Nachvollziehbarer Datenfluss
• Views komplex sind
• Vers. Datenquellen
• Logische Abhängigkeiten
• Views stark voneinander abhängen
• Wenn a, dann auch b und c
63. Herbstcampus 2015 – Flux Application Architecture 63
Kritik an Flux
• FB hat MVC falsch verstanden
• Facebooks‘ MVC-Grafik zu komplex
• 1 Controller?
• View generiert Datenfluss?
• Zu viele Models?
• Flux ist nicht einfacher als MVC!
• Boilerplate
• Aber: erzwingt vorhersehbaren Datenfluss
64. Herbstcampus 2015 – Flux Application Architecture 64
Kritik an Flux
• Flux ist CQRS
• Datenisolation in Layer (Stores)
• Abfrage und
Manipulation
getrennt