Oliver Zeigermann, Stefan Toth embarc GmbH. Flux Facebooks Beitrag zur UI- Architektur der Zukunft

Transkript

1 Oliver Zeigermann, Stefan Toth embarc GmbH Flux Facebooks Beitrag zur UI- Architektur der Zukunft

2 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

3 Die klassische Webanwendung HTML5 Unobstrusive JavaScript HTTP UI-Verhalten HTML Rendering evtl. Anwendungszustand

4 Die klassische Webanwendung Häufig genannte Vorteile: So funktioniert das Web Langlebige und stabile Technologien Häufige Probleme: Abbildung von dynamischem Verhalten Verteilter Zustand

5 Single-Page Applications (SPA) HTML5 (Typed) JavaScript UI-Verhalten HTML Rendering Anwendungszustand Webservices / JSON

6 Single-Page Applications (SPA) HTML5 (Typed) JavaScript UI-Verhalten HTML Rendering Anwendungszustand Webservices / JSON

7 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

8 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)

9 Ebene von Unidirektionalen UIs

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

11 Flux Einsatz Web, Desktop und mobile Apps möglich Hier beschränken wir uns auf Web- Anwendungen

12 MVC: Ist das nicht gut genug?

13 Schwer zu verstehen: wo ist was?

14 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

15 Flux am Beispiel von Redux

16 Flux/Redux-Konzepte Klare Aufteilung der Anwendung Kontrollfluss in eine Richtung Zentrale Verwaltung des Zustands

17 Actions und Action-Creators Actions Nachrichten, enthalten Typ und Nutzlast Action-Creators Erzeugen Actions können Geschäftslogik enthalten Machen Server Calls

18 Store Store und Reducers 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

19 Controller-Views: UI-Komponenten 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

20 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

21 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

22 Async Aktionen und Seiteneffekte

23 Live-Demo 1: Eine einfache Redux Anwendung

24 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

25 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

26 Eine komplexe Anwendung

27 Live-Demo 2: Universal App mit Redux

28 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

29 REST-Schnittstelle Probleme 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)

30 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

31 Beispiel: Relay/GraphQL Anfrage Antwort { } Choice { id, } title, count { } "Choice": { "id": "choice_1", } "title": "How s your day?", "count": 2

32 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

33 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

34 Code model.get("greeting ).then(res =>...); Anfrage paths=[[greeting]]&method=get Antwort Beispiel: Falcor {"jsongraph":{"greeting":"hello World"}}

35 The Doctor is In Daten Anforderungen Funktionale Programmierung Kann ich Daten im Browser bei Absturz retten? Was verliere ich durch den Einsatz von Relay/Falcor? Kann ich Flux in meiner Java- Desktop-Anwendung nutzen? Wie migriere ich meine MVC/MVP- Anwendung? Muss man mit Performance- Einbußen rechnen? Sind Stores nicht MVC Models? A-Z Sind die Ideen von Flux brandneu oder geklaut? Welche Anzeigeframeworks 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?

36 Vielen Dank. DOWNLOAD FOLIEN: