Flux - embarcRelay und GraphQL Komplementär zu Flux Relay: – deklarative Angabe "welche Daten...
Transcript of Flux - embarcRelay und GraphQL Komplementär zu Flux Relay: – deklarative Angabe "welche Daten...
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?
[email protected] [email protected] @djcordhose @st_toth
Vielen Dank.
DOWNLOAD FOLIEN: http://www.embarc.de/blog/