Ajax, Comet & Co.
0 gefällt mir4,634 aufrufe
Das Dokument beschreibt verschiedene Architekturen für Webanwendungen, insbesondere Mainframe, 2-Tier und 3-Tier-Modelle, sowie deren Vor- und Nachteile. Es beleuchtet moderne Technologien wie Ajax, Comet und REST, die die Interaktivität und Kommunikation zwischen Client und Server verbessern. Zudem wird auf Herausforderungen und Lösungsansätze bei serverseitigen Push-Techniken eingegangen.
Ajax, Comet & Co.
- 1. Ajax, Comet & Co. Roman Roelofsen Managing Director (aka Alpha Geek) Weigle Wilczek GmbH Twitter: romanroe W-JAX, 8. November 2011
- 3. Mainframe Die gesamte Logik l¨uft auf dem Server a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Clients dienen lediglich zur Darstellung und zur Eingabe Tastatur + Monitor
- 4. Mainframe Die gesamte Logik l¨uft auf dem Server a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Clients dienen lediglich zur Darstellung und zur Eingabe Tastatur + Monitor Vorteile Wenig Schichten & wenig Systemgrenzen Single source Nur ein Kontrollfluss Klassische Input/Output-Architektur Sicher, da relativ geschlossen
- 5. Mainframe Die gesamte Logik l¨uft auf dem Server a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Clients dienen lediglich zur Darstellung und zur Eingabe Tastatur + Monitor Vorteile Wenig Schichten & wenig Systemgrenzen Single source Nur ein Kontrollfluss Klassische Input/Output-Architektur Sicher, da relativ geschlossen Nachteile Sehr einfache UI Eventuell langsam Mehr Datentransfer
- 6. 2-tier Die gesamte Logik l¨uft auf dem Client a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Server dient lediglich zur Persistenz, ohne fachliches Wissen Datenbankmanagementsystem Ausnahme: Stored procedures, ... Kommunikation zwischen Server & Client l¨uft uber eine a ¨ technische Schnittstelle "select * from foo"
- 7. 2-tier Die gesamte Logik l¨uft auf dem Client a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Server dient lediglich zur Persistenz, ohne fachliches Wissen Datenbankmanagementsystem Ausnahme: Stored procedures, ... Kommunikation zwischen Server & Client l¨uft uber eine a ¨ technische Schnittstelle "select * from foo" Vorteile Komplexe UIs sind m¨glich o Wenig Schichten & klar definierte Systemgrenzen Schnelle UI Nur ein Kontrollfluss Fast single source
- 8. 2-tier Die gesamte Logik l¨uft auf dem Client a Gesch¨ftsregeln, Ablaufregeln, UI-Logik, ... a Server dient lediglich zur Persistenz, ohne fachliches Wissen Datenbankmanagementsystem Ausnahme: Stored procedures, ... Kommunikation zwischen Server & Client l¨uft uber eine a ¨ technische Schnittstelle "select * from foo" Vorteile Komplexe UIs sind m¨glich o Wenig Schichten & klar definierte Systemgrenzen Schnelle UI Nur ein Kontrollfluss Fast single source Nachteile Client-Deployment n¨tig o Nicht sicher
- 9. 3-tier (mit Rich-Client) Fachlogik verteilt auf Server & Client Ablauflogik verteilt auf Server & Client UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber eine a ¨ fachliche Schnittstelle personWebService.loadPerson(3)
- 10. 3-tier (mit Rich-Client) Fachlogik verteilt auf Server & Client Ablauflogik verteilt auf Server & Client UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber eine a ¨ fachliche Schnittstelle personWebService.loadPerson(3) Vorteile Komplexe UIs sind m¨glich o Klar definierte Systemgrenzen Schnelle UI Client ist unabh¨ngig von z.B. der Persistenztechnologie a
- 11. 3-tier (mit Rich-Client) Fachlogik verteilt auf Server & Client Ablauflogik verteilt auf Server & Client UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber eine a ¨ fachliche Schnittstelle personWebService.loadPerson(3) Vorteile Komplexe UIs sind m¨glich o Klar definierte Systemgrenzen Schnelle UI Client ist unabh¨ngig von z.B. der Persistenztechnologie a Nachteile Erheblich mehr Technologievielfalt
- 12. 3-tier (mit Web-Client) Fachlogik gr¨ßtenteils auf dem Server o Ablauflogik gr¨ßtenteils auf dem Server o UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber ... a ¨ a) ... HTML-Seiten request/response b) ... eine fachliche Schnittstelle personWebService.loadPerson(3)
- 13. 3-tier (mit Web-Client) Fachlogik gr¨ßtenteils auf dem Server o Ablauflogik gr¨ßtenteils auf dem Server o UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber ... a ¨ a) ... HTML-Seiten request/response b) ... eine fachliche Schnittstelle personWebService.loadPerson(3) Vorteile Komplexe UIs sind m¨glich o Klar definierte Systemgrenzen Schnelle UI Client ist unabh¨ngig von z.B. der Persistenztechnologie a
- 14. 3-tier (mit Web-Client) Fachlogik gr¨ßtenteils auf dem Server o Ablauflogik gr¨ßtenteils auf dem Server o UI-Logik im Client Persistenzlogik im Server Kommunikation zwischen Server & Client l¨uft uber ... a ¨ a) ... HTML-Seiten request/response b) ... eine fachliche Schnittstelle personWebService.loadPerson(3) Vorteile Komplexe UIs sind m¨glich o Klar definierte Systemgrenzen Schnelle UI Client ist unabh¨ngig von z.B. der Persistenztechnologie a Nachteile Erheblich mehr Technologievielfalt
- 15. Web-Anwendungen Web 1.0 Wie eine 3-tier-Architektur ... die nur aus HTML-Seiten request/response besteht Die gesamte Logik liegt im Server Clients dienen lediglich zur Darstellung und zur Eingabe
- 16. Web-Anwendungen Web 2.0 Wie eine 3-tier-Architektur ... ... die das HTML-Seiten request/response Modell f¨rs u Provisioning nutzt ... die zur prim¨re Kommunikation fachliche Schnittstellen a nutzt personWebService.loadPerson(3) Fachlogik verteilt auf Server & Client Ablauflogik verteilt auf Server & Client
- 17. Technologien
- 18. AJAX Hat angefangen als ”pimp my web page” Input-Validierung Mehr Interaktivit¨t f¨r UI Dialoge a u Mittlerweile prim¨res Kommunikationskonzept um fachlichen a Daten vom Server zum Browser zu ubertragen ¨ Erm¨glicht durch ... o JavaScript im Browser XMLHttpRequest XML → JSON JSON.parse(...) JSON.stringify(...)
- 19. REST Hat angefangen als besseres SOAP Server-Entit¨ten werden als Resourcen betrachtet a Zugriff erfolgt uber HTTP Operationen ¨ GET, POST, DELETE, ... IDs werden uber die URL kodiert ¨ http://server/resource/1 Wichtigster Unterschied zu SOAP/Corba/etc: Fachliche Entit¨t 1:1 REST Resource a Feste Anzahl Operationen
- 20. REST Hat angefangen als besseres SOAP Server-Entit¨ten werden als Resourcen betrachtet a Zugriff erfolgt uber HTTP Operationen ¨ GET, POST, DELETE, ... IDs werden uber die URL kodiert ¨ http://server/resource/1 Wichtigster Unterschied zu SOAP/Corba/etc: Fachliche Entit¨t 1:1 REST Resource a Feste Anzahl Operationen → SQL
- 21. Comet Wie kann der Server dem Client Informationen mitteilen? a.k.a. Server-push Der Begriff Comet fasst verschiedenen Techniken zusammen, um Server-push zu erm¨glichen o Streaming iFrame XmlHttpRequest Long Polling XmlHttpRequest Script tag Eigentlich alles ”Hacks”, das Ergebnis ist aber i.d.R. ausreichend
- 24. Architekturen + Technologien im Web 3.0
- 25. Code
- 26. Plain Ajax
- 27. Apache Wicket
- 29. Atmosphere
- 30. Lift Web
- 31. Leon
- 32. WebSockets Ajax und Comet ”missbrauchen” HTTP um eine RCP/REST-Kommunikation abzubilden Ajax: Jeder Aufruf startet einen neuen HTTP request inkl. Header Comet: Server weiß nicht, dass der Request zur Comet-Kommunikation dient WebSockets definieren ein Protokoll (zwischen Server und Browser) um sich von HTTP zu entfernen HTTP Request → TCP/IP Socket WebSocket kann bi-direktional genutzt werden
- 33. Comet & WebSockets aus Server-Sicht Beim Comet & WebSockets startet der Browser eine Verbindung zum Server und h¨lt diese offen a Problem f¨r Servlet Container u Jeder HTTP Request wird auf einen Thread gemappt Wenn der HTTP Request offen bleibt, gibt es entweder zuviele Threads oder neue Anfragen werden nicht beantwortet L¨sung o Servlets 3.0 Nativer Support im Web-Container (z.B. Jetty)
- 34. Wir stellen ein! Wir suchen f¨hige Java/Scala/JavaScript/Clojure/RCP/... a Entwickler Wir bieten eine gesunde Mischung aus Programmierer Berater Kicker-Profi Bitte bei mir melden! roelofsen@weiglewilczek.com
- 35. Vielen Dank f¨r Ihre Aufmerksamkeit! u Fragen?