Oliver Zeigermann, Stefan Toth – embarc GmbH

Flux – Facebooks Beitrag zur UI-Architektur der Zukunft

UI-Architektur – Warum?

§  User Experience wird wichtiger

§  Rich Client Optionen werden rar

§  Es gibt mehrere Philosophien für UIs im Browser

§  Es gibt eine Vielzahl an Frameworks und Optionen

§  Nachvollziehbarkeit und Komplexität ist oft ein Problem

Die klassische Webanwendung

HTML5 Unobstrusive JavaScript

HTTP

UI-Verhalten HTML Rendering evtl. Anwendungszustand

Die klassische Webanwendung

Häufig genannte Vorteile: §  „So funktioniert das Web“ §  Langlebige und stabile Technologien

Häufige Probleme: §  Abbildung von dynamischem Verhalten §  Verteilter Zustand

Single-Page Applications (SPA)

HTML5 (Typed) JavaScript UI-Verhalten HTML Rendering Anwendungszustand Webservices / JSON

Single-Page Applications (SPA)

HTML5 (Typed) JavaScript UI-Verhalten HTML Rendering Anwendungszustand Webservices / JSON

Single-Page Applications (SPA)

Häufig genannte Vorteile: §  Zustand und UI-Logik an einer Stelle §  Dynamik ... Siehe Nachteile klassische Webapps

Häufige Probleme: §  Mehr JavaScript-Code: Wartbarkeit/Überblick leidet §  JavaScript Frameworks sind kurzlebig

Unidirektionale UI-Architekturen

§  Klarer Datenfluss im UI §  Klare Abbildung von Zustand §  Entkopplung von Anzeigefameworks §  Entkopplung von Server-Seite (Service-Struktur) §  Vertreter:

–  Model-View-Update („Elm Architektur“) –  Model-View-Intent (Cycle.js) –  Om / Om Next (ClojureScript) –  Flux (Architekturidee) –  Redux (Framework abgeleitet von Flux)

Ebene von Unidirektionalen UIs

Flux §  Ein Architektur-Pattern für unidirektionale UIs §  Entstanden bei Facebook §  Bricht mit gängigen Mustern auf UI-Ebene

Flux Einsatz §  Web, Desktop und mobile Apps möglich

Hier beschränken wir uns auf Web-Anwendungen

MVC: Ist das nicht gut genug?

Schwer zu verstehen: wo ist was?

Probleme von MVC-Anwendungen

§  Datenfluss über Listener schwer nachzuvollziehen

§  Zustand ist über viele Modelle verteilt

§  Sogar UI hält temporär Zustand

§  Was ist eigentlich ein Controller? –  Da tut man alles rein, was weder View noch Modell ist

Flux am Beispiel von Redux

Flux/Redux-Konzepte

§  Klare Aufteilung der Anwendung §  Kontrollfluss in eine Richtung §  Zentrale Verwaltung des Zustands

Actions und Action-Creators

§  Actions – Nachrichten, enthalten Typ und Nutzlast

§  Action-Creators – Erzeugen Actions –  können Geschäftslogik enthalten – Machen Server Calls

Store und Reducers §  Store

– Hält zentralen, strukturierten Zustand – Verteilt Actions an Reducer – Aktualisiert UI, wenn Zustand verändert

§  Reducer –  (Alter Zustand, Action) => Neuer Zustand – Keine Seiteneffekte – Mehrere Reducer

UI-Komponenten

§  Controller-Views: – Rufen Action-Creators auf – Bekommen Zustand vom Store – Reichen Zustand und Callbacks an Child-

Views weiter §  Child-Views:

– Reine Darstellung – Aufruf der Callback der Controller-Views

Wozu ist das gut?

§  Aufteilung: Es ist immer klar was wo hin soll, beim Erstellen und Analysieren

§  Kontrollfluss: Dynamische Abhängigkeiten folgen den immer gleichen Mustern –  einfach zu verstehen –  einfach zu debuggen

Zentrale Verwaltung des Zustands

§  Große Teile der Anwendung als reine Funktionen implementiert

