restful frontend-architecture
TRANSCRIPT
05/16/12
RESTful Web-UI Architecture
Sandro Sonntag, Technical Lead
adorsys GmbH & Co. KG
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Die Probleme von herkömmlichenThin-Client-Architekturen
2
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Daten und Repräsentationsind vermischt
Browser Server
Name Foo
Nachname Bar
Str Laufer-Str 99
➡Datenstrukturen?➡Datentypen?
<html><body>
<span>Name: Foo</span>
➡Daten und Repäsentation gemischt
➡Präsentationsflow und
Datenaustausch gemischt
3
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Resourcen am Client werden nicht genutzt
Rich-Server
berechnet dasGUI
für jedenClient
Client
Client
Client
4
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Usability erfordert eine flüssige Bedienung.
Hohe Latenz
Seite 1 Seite 2 Seite 3 Seite 4
Browser
GET POST POST POST
➡Herkömmliche Webapps reagieren zu langsam auf Benutzer-Interaktionen.
5
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Komplexität
Präsentationslogik ist am Client und Server
Webframework ein Codegenerator für HTML & JS(denken in 2 Dimensionen - sehr umständlich)
HTML muss erst in Server Templates verpackt werden
Debugging in zwei Laufzeitumgebungen (Client/Server)
Der meiste Code dreht sich um das Event/Request Handling (Serialisierung, Protokoll quirx)
Korrektes State Handling unmöglich
Client Code(HTML, JS, CSS)
Webframework
Ge
ne
rate
GU
I Eve
nts
State
6
State
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
UI-State am Server
Problem: Statemanagement
State am Client muss nicht zum Server State passen.Fehlerbehandlung hierfür ist komplex.
Client muss immer auf den richtigen Server geroutet werden
Skalierung und Failover ein echtes Problem (und sehr teuer)
Speicherverbrauch am Server (Beispiel JSF Component Tree)
Server behelfen sich mit Sessiontimeouts (Session bleibt meist noch 30 Minuten wenn der User bereits weg ist)
7
05/16/12
Offlinefähigkeit
Nicht möglich
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Fehlende Interoperabilität
HTML Markup ist keine Schnittstelle
Echte Services sind häufig nicht von „außen“ zugreifbar (z.B. Spring Services)• ... nein, man kann Sie nicht einfach zum Webservice machen!
◦ es ist ein fundamentaler Unterschied ob ein Service als WebService oder lokaler Service konzeptioniert wurde (Fehlerbehandlung, Call by Value, Granularität)
• Ergo: Webservice Projekte müssen von 0 starten
◦ Risiko das Rad neu zu erfinden
Fehlender Fokus auf qualitative Schnittstellen („die sind ja nicht von außen erreichbar“)
Präsentation und Geschäftslogik in einem Tier fördert das vermischen zu einem „Brei“
9
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Symptome linderbar, aber nicht fixbar!
Zustand -> HTTPSession/Conversations
AJAX Feeling -> Partitial Page Rendering
Multi Windows -> Conversations
Browserhistory -> Post/Redirect/Get (PRG)
Browsernavigation -> bsw. durch JSF-State-Saving und Memory limitiert
Failover -> Session Replication ist nicht praktikabel! (Speicher, Kosten, Network Traffic..)
Verhindert echtes Webscale!
10
05/16/12
Ausweg:Thin-Server-Architekturen
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
3 Tier - so wie es sein soll
Business Logic
HTML Renderer
Controller View
Model
Server
Client
Präsentation
Controller View
Model API
Business Logic
Server
Client
12
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
DOM
und so in JavaScript:
Event Listener Function
1. addEventListener2. getElementById
/backend
3. jQuery.ajax
13
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Zur Erinnerung: Der JSF Lifecycle
14
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Die Möglichkeiten des Browsers den Zustand zu speichern...
Stateless Server aber wohin mit dem State?
JS var
Cookie
local/session Storage
BrowserDB
HTML5 History API
URL Hash (#)
15
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Semantic HTML 5
Don’t hide the Web
HTML als Inhalts-Beschreibungssprache
CSS für das Layout
CSS/ Javascript Features variieren zwischen den Browsertypen
Aber: Oberfläche sollte in den immer funktional bedienbar sein
“Progressive-Enhancement” für “Aufhübschung” von Oberflächen ohne funktionalen Einfluss
Gutes HTML hat einen hohen Wert!• Responsive Webdesign
• Suchmaschienen
• Geringer Datentransfer
• Leichte Anpassbarkeit des Layouts
Eine gute HTML Struktur ist vergleichbar mit OOD und erfordert Erfahrung• Floting boxes, CSS Classes/ID, DIV, Browserkompatibilität etc
Mit HTML Frameworks wie Bootstrap kann man die gröbsten Fehler vermeiden
16
05/16/12
HTML(5) hat alles was man braucht
JavaScript für die Oberfächensteuerung
DOM Selector API um die View zu manipulieren
AJAX für den Zugriff auf Geschäftslogik
05/16/12
No Serverside Webframeworks
HTML5 ist das Framework!
05/16/12
Von JavaScript und HTML zueiner wartbaren Frontend-Architektur
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Auch einfache Anwendungen erfordern eine Architektur
20
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
für einfache Anwendungen
Rich Internet Application (RIA) Architecture
View (HTML)
Controller (JS)Service / Resource
Network
‣ Ein großes Javascript...‣ Eine HTML-Seite bestehend aus “Unter-Seiten”
‣Nicht geeignet für komplexe Anwendungen
21
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
erfordern Komponentisierung
RIA’s
22
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Model View Presenter (MVP) vs. MVC Pattern
View
Presenter
Model
ModelView
Controller
23
prostuliert durch Google
First Class Pattern in GWT
Vorteil: Bessere Trennung von UI und Controller-Logik• Dadurch:
• Bessere Austauschbarkeit von Model,View und Controller
• Bessere Testbarkeit
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
erfordert ein Bus System
Kommunikation in Rich Internet Applications
24
Network
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Mail ChatMenü
Lose Kopplung von UI-Komponentendurch Pub/Sub
View
Presenter
Event Bus
View
Presenter
View
Presenter
Application Controller
Service
25
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
hierdurch ist Wiederverwendung von Fachlichen UI-Komponenten möglich
Komponentisierte Frontend-Architektur
26
KomponenteKomponente
Widget
Application Controller
Dialog
Event Bus
Sitzung
Öffentlicher Service
Dialog
View
Event (sende Richtung)
Dependency(Abhängkeit zu)
Legende
Dialog
Komponenten Controller
Öffentlicher Service
Optionaler Baustein
Dialog
Presenter
View
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Gängige Webservice-Protokolle
Grundsätzlich HTTP basiert
RESTful HTTP• JSON
• XML
• Feeds - ATOM/RSS
• RDF
SOAP / WS-*
Push Technologien• Comet/Ajax Push
• Websocket
27
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
und JSON auf dem Vormarsch
RESTful HTTP ist führend
28
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
REST Principals
Give every “thing” an ID
Link things together
Use standard methods
Resources with multiple representations
Communicate statelessly
29
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Warum REST?
Skalierung
Fehlertoleranz
Wiederherstellbarkeit
Sicherheit
Lose Kopplung
30
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
für lose Kopplung von Severices
Hypermedia
Inspiriert von Hypertext. Paradigma: folge den Links
Schlagwort: HATEOAS (Hypertext As The Enging Of Application State)• Resourcen sind selbst beschreibend
• Gibt Auskunft über State und Verhalten
Ziel: Applikationen sollten kein Wissen über die semantic von URLs haben (starke Kopplung)
31
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Beispiel einer Hypermedia HTTP Response
32
<articles total="1921" xmlns:atom="http://www.w3.org/2005/Atom"><atom:link rel="self" href="http://www.example.org/articles?contains=cycling&start=10"/><atom:link rel="prev" href="http://www.example.org/books?contains=cycling"/><atom:link rel="next" href="http://www.example.org/books?contains=cycling&start=20"/>
<article><atom:link rel="self" href="http://www.nytimes.com/2009/07/15/sports/cycling/15tour.html"/><title>For Italian, Yellow Jersey Is Fun While It Lasts</title><body>...</body>
</article><article>
<atom:link rel="alternate" href="http://www.nytimes.com/2009/07/27/sports/cycling/27tour.html"/><title>Contador Wins, but Armstrong Has Other Victory</title><body>...</body>
</article></articles>
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
GUI Rendering am Client
Konzept: Stateless Backend• REST
• Caching (Client/Server)
• einfache und „billige“ Skalierung
• durch zusätzliche Hardware
• keine (sticky) Sessions◦ transparent Failover
Scaling RESTful Architectures
Server Server
Client Client
33
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Authentication in RESTful Apps
Gängige Authentisierung in Severside-Webapps basiert auf HttpSession Auth• Aber: nicht Restful (HTTPSession)
Restful Authentisierung erfordert Zustandslosigkeit (Server seitig)
Restful Technologien:• Simple per HTTP Basic/Digest Auth
• Client Cert Auth
• Security Tokens
◦ Eigene Protokolle◦ OAuth◦ OpenID
34
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
RESTful Authentication mit OAuth
Service Provider
Service Client 4. erzeuge Access Token
2. Authentisiere request Token
TokenServer(IdP)
1. erzeuge Request Token
5. API Call
3. redirect request Tokenparam
6. che
ck To
ken
35
05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG
Zusammenfassung
Der REST
Die klassischen Frameworks wie JSF/Stuts kommen aus einer Zeit (2000-2004) in der AJAX und JavaScript noch keine grosse Rolle gespielt haben
Heutige Anforderungen an User Experience lassen sich mit klassischen Technologien nur unter Schmerzen umsetzen
Server-Side-Frameworks können mit den Anforderungen umgehen, sind jedoch keinenfalls dafür entwickelt worden
Die Komplexität von aufgerüsteten Server-Side-Anwendungen steigt eminent durch den Mix von JavaScript und AJAX
Die Architektur des Webs (RESTful) wird bei vielen Server-Side-Anwendungen gebrochen mit Auswirkungen auf Robustheit, Skallierung und User Experience
36