SlideShare ist ein Scribd-Unternehmen logo
1 von 79
Downloaden Sie, um offline zu lesen
Flux Application Architecture
Facebooks' Architekturansatz
Sven Kölpin
open knowledge GmbH
Herbstcampus 2015 – Flux Application Architecture 2
Model View Controller im Web
ControllerModel View
ClientServer
Herbstcampus 2015 – Flux Application Architecture 3
Model View Controller im Web
ControllerModel View
ClientServer
DB ROUTER HTML
HTML
Herbstcampus 2015 – Flux Application Architecture 4
Model View Controller im Web
ControllerModel View
ClientServer
DB ROUTER HTML
HTML
Business
Logik
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
Herbstcampus 2015 – Flux Application Architecture 6
Model View Controller im Web
http://davidatlanta.com/
Herbstcampus 2015 – Flux Application Architecture 7
Model View Controller im Web
ControllerModel View
ClientServer
DB
RESTful-
Service
HTML
JavaScript
HTML
JSON
Business
Logik
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
Herbstcampus 2015 – Flux Application Architecture 9
Model View Controller im Web
• JavaScript-MVC – Frameworks FTW
• Back to traditional MVC
Herbstcampus 2015 – Flux Application Architecture 10
Model View Controller
Controller Model View
updates
queries
notifies
user actions
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
Herbstcampus 2015 – Flux Application Architecture 12
MVC in JavaScript
Herbstcampus 2015 – Flux Application Architecture 13
MVC in JavaScript
• MV* oder MVW
• MVC, MVP, MVVM..
• BackboneJS: kein Controller
• AngularJS: MVVM
• ReactJS: nur View
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
Herbstcampus 2015 – Flux Application Architecture 15
MVC in JavaScript
Model View
Controller, Router, ..
observer
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
Herbstcampus 2015 – Flux Application Architecture 17
Flux
Herbstcampus 2015 – Flux Application Architecture 18
MVC – Facebooks‘ Probleme
Model View
View
View
View
Model
Model
Model
Controller
Herbstcampus 2015 – Flux Application Architecture 19
MVC – Facebooks‘ Probleme
Model View
View
View
View
Model
Model
Model
Controller Bidirektional!
Herbstcampus 2015 – Flux Application Architecture 20
MVC – Facebooks‘ Probleme
• Beispiel FB-Chat:
• View A: Liste aller Nachrichten,
ungelesene hervorgehoben
• View B: Anzahl ungelesener Nachrichten
Herbstcampus 2015 – Flux Application Architecture 21
MVC – Facebooks‘ Probleme
Model
(thread model)
View
View
View
View
Model
(unread thread count
model)
Model
Model
Herbstcampus 2015 – Flux Application Architecture 22
MVC – Facebooks‘ Probleme
• Komplexe Interaktionen
• Einfaches Model-Update  Massenänderungen
• Model triggers View, View triggers Model
• Zirkuläre Abhängigkeiten
• Kein Raum für neue Features
 MVC does not scale © facebook
