Ajax, Comet & Co.
Roman Roelofsen
Managing Director (aka Alpha Geek)
Weigle Wilczek GmbH
Twitter: romanroe

W-JAX, 8. November 2011
Architekturen
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
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
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
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"
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
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
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)
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
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
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)
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
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
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
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
Technologien
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(...)
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
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
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
Architekturen + Technologien
Architekturen + Technologien
Architekturen + Technologien im Web 3.0
Code
Plain Ajax
Apache Wicket
Direct Web Remoting
Atmosphere
Lift Web
Leon
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
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)
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
Vielen Dank f¨r Ihre Aufmerksamkeit!
u
Fragen?

Ajax, Comet & Co.

  • 1.
    Ajax, Comet &Co. Roman Roelofsen Managing Director (aka Alpha Geek) Weigle Wilczek GmbH Twitter: romanroe W-JAX, 8. November 2011
  • 2.
  • 3.
    Mainframe Die gesamte Logikl¨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 Logikl¨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 Logikl¨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 Logikl¨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 Logikl¨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 Logikl¨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) Fachlogikverteilt 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) Fachlogikverteilt 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) Fachlogikverteilt 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) Fachlogikgr¨ß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) Fachlogikgr¨ß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) Fachlogikgr¨ß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 Wieeine 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 Wieeine 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.
  • 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 alsbesseres 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 alsbesseres 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 derServer 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
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 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 & WebSocketsaus 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! Wirsuchen 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¨rIhre Aufmerksamkeit! u Fragen?