Restful Frontend-Architecture

1,359 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,359
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Restful Frontend-Architecture

  1. 1. 05/16/12 RESTful Web-UI Architecture Sandro Sonntag, Technical Lead adorsys GmbH & Co. KG
  2. 2. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Die Probleme von herkömmlichen Thin-Client-Architekturen 2
  3. 3. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Daten und Repräsentation sind 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
  4. 4. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Resourcen am Client werden nicht genutzt Rich-Server berechnet das GUI für jeden Client Client Client Client 4
  5. 5. 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
  6. 6. 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 Generate GUIEvents State 6 State
  7. 7. 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
  8. 8. 05/16/12 Offlinefähigkeit Nicht möglich
  9. 9. 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
  10. 10. 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
  11. 11. 05/16/12 Ausweg: Thin-Server-Architekturen
  12. 12. 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
  13. 13. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG DOM und so in JavaScript: Event Listener Function 1. addEventListener 2. getElementById /backend 3. jQuery.ajax 13
  14. 14. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Zur Erinnerung: Der JSF Lifecycle 14
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 05/16/12 No Serverside Webframeworks HTML5 ist das Framework!
  19. 19. 05/16/12 Von JavaScript und HTML zu einer wartbaren Frontend-Architektur
  20. 20. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Auch einfache Anwendungen erfordern eine Architektur 20
  21. 21. 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
  22. 22. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG erfordern Komponentisierung RIA’s 22
  23. 23. 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
  24. 24. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG erfordert ein Bus System Kommunikation in Rich Internet Applications 24
  25. 25. Network 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Mail ChatMenü Lose Kopplung von UI-Komponenten durch Pub/Sub View Presenter Event Bus View Presenter View Presenter Application Controller Service 25
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 05/16/12 Cloud Centric Thin-Server-Architecture / Sandro Sonntag - adorsys GmbH & Co KG Warum REST? Skalierung Fehlertoleranz Wiederherstellbarkeit Sicherheit Lose Kopplung 30
  31. 31. 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
  32. 32. 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>
  33. 33. 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
  34. 34. 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
  35. 35. 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.AuthentisiererequestToken Token Server (IdP) 1. erzeuge Request Token 5. API Call 3. redirect request Token param 6.checkToken 35
  36. 36. 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

×