§  Seiteneffekte nur in bestimmten Teilen der Anwendung

§  Hot-Reload und Time-Traveling Debugger

Async Aktionen und Seiteneffekte

Live-Demo 1: Eine einfache Redux

Anwendung

Universal Apps

§  Clientseitiges Rendering erlaubt beste Benutzbarkeit und Offline-Fähigkeit

§  Seversertiges Rendering erlaubt SEO und schnelle First-Page-Impression

§  Universal Apps kombinieren beides –  rendern den ersten Request auf der Server-

Seite –  alles weitere passiert im Browser

Universal Apps mit Redux §  Probleme

– Zustand vom Server zum Client – Serverseitig müssen alle Daten vor dem ersten

Rendering vorliegen §  Redux

– Zustand liegt zentral vor, wird mit Seite übertragen

–  Initialer Zustand kann unabhängig vom Rendering ermittelt werden

Eine komplexe Anwendung

Live-Demo 2: Universal App mit

Redux

Daten getriebene Anwendung

§  In realen Applikationen brauchen Komponenten Daten vom Server

§  In Standard-Flux rufen Komponenten Action-Creators auf, um diese über eine REST-Schnittstelle zu laden

Probleme

§  REST-Schnittstelle – Potentiell viele Requests für eine einzige Anzeige – Wie fasst man mehrere Datenänderungen in

einem Commit zusammen? §  Use-Case getriebener Webservice

– Enge Kopplung zwischen "Client und Server "(Granularität, Daten)

Relay und GraphQL

§  Komplementär zu Flux §  Relay:

– deklarative Angabe "welche Daten eine "Komponente braucht

§  Abfrage-Sprache: GraphQL §  Relay holt in einer Abfrage genau die nötigen Daten §  Danach wird die Komponente mit den geholten

Daten automatisch aktualisiert

Anfrage

{

Choice { id,

title, count

}

}

Antwort

{

"Choice": { "id": "choice_1",

"title": "How’s your day?", "count": 2

}

}

Beispiel: Relay/GraphQL

Falcor (Netflix)

§  Komplementär zu Flux §  Alternativ zu Relay + GraphQL §  Abstrahiert den Zugriff auf Daten über

Modelle §  Zugriff auf einen Wert über einen Pfad §  Werte werden über Promises geliefert

Wozu Falcor?

§  Ob, wann und wie Daten vom Server geholt werde, ist in Falcor abstrahiert

§  Batches und Dubletten-Löschung möglich – Server implementiert einen Endpunkt – Alle Daten werden als JSON Graph

übertragen

Code

model.get("greeting“).then(res => ...);

Anfrage

http://localhost:3000/model.json?paths=[[greeting]]&method=get

Antwort

{"jsonGraph":{"greeting":"Hello World"}}

Beispiel: Falcor

The Doctor is In Daten Anforderungen Funktionale

Programmierung A-Z

40 Kann ich Daten im Browser bei Absturz retten?

Kann ich Flux in meiner Java-Desktop-Anwendung nutzen?

Muss man mit Performance-Einbußen rechnen?

Sind die Ideen von Flux brandneu oder geklaut?

60 Was verliere ich durch den Einsatz von Relay/Falcor?

Wie migriere ich meine MVC/MVP-Anwendung?

Sind Stores nicht MVC Models?

Welche Anzeige-frameworks passen am Besten zu Flux?

80 Was ist besser? Falcor oder Relay?

Ist eine UI-Ablösung durch Flux einfacher oder billiger?

Zentraler Zustand? Ist das noch OO?

Gibt es Alternativen zu JavaScript?

100 Wie kann man trotz Asynchronität Konsistenz garantieren?

Wann passt eine klassische WebApp besser als Flux?

Was ist fix, was ist eine Design-Entscheidung in Flux?

Gibt es DAS Flux? Wieso so viele Implementierungen?

Oliver.zeigermann@embarc.de Stefan.toth@embarc.de @djcordhose @st_toth

Vielen Dank.

DOWNLOAD FOLIEN: http://www.embarc.de/blog/