Herbstcampus 2015 – Flux Application Architecture 23
Flux
© fansshare.com
Excited for the
Flux-solution???
Herbstcampus 2015 – Flux Application Architecture 24
Flux ist…
• Architekturvorschlag (micro-architecture)
• Fokus: Frontend & Webapps
• Kein Framework
• Ziel: Schwächen von MVC eliminieren
• Nachvollziehbare Pfade für Daten
• Änderungen leichter umzusetzen
• Bugs leichter auffindbar
Herbstcampus 2015 – Flux Application Architecture 25
Flux
• Unidirektionaler Datenfluss
Action Dispatcher Store View
Herbstcampus 2015 – Flux Application Architecture 26
Flux
• Unidirektionaler Datenfluss
• View bekommt Daten READONLY
Action Dispatcher Store View
Herbstcampus 2015 – Flux Application Architecture 27
Flux
• Unidirektionaler Datenfluss
• Datenmanipulation synchron durch Actions
• Benachrichtigung von Views über Events (synchron)
Action Dispatcher Store View
Herbstcampus 2015 – Flux Application Architecture 28
Flux im Schnelldurchlauf
Herbstcampus 2015 – Flux Application Architecture 29
Flux im Schnelldurchlauf
View
Herbstcampus 2015 – Flux Application Architecture 30
Flux im Schnelldurchlauf
View
Action
Herbstcampus 2015 – Flux Application Architecture 31
Flux im Schnelldurchlauf
View
Action
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Herbstcampus 2015 – Flux Application Architecture 32
Flux im Schnelldurchlauf
View
Action
Dispatcher
ACTION_CONSTANT,
{PAYLOAD}
Store
Dispatch {PAYLOAD}
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
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
Herbstcampus 2015 – Flux Application Architecture 35
Flux im Detail
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
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
Herbstcampus 2015 – Flux Application Architecture 38
Flux - Views
var SomeView = React.createClass({
getInitialState() {
return {
loggedUser: SessionStore.getLoggedUser()
}
},
componentDidMount() {
SessionStore.addChangeListener(this.onChange);
},
onChange(){
this.setState({
loggedUser: SessionStore.getLoggedUser()
});
},
render() {
return (
<h1> this.state.loggedUser </h1>
);
}
});
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
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
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"
}
}
Herbstcampus 2015 – Flux Application Architecture 42
Flux - Actions
View
Action
Creator
Action
calls
creates
...
login(){
SessionActions.login();
},
render() {
return (
<button onClick={this.login}/>
);
}
var SessionActions = {
login() {
// ...
var action = {
actionType: SessionStoreConstants.LOGIN,
data: …
};
//...
}
};
Herbstcampus 2015 – Flux Application Architecture 43
Flux - Actions
View
Action
Creator
Action
calls
creates
...
login(){
SessionActions.login();
},
render() {
return (
<button onClick={this.login}/>
);
}
var SessionActions = {
login() {
// ...
var loginOnServ =
$.ajax({url: "login", type: "POST"});
loginOnServ.then((data) => {
var action = {
actionType: SessionStoreConstants.LOGIN,
data: data
}
...
});
}
};
API
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);
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
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
Herbstcampus 2015 – Flux Application Architecture 47
Flux - Dispatcher
Payload
Dispatcher
Store Store Store
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);
Herbstcampus 2015 – Flux Application Architecture 49
Flux - Dispatcher
• Besonderheiten
• Dispatcher arbeitet synchron
• Dispatcher berücksichtigt Abhängigkeiten zw. Stores
• waitFor-Methode
• Erkennt zirkuläre Abhängigkeiten
• Implementierung von FB verfügbar
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
Herbstcampus 2015 – Flux Application Architecture 51
Flux - Store
• Application state
• Domain-spezifische Daten
• View state
• Businesslogik
• Registriert sich am Dispatcher
• Benachrichtigt Views (über Events)
Herbstcampus 2015 – Flux Application Architecture 52
Flux - Store
• != Model in MVC
• View state
• N Domänenobjekte
• Datenfluss:
Controller-View
Store
emit event request state
Herbstcampus 2015 – Flux Application Architecture 53
Flux - Store
class SessionStore extends EventEmitter {
constructor() {
super();
this.loggedUser = null;
this.loading = false;
}
onLogin(data){
this.loading = false;
this.loggedUser = data.userName;
this.emit("change");
}
onLoad(){
this.loading = true;
this.emit("change");
}
}
Herbstcampus 2015 – Flux Application Architecture 54
Flux - Store
var sessionStore = new SessionStore();
AppDispatcher.register(function (action) {
switch(action.actionType){
case SessionStoreConstants.LOGIN:
sessionStore.onLogin(action.data);
break;
...
}
});
• Store registrieren
Herbstcampus 2015 – Flux Application Architecture 55
Flux - Store
• Besonderheiten
• Stores nur über Actions veränderbar
• Keine setter (konsistenter Status)
• Stores sollen synchron sein
• Keine API-Calls
• Einfacher Datenfluss!
• Umgang mit abgeleiteten Daten (derived data)
• Frage an viele Domänenobjekte (z.B. FB-Chat)
Herbstcampus 2015 – Flux Application Architecture 56
Flux
• Wie skaliert Flux?
ActionStore View
View
View
View
Store
Store
Store
Action
Action
Action
Dispatcher
Herbstcampus 2015 – Flux Application Architecture 57
Flux
• Wie skaliert Flux?
ActionStore View
View
View
View
Store
Store
Store
Action
Action
Action
Dispatcher
Herbstcampus 2015 – Flux Application Architecture 58
Flux ohne ReactJS
Herbstcampus 2015 – Flux Application Architecture 59
Flux ohne ReactJS
• Flux in anderen Technologien / Frameworks
• Swift
• AngularJS
• Backbone
• …
• Framework auf Framework…
• Stores sagen nicht, was sich geändert hat
• ReactJs-Virtual-DOM-Diff
 Universal JavaScript
