Developing Revolutionary Web Applications using Comet and Ajax
Ajax, Comet & Co.
-
Upload
roman-roelofsen -
Category
Technology
-
view
390 -
download
1
description
Transcript of Ajax, Comet & Co.
![Page 1: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/1.jpg)
Ajax, Comet & Co.
Roman RoelofsenManaging Director (aka Alpha Geek)
Weigle Wilczek GmbH
Twitter: romanroe
W-JAX, 8. November 2011
![Page 2: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/2.jpg)
Architekturen
![Page 3: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/3.jpg)
Mainframe
I Die gesamte Logik lauft auf dem ServerI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Clients dienen lediglich zur Darstellung und zur EingabeI Tastatur + Monitor
I VorteileI Wenig Schichten & wenig SystemgrenzenI Single sourceI Nur ein KontrollflussI Klassische Input/Output-ArchitekturI Sicher, da relativ geschlossen
I NachteileI Sehr einfache UII Eventuell langsamI Mehr Datentransfer
![Page 4: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/4.jpg)
Mainframe
I Die gesamte Logik lauft auf dem ServerI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Clients dienen lediglich zur Darstellung und zur EingabeI Tastatur + Monitor
I VorteileI Wenig Schichten & wenig SystemgrenzenI Single sourceI Nur ein KontrollflussI Klassische Input/Output-ArchitekturI Sicher, da relativ geschlossen
I NachteileI Sehr einfache UII Eventuell langsamI Mehr Datentransfer
![Page 5: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/5.jpg)
Mainframe
I Die gesamte Logik lauft auf dem ServerI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Clients dienen lediglich zur Darstellung und zur EingabeI Tastatur + Monitor
I VorteileI Wenig Schichten & wenig SystemgrenzenI Single sourceI Nur ein KontrollflussI Klassische Input/Output-ArchitekturI Sicher, da relativ geschlossen
I NachteileI Sehr einfache UII Eventuell langsamI Mehr Datentransfer
![Page 6: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/6.jpg)
2-tier
I Die gesamte Logik lauft auf dem ClientI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Server dient lediglich zur Persistenz, ohne fachliches WissenI DatenbankmanagementsystemI Ausnahme: Stored procedures, ...
I Kommunikation zwischen Server & Client lauft uber einetechnische Schnittstelle
I "select * from foo"
I VorteileI Komplexe UIs sind moglichI Wenig Schichten & klar definierte SystemgrenzenI Schnelle UII Nur ein KontrollflussI Fast single source
I NachteileI Client-Deployment notigI Nicht sicher
![Page 7: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/7.jpg)
2-tier
I Die gesamte Logik lauft auf dem ClientI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Server dient lediglich zur Persistenz, ohne fachliches WissenI DatenbankmanagementsystemI Ausnahme: Stored procedures, ...
I Kommunikation zwischen Server & Client lauft uber einetechnische Schnittstelle
I "select * from foo"
I VorteileI Komplexe UIs sind moglichI Wenig Schichten & klar definierte SystemgrenzenI Schnelle UII Nur ein KontrollflussI Fast single source
I NachteileI Client-Deployment notigI Nicht sicher
![Page 8: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/8.jpg)
2-tier
I Die gesamte Logik lauft auf dem ClientI Geschaftsregeln, Ablaufregeln, UI-Logik, ...
I Server dient lediglich zur Persistenz, ohne fachliches WissenI DatenbankmanagementsystemI Ausnahme: Stored procedures, ...
I Kommunikation zwischen Server & Client lauft uber einetechnische Schnittstelle
I "select * from foo"
I VorteileI Komplexe UIs sind moglichI Wenig Schichten & klar definierte SystemgrenzenI Schnelle UII Nur ein KontrollflussI Fast single source
I NachteileI Client-Deployment notigI Nicht sicher
![Page 9: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/9.jpg)
3-tier (mit Rich-Client)
I Fachlogik verteilt auf Server & Client
I Ablauflogik verteilt auf Server & Client
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber eine
fachliche SchnittstelleI personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 10: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/10.jpg)
3-tier (mit Rich-Client)
I Fachlogik verteilt auf Server & Client
I Ablauflogik verteilt auf Server & Client
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber eine
fachliche SchnittstelleI personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 11: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/11.jpg)
3-tier (mit Rich-Client)
I Fachlogik verteilt auf Server & Client
I Ablauflogik verteilt auf Server & Client
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber eine
fachliche SchnittstelleI personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 12: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/12.jpg)
3-tier (mit Web-Client)
I Fachlogik großtenteils auf dem Server
I Ablauflogik großtenteils auf dem Server
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber ...
I a) ... HTML-Seiten request/responseI b) ... eine fachliche Schnittstelle
personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 13: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/13.jpg)
3-tier (mit Web-Client)
I Fachlogik großtenteils auf dem Server
I Ablauflogik großtenteils auf dem Server
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber ...
I a) ... HTML-Seiten request/responseI b) ... eine fachliche Schnittstelle
personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 14: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/14.jpg)
3-tier (mit Web-Client)
I Fachlogik großtenteils auf dem Server
I Ablauflogik großtenteils auf dem Server
I UI-Logik im Client
I Persistenzlogik im ServerI Kommunikation zwischen Server & Client lauft uber ...
I a) ... HTML-Seiten request/responseI b) ... eine fachliche Schnittstelle
personWebService.loadPerson(3)
I VorteileI Komplexe UIs sind moglichI Klar definierte SystemgrenzenI Schnelle UII Client ist unabhangig von z.B. der Persistenztechnologie
I NachteileI Erheblich mehr Technologievielfalt
![Page 15: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/15.jpg)
Web-Anwendungen Web 1.0
I Wie eine 3-tier-Architektur ...I die nur aus HTML-Seiten request/response besteht
I Die gesamte Logik liegt im Server
I Clients dienen lediglich zur Darstellung und zur Eingabe
![Page 16: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/16.jpg)
Web-Anwendungen Web 2.0
I Wie eine 3-tier-Architektur ...I ... die das HTML-Seiten request/response Modell furs
Provisioning nutztI ... die zur primare Kommunikation fachliche Schnittstellen
nutztI personWebService.loadPerson(3)
I Fachlogik verteilt auf Server & Client
I Ablauflogik verteilt auf Server & Client
![Page 17: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/17.jpg)
Technologien
![Page 18: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/18.jpg)
AJAX
I Hat angefangen als ”pimp my web page”I Input-ValidierungI Mehr Interaktivitat fur UI Dialoge
I Mittlerweile primares Kommunikationskonzept um fachlichenDaten vom Server zum Browser zu ubertragen
I Ermoglicht durch ...I JavaScript im BrowserI XMLHttpRequest
I XML → JSONI JSON.parse(...)I JSON.stringify(...)
![Page 19: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/19.jpg)
REST
I Hat angefangen als besseres SOAP
I Server-Entitaten werden als Resourcen betrachtetI Zugriff erfolgt uber HTTP Operationen
I GET, POST, DELETE, ...
I IDs werden uber die URL kodiertI http://server/resource/1
I Wichtigster Unterschied zu SOAP/Corba/etc:I Fachliche Entitat 1:1 REST ResourceI Feste Anzahl Operationen
I → SQL
![Page 20: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/20.jpg)
REST
I Hat angefangen als besseres SOAP
I Server-Entitaten werden als Resourcen betrachtetI Zugriff erfolgt uber HTTP Operationen
I GET, POST, DELETE, ...
I IDs werden uber die URL kodiertI http://server/resource/1
I Wichtigster Unterschied zu SOAP/Corba/etc:I Fachliche Entitat 1:1 REST ResourceI Feste Anzahl OperationenI → SQL
![Page 21: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/21.jpg)
Comet
I Wie kann der Server dem Client Informationen mitteilen?
I a.k.a. Server-pushI Der Begriff Comet fasst verschiedenen Techniken zusammen,
um Server-push zu ermoglichenI Streaming
I iFrameI XmlHttpRequest
I Long PollingI XmlHttpRequestI Script tag
I Eigentlich alles ”Hacks”, das Ergebnis ist aber i.d.R.ausreichend
![Page 22: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/22.jpg)
Architekturen + Technologien
![Page 23: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/23.jpg)
Architekturen + Technologien
![Page 24: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/24.jpg)
Architekturen + Technologien im Web 3.0
![Page 25: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/25.jpg)
Code
![Page 26: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/26.jpg)
Plain Ajax
![Page 27: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/27.jpg)
Apache Wicket
![Page 28: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/28.jpg)
Direct Web Remoting
![Page 29: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/29.jpg)
Atmosphere
![Page 30: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/30.jpg)
Lift Web
![Page 31: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/31.jpg)
Leon
![Page 32: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/32.jpg)
WebSockets
I Ajax und Comet ”missbrauchen” HTTP um eineRCP/REST-Kommunikation abzubilden
I Ajax: Jeder Aufruf startet einen neuen HTTP request inkl.Header
I Comet: Server weiß nicht, dass der Request zurComet-Kommunikation dient
I WebSockets definieren ein Protokoll (zwischen Server undBrowser) um sich von HTTP zu entfernen
I HTTP Request → TCP/IP Socket
I WebSocket kann bi-direktional genutzt werden
![Page 33: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/33.jpg)
Comet & WebSockets aus Server-Sicht
I Beim Comet & WebSockets startet der Browser eineVerbindung zum Server und halt diese offen
I Problem fur Servlet ContainerI Jeder HTTP Request wird auf einen Thread gemapptI Wenn der HTTP Request offen bleibt, gibt es entweder zuviele
Threads oder neue Anfragen werden nicht beantwortet
I LosungI Servlets 3.0I Nativer Support im Web-Container (z.B. Jetty)
![Page 34: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/34.jpg)
Wir stellen ein!
I Wir suchen fahige Java/Scala/JavaScript/Clojure/RCP/...Entwickler
I Wir bieten eine gesunde Mischung ausI ProgrammiererI BeraterI Kicker-Profi
I Bitte bei mir melden!I [email protected]
![Page 35: Ajax, Comet & Co.](https://reader034.fdocuments.us/reader034/viewer/2022052506/557d4e2fd8b42ae3298b4d8b/html5/thumbnails/35.jpg)
Vielen Dank fur Ihre Aufmerksamkeit!
Fragen?