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

Flux Application ArchitectureFacebooks' Architekturansatz

Sven Kölpinopen knowledge GmbH

Herbstcampus 2015 – Flux Application Architecture 2

Model View Controller im Web

ControllerModel View

ClientServer




ClientServer

DB ROUTER HTML

HTML




ClientServer

DB ROUTER HTML

HTML

Business

Logik



• Applikationsstatus: Entitäten der DB

• Statusänderung: • Per URL

• Per Form-Submit

• Kein Status im Browser• View ist „dumm“

• HTML = Server-Status



http://davidatlanta.com/




ClientServer

DBRESTful-

Service

HTML

JavaScript

HTML

JSON

Business

Logik




ClientServer

DBRESTful-

Service

HTML

JavaScript

HTML

JSON


Business

Logik



• JavaScript-MVC – Frameworks FTW

• Back to traditional MVC


Model View Controller

Controller Model Viewupdates

queries

notifies

user actions


Model View Controller

• Model:• Verhalten und Status einer Anwendung

• View:• Visuelle Repräsentation des Models

• Controller:• Interaktionen, Manipulation des Modells

Controller Model Viewupdates

queries

notifies

user actions


MVC in JavaScript


MVC in JavaScript

• MV* oder MVW• MVC, MVP, MVVM..

• BackboneJS: kein Controller

• AngularJS: MVVM

• ReactJS: nur View


MVC in JavaScript

• MV* oder MVW• MVC, MVP, MVVM..

• BackboneJS: kein Controller

• AngularJS: MVVM

• ReactJS: nur View

Separation of view and logic


MVC in JavaScript

Model View

Controller, Router, ..

observer


MVC in JavaScript

• Und außerdem:

• Entity-State

• Nicht mehr Vordergründig

• View braucht eigenen State

• UI-State

• Server-State


Flux


MVC – Facebooks‘ Probleme

Model View

View

View

View

Model

Model

Model

Controller



Model View

View

View

View

Model

Model

Model

Controller Bidirektional!



• Beispiel FB-Chat:

• View A: Liste aller Nachrichten,

ungelesene hervorgehoben

• View B: Anzahl ungelesener Nachrichten



Model(thread model)

View

View

View

View

Model(unread thread count

model)

Model

Model



• 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


Flux

© fansshare.com

Excited for the

Flux-solution???


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


Flux

• Unidirektionaler Datenfluss

Action Dispatcher Store View


Flux


• View bekommt Daten READONLY



Flux


• Datenmanipulation synchron durch Actions• Benachrichtigung von Views über Events (synchron)



Flux im Schnelldurchlauf



View



View

Action



View

Action

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}



View

Action

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}



View

Action

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}

Business logic based on action

& payload

emit change event

Update view and

children



View

Action API

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}


& payload

emit change event

Update view and

children


Flux im Detail


Flux im Detail

View

Action API

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}


& payload

emit change event

Update view and

children


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-ViewsState

Store

View View

Controller-View


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>

);

}

});


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


Flux im Detail

View

Action API

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}


& payload

emit change event

Update view and

children


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"

}

}


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: …

};

//...

}

};


Flux - Actions

View

Action

Creator

Action

calls

creates

...

login(){

SessionActions.login();

},

render() {

return (

<button onClick={this.login}/>

);

}


login() {

// ...

var loginOnServ =

$.ajax({url: "login", type: "POST"});

loginOnServ.then((data) => {

var action = {


data: data

}

...

});

}

};

API


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 = {


data: data

});

AppDispatcher.handleAction(action);


Flux im Detail

View

Action API

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}


& payload

emit change event

Update view and

children


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


Flux - Dispatcher

Payload

Dispatcher

Store Store Store


Flux - Dispatcher

var AppDispatcher = new Dispatcher();

AppDispatcher.handleAction = function(action) {

this.dispatch({

source: 'VIEW_ACTION',

action: action

});

};

var action = {


data: data

});

AppDispatcher.handleAction(action);


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


Flux im Detail

View

Action API

Dispatcher

ACTION_CONSTANT,

{PAYLOAD}

Store

Dispatch {PAYLOAD}


& payload

emit change event

Update view and

children


Flux - Store

• Application state• Domain-spezifische Daten

• View state

• Businesslogik

• Registriert sich am Dispatcher

• Benachrichtigt Views (über Events)


Flux - Store

• != Model in MVC• View state

• N Domänenobjekte

• Datenfluss:

Controller-View

Store

emit event request state


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;


}

}


Flux - Store

var sessionStore = new SessionStore();

AppDispatcher.register(function (action) {

switch(action.actionType){

case SessionStoreConstants.LOGIN:

sessionStore.onLogin(action.data);

break;

...

}

});

• Store registrieren


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)


Flux

• Wie skaliert Flux?

ActionStore View

View

View

View

Store

Store

Store

Action

Action

Action

Dispatcher


Flux

• Wie skaliert Flux?

ActionStore View

View

View

View

Store

Store

Store

Action

Action

Action

Dispatcher


Flux ohne ReactJS


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


Lösung für alles?


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


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


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


Kritik an Flux

• Flux ist CQRS • Datenisolation in Layer (Stores)

• Abfrage und

Manipulation

getrennt


Give Flux a try!

Vielen Dank!

Sven Kölpinopen knowledge GmbH


Flux Implementierungen

http://www.redspy.co.uk/



• Facebooks‘ Implementierung: Boilerplate!

• Vielzahl an Flux-Implementierungen

• Boilerplate minimieren

• Architektur erweitern & vereinfachen

• Isomorphic

• Serverside rendering

• Für andere Technologien als JS



• Reflux• Flux-Architektur verändern

• Fluxxor• Flux-Architektur beibehalten


Reflux


Reflux

• Ziele:• Architektur vereinfachen

• Flux funktionaler & dynamischer machen

• Gemeinsamkeiten mit Flux• Views

• Actions

• Stores


• Unterschiede• Kein Dispatcher

• Keine action creators


Reflux

• Kein Dispatcher

• Action = function

• Action = listenable

• Action = Dispatcher

• Stores subscribe actions

Action(listenable)

Store(listens)

View


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


Fluxxor


Fluxxor

• Folgt exaktem Flux-Architekturvorschlag

• Mindert Boilerplate-Code


Fluxxor



Fluxxor


var SessionStore = Fluxxor.createStore({

initialize() {


this.bindActions(

"LOGIN", this.onLogin

);

},

onLogin(userName){

this.loggedUser = userName;


}

});


Fluxxor


login(userName) {

//...

this

.dispatch("LOGIN",userName);

}

};



initialize() {


this.bindActions(


);

},

onLogin(userName){



}

});


Fluxxor


login(userName) {

//...

this

.dispatch("LOGIN",userName);

}

};

Action Disp. Store View


initialize() {


this.bindActions(


);

},

onLogin(userName){



}

});

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}/>

);

}

});

Software

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