Herbstcampus 2015 – Flux Application Architecture 60
Lösung für alles?
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
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
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
Herbstcampus 2015 – Flux Application Architecture 64
Kritik an Flux
• Flux ist CQRS
• Datenisolation in Layer (Stores)
• Abfrage und
Manipulation
getrennt
Herbstcampus 2015 – Flux Application Architecture 65
Give Flux a try!
Vielen Dank!
Sven Kölpin
open knowledge GmbH
Herbstcampus 2015 – Flux Application Architecture 67
Flux Implementierungen
http://www.redspy.co.uk/
Herbstcampus 2015 – Flux Application Architecture 68
Flux Implementierungen
• Facebooks‘ Implementierung: Boilerplate!
• Vielzahl an Flux-Implementierungen
• Boilerplate minimieren
• Architektur erweitern & vereinfachen
• Isomorphic
• Serverside rendering
• Für andere Technologien als JS
Herbstcampus 2015 – Flux Application Architecture 69
Flux Implementierungen
• Reflux
• Flux-Architektur verändern
• Fluxxor
• Flux-Architektur beibehalten
Herbstcampus 2015 – Flux Application Architecture 70
Reflux
Herbstcampus 2015 – Flux Application Architecture 71
Reflux
• Ziele:
• Architektur vereinfachen
• Flux funktionaler & dynamischer machen
• Gemeinsamkeiten mit Flux
• Views
• Actions
• Stores
• Unidirektionaler Datenfluss
• Unterschiede
• Kein Dispatcher
• Keine action creators
Herbstcampus 2015 – Flux Application Architecture 72
Reflux
• Kein Dispatcher
• Action = function
• Action = listenable
• Action = Dispatcher
• Stores subscribe actions
Action
(listenable)
Store
(listens)
View
Herbstcampus 2015 – Flux Application Architecture 73
Reflux
• Kein Dispatcher
• Action = function
• Action = listenable
• Action = Dispatcher
• Stores subscribe actions
Action
(listenable)
Store
(listens)
View
 Keine Action-Konstanten
 Keine switch-statements
 Funktionale
Programmierung
 Stores can listen to Stores
Herbstcampus 2015 – Flux Application Architecture 74
Fluxxor
Herbstcampus 2015 – Flux Application Architecture 75
Fluxxor
• Folgt exaktem Flux-Architekturvorschlag
• Mindert Boilerplate-Code
Herbstcampus 2015 – Flux Application Architecture 76
Fluxxor
Action Dispatcher Store View
Herbstcampus 2015 – Flux Application Architecture 77
Fluxxor
Action Dispatcher Store View
var SessionStore = Fluxxor.createStore({
initialize() {
this.loggedUser = null;
this.bindActions(
"LOGIN", this.onLogin
);
},
onLogin(userName){
this.loggedUser = userName;
this.emit("change");
}
});
Herbstcampus 2015 – Flux Application Architecture 78
Fluxxor
var SessionActions = {
login(userName) {
//...
this
.dispatch("LOGIN",userName);
}
};
Action Dispatcher Store View
var SessionStore = Fluxxor.createStore({
initialize() {
this.loggedUser = null;
this.bindActions(
"LOGIN", this.onLogin
);
},
onLogin(userName){
this.loggedUser = userName;
this.emit("change");
}
});
Herbstcampus 2015 – Flux Application Architecture 79
Fluxxor
var SessionActions = {
login(userName) {
//...
this
.dispatch("LOGIN",userName);
}
};
Action Disp. Store View
var SessionStore = Fluxxor.createStore({
initialize() {
this.loggedUser = null;
this.bindActions(
"LOGIN", this.onLogin
);
},
onLogin(userName){
this.loggedUser = userName;
this.emit("change");
}
});
var LoginView = React.createClass({
mixins: [Fluxxor.StoreWatchMixin("SessionStore")],
getStateFromFlux() {
var store = this.getFlux().store("SessionStore");
return {
loginState: store.loggedUser
};
},
onLogin() {
this.getFlux().actions.SessionActions.login();
},
render() {
return (
<button onClick={this.onLogin}/>
);
}
});

