35
Ajax, Comet & Co. Roman Roelofsen Managing Director (aka Alpha Geek) Weigle Wilczek GmbH Twitter: romanroe W-JAX, 8. November 2011

Ajax, Comet & Co

Embed Size (px)

DESCRIPTION

Ajax, Comet & Co.

Citation preview

Page 1: Ajax, Comet & Co

Ajax, Comet & Co.

Roman RoelofsenManaging Director (aka Alpha Geek)

Weigle Wilczek GmbH

Twitter: romanroe

W-JAX, 8. November 2011

Page 2: Ajax, Comet & Co

Architekturen

Page 3: Ajax, Comet & Co

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Technologien

Page 18: Ajax, Comet & Co

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

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

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

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

Architekturen + Technologien

Page 23: Ajax, Comet & Co

Architekturen + Technologien

Page 24: Ajax, Comet & Co

Architekturen + Technologien im Web 3.0

Page 25: Ajax, Comet & Co

Code

Page 26: Ajax, Comet & Co

Plain Ajax

Page 27: Ajax, Comet & Co

Apache Wicket

Page 28: Ajax, Comet & Co

Direct Web Remoting

Page 29: Ajax, Comet & Co

Atmosphere

Page 30: Ajax, Comet & Co

Lift Web

Page 31: Ajax, Comet & Co

Leon

Page 32: Ajax, Comet & Co

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

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

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

Vielen Dank fur Ihre Aufmerksamkeit!

Fragen?