Ajax, Comet & Co.

Roman RoelofsenManaging Director (aka Alpha Geek)

Weigle Wilczek GmbH

Twitter: romanroe

W-JAX, 8. November 2011

Architekturen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Technologien

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(...)

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

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

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

Architekturen + Technologien

Architekturen + Technologien

Architekturen + Technologien im Web 3.0

Code

Plain Ajax

Apache Wicket

Direct Web Remoting

Atmosphere

Lift Web

Leon

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

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)

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 roelofsen@weiglewilczek.com

Vielen Dank fur Ihre Aufmerksamkeit!

Fragen?