Weitere ähnliche Inhalte

Andere mochten auch

Direct INFO for Healthcare sector in Russia
Direct INFO for Healthcare sector in RussiaDirect INFO for Healthcare sector in Russia
Direct INFO for Healthcare sector in Russiadirectinforu
 
Consumer Credit Analysis
Consumer Credit AnalysisConsumer Credit Analysis
Consumer Credit AnalysisHammad Ahmad
 
профілактика грві
профілактика грвіпрофілактика грві
профілактика грвіnatalibio
 
CRM pour les entreprises du secteur de l'assurance
CRM pour les entreprises du secteur de l'assuranceCRM pour les entreprises du secteur de l'assurance
CRM pour les entreprises du secteur de l'assuranceEfficy CRM
 
веселые ребята. шаблон.12 атематика
веселые ребята. шаблон.12 атематикавеселые ребята. шаблон.12 атематика
веселые ребята. шаблон.12 атематикаbakirova
 
таланти нашого класу
таланти нашого класуталанти нашого класу
таланти нашого класуnatalibio
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 

Andere mochten auch (14)

гр №7
гр №7гр №7
гр №7
 
RSE_EPM
RSE_EPMRSE_EPM
RSE_EPM
 
Direct INFO for Healthcare sector in Russia
Direct INFO for Healthcare sector in RussiaDirect INFO for Healthcare sector in Russia
Direct INFO for Healthcare sector in Russia
 
Consumer Credit Analysis
Consumer Credit AnalysisConsumer Credit Analysis
Consumer Credit Analysis
 
профілактика грві
профілактика грвіпрофілактика грві
профілактика грві
 
грип
грипгрип
грип
 
The Day after
The Day afterThe Day after
The Day after
 
CRM pour les entreprises du secteur de l'assurance
CRM pour les entreprises du secteur de l'assuranceCRM pour les entreprises du secteur de l'assurance
CRM pour les entreprises du secteur de l'assurance
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
300
300300
300
 
веселые ребята. шаблон.12 атематика
веселые ребята. шаблон.12 атематикавеселые ребята. шаблон.12 атематика
веселые ребята. шаблон.12 атематика
 
таланти нашого класу
таланти нашого класуталанти нашого класу
таланти нашого класу
 
React js
React jsReact js
React js
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 

Ähnlich wie Die Flux Application Architecture - Facebooks Ansatz für Client-side Web Applications

DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenAndreas Rosen
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm softwareDNUG e.V.
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungNETUserGroupBern
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Thomas Maier
 
CQRS in der Praxis - Newsletter Double-Opt-In
CQRS in der Praxis - Newsletter Double-Opt-InCQRS in der Praxis - Newsletter Double-Opt-In
CQRS in der Praxis - Newsletter Double-Opt-InPHP in DD
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt socDaniel Fisher
 
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce ConnectEvaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connectcomspace GmbH & Co. KG
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Cloud Observability mit Loki, Prometheus, Tempo und Grafana
Cloud Observability mit Loki, Prometheus, Tempo und GrafanaCloud Observability mit Loki, Prometheus, Tempo und Grafana
Cloud Observability mit Loki, Prometheus, Tempo und GrafanaQAware GmbH
 
Vergleich SAP CRM vs. Cloud for Customer (C4C)
Vergleich SAP CRM vs. Cloud for Customer (C4C)Vergleich SAP CRM vs. Cloud for Customer (C4C)
Vergleich SAP CRM vs. Cloud for Customer (C4C)Stefan Sickert
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das webgedoplan
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptOPEN KNOWLEDGE GmbH
 
Best practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apiBest practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apie-dialog GmbH
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleichgedoplan
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft AG
 

Ähnlich wie Die Flux Application Architecture - Facebooks Ansatz für Client-side Web Applications (20)

DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrierenDNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
DNUG - Andreas Rosen - IBM Software und Salesforce sinnvoll integrieren
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web Toolkit
 
Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020
 
CQRS in der Praxis - Newsletter Double-Opt-In
CQRS in der Praxis - Newsletter Double-Opt-InCQRS in der Praxis - Newsletter Double-Opt-In
CQRS in der Praxis - Newsletter Double-Opt-In
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Swisscom runs SAP Lumira
Swisscom runs SAP LumiraSwisscom runs SAP Lumira
Swisscom runs SAP Lumira
 
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce ConnectEvaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Cloud Observability mit Loki, Prometheus, Tempo und Grafana
Cloud Observability mit Loki, Prometheus, Tempo und GrafanaCloud Observability mit Loki, Prometheus, Tempo und Grafana
Cloud Observability mit Loki, Prometheus, Tempo und Grafana
 
Vergleich SAP CRM vs. Cloud for Customer (C4C)
Vergleich SAP CRM vs. Cloud for Customer (C4C)Vergleich SAP CRM vs. Cloud for Customer (C4C)
Vergleich SAP CRM vs. Cloud for Customer (C4C)
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
Best practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics apiBest practise 5 anwendungsfälle der google analytics api
Best practise 5 anwendungsfälle der google analytics api
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVC
 

Mehr von OPEN KNOWLEDGE GmbH

Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!OPEN KNOWLEDGE GmbH
 
From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. OPEN KNOWLEDGE GmbH
 
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoReady for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoOPEN KNOWLEDGE GmbH
 
Shared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenShared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenOPEN KNOWLEDGE GmbH
 
Machine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsMachine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsOPEN KNOWLEDGE GmbH
 
It's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeIt's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeOPEN KNOWLEDGE GmbH
 
Shared Data in verteilten Systemen
Shared Data in verteilten SystemenShared Data in verteilten Systemen
Shared Data in verteilten SystemenOPEN KNOWLEDGE GmbH
 
Mehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungMehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungOPEN KNOWLEDGE GmbH
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingOPEN KNOWLEDGE GmbH
 
Supersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusSupersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusOPEN KNOWLEDGE GmbH
 
Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!OPEN KNOWLEDGE GmbH
 
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?OPEN KNOWLEDGE GmbH
 
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“OPEN KNOWLEDGE GmbH
 
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...OPEN KNOWLEDGE GmbH
 
Die Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesDie Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesOPEN KNOWLEDGE GmbH
 

Mehr von OPEN KNOWLEDGE GmbH (20)

Nie wieder Log-Files!
Nie wieder Log-Files!Nie wieder Log-Files!
Nie wieder Log-Files!
 
Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!
 
From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud.
 
API Expand Contract
API Expand ContractAPI Expand Contract
API Expand Contract
 
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoReady for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
 
Shared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenShared Data in verteilten Architekturen
Shared Data in verteilten Architekturen
 
Machine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsMachine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.js
 
KI und Architektur
KI und ArchitekturKI und Architektur
KI und Architektur
 
It's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeIt's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale Netze
 
Shared Data in verteilten Systemen
Shared Data in verteilten SystemenShared Data in verteilten Systemen
Shared Data in verteilten Systemen
 
Business-Mehrwert durch KI
Business-Mehrwert durch KIBusiness-Mehrwert durch KI
Business-Mehrwert durch KI
 
Mehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungMehr Sicherheit durch Automatisierung
Mehr Sicherheit durch Automatisierung
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und Testing
 
Supersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusSupersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: Quarkus
 
Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!
 
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
 
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
 
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
 
Serverless Survival Guide
Serverless Survival GuideServerless Survival Guide
Serverless Survival Guide
 
Die Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von MicroservicesDie Matrix: Enterprise-Architekturen jenseits von Microservices
Die Matrix: Enterprise-Architekturen jenseits von Microservices
 

Die Flux Application Architecture - Facebooks Ansatz für Client-side Web Applications

  • 1. Flux Application Architecture Facebooks' Architekturansatz Sven Kölpin open knowledge GmbH
  • 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
  • 12. Herbstcampus 2015 – Flux Application Architecture 12 MVC in JavaScript
  • 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
  • 17. Herbstcampus 2015 – Flux Application Architecture 17 Flux
  • 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
  • 22. Herbstcampus 2015 – Flux Application Architecture 22 MVC – Facebooks‘ Probleme • Komplexe Interaktionen • Einfaches Model-Update  Massenänderungen • Model triggers View, View triggers Model • Zirkuläre Abhängigkeiten • Kein Raum für neue Features  MVC does not scale © facebook
  • 23. Herbstcampus 2015 – Flux Application Architecture 23 Flux © fansshare.com Excited for the Flux-solution???
  • 24. Herbstcampus 2015 – Flux Application Architecture 24 Flux ist… • Architekturvorschlag (micro-architecture) • Fokus: Frontend & Webapps • Kein Framework • Ziel: Schwächen von MVC eliminieren • Nachvollziehbare Pfade für Daten • Änderungen leichter umzusetzen • Bugs leichter auffindbar
  • 25. Herbstcampus 2015 – Flux Application Architecture 25 Flux • Unidirektionaler Datenfluss Action Dispatcher Store View
  • 26. Herbstcampus 2015 – Flux Application Architecture 26 Flux • Unidirektionaler Datenfluss • View bekommt Daten READONLY Action Dispatcher Store View
  • 27. Herbstcampus 2015 – Flux Application Architecture 27 Flux • Unidirektionaler Datenfluss • Datenmanipulation synchron durch Actions • Benachrichtigung von Views über Events (synchron) Action Dispatcher Store View
  • 28. Herbstcampus 2015 – Flux Application Architecture 28 Flux im Schnelldurchlauf
  • 29. Herbstcampus 2015 – Flux Application Architecture 29 Flux im Schnelldurchlauf View
  • 30. Herbstcampus 2015 – Flux Application Architecture 30 Flux im Schnelldurchlauf View Action
  • 31. Herbstcampus 2015 – Flux Application Architecture 31 Flux im Schnelldurchlauf View Action Dispatcher ACTION_CONSTANT, {PAYLOAD}
  • 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
  • 35. Herbstcampus 2015 – Flux Application Architecture 35 Flux im Detail
  • 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
  • 38. Herbstcampus 2015 – Flux Application Architecture 38 Flux - Views var SomeView = React.createClass({ getInitialState() { return { loggedUser: SessionStore.getLoggedUser() } }, componentDidMount() { SessionStore.addChangeListener(this.onChange); }, onChange(){ this.setState({ loggedUser: SessionStore.getLoggedUser() }); }, render() { return ( <h1> this.state.loggedUser </h1> ); } });
  • 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" } }
  • 42. Herbstcampus 2015 – Flux Application Architecture 42 Flux - Actions View Action Creator Action calls creates ... login(){ SessionActions.login(); }, render() { return ( <button onClick={this.login}/> ); } var SessionActions = { login() { // ... var action = { actionType: SessionStoreConstants.LOGIN, data: … }; //... } };
  • 43. Herbstcampus 2015 – Flux Application Architecture 43 Flux - Actions View Action Creator Action calls creates ... login(){ SessionActions.login(); }, render() { return ( <button onClick={this.login}/> ); } var SessionActions = { login() { // ... var loginOnServ = $.ajax({url: "login", type: "POST"}); loginOnServ.then((data) => { var action = { actionType: SessionStoreConstants.LOGIN, data: data } ... }); } }; API
  • 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);
  • 49. Herbstcampus 2015 – Flux Application Architecture 49 Flux - Dispatcher • Besonderheiten • Dispatcher arbeitet synchron • Dispatcher berücksichtigt Abhängigkeiten zw. Stores • waitFor-Methode • Erkennt zirkuläre Abhängigkeiten • Implementierung von FB verfügbar
  • 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
  • 53. Herbstcampus 2015 – Flux Application Architecture 53 Flux - Store class SessionStore extends EventEmitter { constructor() { super(); this.loggedUser = null; this.loading = false; } onLogin(data){ this.loading = false; this.loggedUser = data.userName; this.emit("change"); } onLoad(){ this.loading = true; this.emit("change"); } }
  • 54. Herbstcampus 2015 – Flux Application Architecture 54 Flux - Store var sessionStore = new SessionStore(); AppDispatcher.register(function (action) { switch(action.actionType){ case SessionStoreConstants.LOGIN: sessionStore.onLogin(action.data); break; ... } }); • Store registrieren
  • 55. Herbstcampus 2015 – Flux Application Architecture 55 Flux - Store • Besonderheiten • Stores nur über Actions veränderbar • Keine setter (konsistenter Status) • Stores sollen synchron sein • Keine API-Calls • Einfacher Datenfluss! • Umgang mit abgeleiteten Daten (derived data) • Frage an viele Domänenobjekte (z.B. FB-Chat)
  • 56. Herbstcampus 2015 – Flux Application Architecture 56 Flux • Wie skaliert Flux? ActionStore View View View View Store Store Store Action Action Action Dispatcher
  • 57. Herbstcampus 2015 – Flux Application Architecture 57 Flux • Wie skaliert Flux? ActionStore View View View View Store Store Store Action Action Action Dispatcher
  • 58. Herbstcampus 2015 – Flux Application Architecture 58 Flux ohne ReactJS
  • 59. Herbstcampus 2015 – Flux Application Architecture 59 Flux ohne ReactJS • Flux in anderen Technologien / Frameworks • Swift • AngularJS • Backbone • … • Framework auf Framework… • Stores sagen nicht, was sich geändert hat • ReactJs-Virtual-DOM-Diff  Universal JavaScript
  • 60. Herbstcampus 2015 – Flux Application Architecture 60 Lösung für alles?
  • 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
  • 65. Herbstcampus 2015 – Flux Application Architecture 65 Give Flux a try!
  • 67. Herbstcampus 2015 – Flux Application Architecture 67 Flux Implementierungen http://www.redspy.co.uk/
  • 68. Herbstcampus 2015 – Flux Application Architecture 68 Flux Implementierungen • Facebooks‘ Implementierung: Boilerplate! • Vielzahl an Flux-Implementierungen • Boilerplate minimieren • Architektur erweitern & vereinfachen • Isomorphic • Serverside rendering • Für andere Technologien als JS
  • 69. Herbstcampus 2015 – Flux Application Architecture 69 Flux Implementierungen • Reflux • Flux-Architektur verändern • Fluxxor • Flux-Architektur beibehalten
  • 70. Herbstcampus 2015 – Flux Application Architecture 70 Reflux
  • 71. Herbstcampus 2015 – Flux Application Architecture 71 Reflux • Ziele: • Architektur vereinfachen • Flux funktionaler & dynamischer machen • Gemeinsamkeiten mit Flux • Views • Actions • Stores • Unidirektionaler Datenfluss • Unterschiede • Kein Dispatcher • Keine action creators
  • 72. Herbstcampus 2015 – Flux Application Architecture 72 Reflux • Kein Dispatcher • Action = function • Action = listenable • Action = Dispatcher • Stores subscribe actions Action (listenable) Store (listens) View
  • 73. Herbstcampus 2015 – Flux Application Architecture 73 Reflux • Kein Dispatcher • Action = function • Action = listenable • Action = Dispatcher • Stores subscribe actions Action (listenable) Store (listens) View  Keine Action-Konstanten  Keine switch-statements  Funktionale Programmierung  Stores can listen to Stores
  • 74. Herbstcampus 2015 – Flux Application Architecture 74 Fluxxor
  • 75. Herbstcampus 2015 – Flux Application Architecture 75 Fluxxor • Folgt exaktem Flux-Architekturvorschlag • Mindert Boilerplate-Code
  • 76. Herbstcampus 2015 – Flux Application Architecture 76 Fluxxor Action Dispatcher Store View
  • 77. Herbstcampus 2015 – Flux Application Architecture 77 Fluxxor Action Dispatcher Store View var SessionStore = Fluxxor.createStore({ initialize() { this.loggedUser = null; this.bindActions( "LOGIN", this.onLogin ); }, onLogin(userName){ this.loggedUser = userName; this.emit("change"); } });
  • 78. Herbstcampus 2015 – Flux Application Architecture 78 Fluxxor var SessionActions = { login(userName) { //... this .dispatch("LOGIN",userName); } }; Action Dispatcher Store View var SessionStore = Fluxxor.createStore({ initialize() { this.loggedUser = null; this.bindActions( "LOGIN", this.onLogin ); }, onLogin(userName){ this.loggedUser = userName; this.emit("change"); } });
  • 79. Herbstcampus 2015 – Flux Application Architecture 79 Fluxxor var SessionActions = { login(userName) { //... this .dispatch("LOGIN",userName); } }; Action Disp. Store View var SessionStore = Fluxxor.createStore({ initialize() { this.loggedUser = null; this.bindActions( "LOGIN", this.onLogin ); }, onLogin(userName){ this.loggedUser = userName; this.emit("change"); } }); var LoginView = React.createClass({ mixins: [Fluxxor.StoreWatchMixin("SessionStore")], getStateFromFlux() { var store = this.getFlux().store("SessionStore"); return { loginState: store.loggedUser }; }, onLogin() { this.getFlux().actions.SessionActions.login(); }, render() { return ( <button onClick={this.onLogin}/> ); } });