Zukunft des Webs? Dennis Beer Christian Blinde AJAX Zukunft des Webs? Dennis Beer Christian Blinde
Agenda Problemstellung Lösungsansätze Überblick über AJAX Bewertung Ausblick Fazit
Problemstellung (1/2) Klassische Websites sind statisch Grundsätzlich keine dynamische Manipulationen HTTP ermöglicht praktisch keine dauerhaften Verbindungen Derzeit werden zwei Protokollversionen, HTTP/1.0 und HTTP/1.1, verwendet. Bei HTTP/1.0 wird vor jeder Anfrage eine neue TCP-Verbindung aufgebaut und nach Übertragung der Antwort wieder geschlossen. Sind in ein HTML-Dokument beispielsweise zehn Bilder eingebettet, so werden insgesamt elf TCP-Verbindungen benötigt, um die Seite auf einem grafikfähigen Browser aufzubauen. In der Version 1.1 können mehrere Anfragen und Antworten pro TCP-Verbindung gesendet werden. Für das HTML-Dokument mit zehn Bildern wird so nur eine TCP-Verbindung benötigt. Da die Geschwindigkeit von TCP-Verbindungen zu Beginn auf Grund des Slow-Start-Algorithmus recht gering ist, wird so die Ladezeit für die gesamte Seite signifikant verkürzt. Zusätzlich können bei HTTP/1.1 abgebrochene Übertragungen fortgesetzt werden. Aber auch timeout bei 1.1 sonst resource problem
Problemstellung (2/2) Klassisches Web Application Model Client (Browser) ? Benutzeroberfläche GET Synchrone Kommunikation, d.h. der Nutzer muss auf die Bereitstellung der Daten warten und ist für diese Wartezeit blockiert Jede Anfrage verursacht vollständiges Neuladen z.T. Neuladen bereits geladener Elemte Schlechte Usability Server-seitige Systeme Web Server Datenbank, andere Systeme nach Garrett (2005)
Rich Internet Application Lösungsansätze Rich Internet Application Hochwertige Animationen Industrielle Stärke Kompatibilität/ Erreichbarkeit Applets und Flash Shockware brauchen ein Plugin, zudem ist es nur kaum möglich diese an das design der seite anzupassen und dauerhaft konsistent zu halten. Zudem vergleichsweise lange Ladezeiten Flash / Shockwave Java (Applets) JavaScript/ AJAX
Überblick über AJAX Was ist AJAX? AJAX: Asynchronous JavaScript and XML “Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.” Jesse-James Garrett (18. Februar 2005)
Überblick über AJAX Beteiligte Technologien Darstellung von Inhalten mit HTML und CSS Asynchrone Datenabfrage durch XMLHttpRequest Datenaustausch durch XML Dynamische Darstellung und Manipulation mit Hilfe des Document Object Model (DOM) und JavaScript zur Verbindung dieser Elemente
Überblick über AJAX Vergleich Application Models Client(Browser) Benutzeroberfläche AJAX Engine Server-seitige Systeme Datenbank, andere Systeme Web/XML Server JavaScript Aufruf HTML + CSS HTTP Anfrage XML Client (Browser) Benutzeroberfläche Server-seitige Systeme Datenbank, andere Systeme Web Server HTTP Anfrage HTML+CSS Klassisch AJAX
Überblick über AJAX AJAX Web Application Model
Überblick über AJAX Code Beispiel <html> <head><script type="text/javascript"> <!– function ajax(){ var http = new XMLHttpRequest(); http.open(‘GET‘, ‘datei.xml‘, true); http.onreadystatechange = function() { document.getElementById(‘Ausgabe‘).innerHTML = http.responseText; } http.send(null); //--> </script></head> <body> <img src=“Image.gif“ onmouseover=“ajax()“ onmouseout=“document.getElementById(‘Ausgabe‘).innerHTML=‘‘"> <br> <p id="Ausgabe“></p> </body> </html>
Beispiele Amazon Diamond Search http://www.amazon.com/gp/gsl/search/finder?productGroupID=loose_diamonds Google Suggest http://www.google.com/webhp?complete=1&hl=en Google Mail http://gmail.com nexImage http://demo.neximage.com/ 24SevenOffice CRM http://www.24sevenoffice.com/
Bewertung Vorteile Usability Performance Sicherheit Funktionalitäten von Desktopanwendungen Schnellere Reaktion der Anwendung Unterstützung bei der Nutzung von Applikationen Performance Bandbreitenauslastung Lastenverteilung / Skalierbarkeit Sicherheit Kompatibilität XML als offenes Trägermedium (PHP, .NET, JAVA) Darstellung auch auf mobilen Endgeräten Komposition bekannter Technologien Keine Plugins nötig (Verbreitung von JScript) Reife der Teiltechnologien Performance: Bandbreitenauslastung (nach Merrill 06) Sicherheit Same Origin Policy Bandbreite B. des Server besser verteilt Lastenverteilung U.a. übernimmt Client Aufgaben
Bewertung Nachteile (1/2) Usability AJAX Hype User erwartet keine sofortige Applikationsreaktion Sicherheit Höhere Funktionalität sorgt für breitere Angriffsfläche Sicherheitslücken in JavaScript und AJAX Frameworks Urheberschutz AJAX Hype Unsiniges Nachladen von Elementen Nice-to-have Anwendungen Sicherheitsprobleme Grundsätzliche Sicherheitsprobleme mit JavaScript Zudem für jede Anwendung Code Einsicht Unaufgefordertes Senden von Daten MySpace Worm/XSS: „Samy hat nur 75 Freunde, konnte aber JavaScript…“ Urheberschutz Offen liegender Code (Clientseite)
Bewertung Nachteile (2/2) Wartungsprobleme Browserabhängig Komplexer Code Technische Probleme Polling Seitenzustand nicht feststellbar JavaScript muss aktiviert sein Ggf. alternative Darstellung bereitstellen Seitenzustand nicht feststellbar URL kopieren, bookmark, Browser history Zurück Button Suchmaschinenindizierung
Ausblick (1/2) Zunahme desktop-ähnlicher Web-Anwendungen AJAX-System noch rein web-basiert Forschungsgebiet Offline AJAX GoogleGears Web Mailer (z.B. Gmail, Zimbra) tiwyWiki http://blog.monstuff.com/Flash4AJAX/static/TiwyWiki.html
Ausblick (2/2) Gartner Hype Cycle, Gartner(2006)
Fazit Keine grundlegende Neuerung sondern Komposition bekannter Technologien Bereits fundamentaler Baustein moderner Web Anwendungen Rich Internet Applications als Zukunft des Webs AJAX-Applikationen müssen nun echten wirtschaftlichen Nutzen in der Praxis beweisen
Diskussionsfragen Kann AJAX die Usability von Web-Applikationen revolutionieren? Rich Internet Applications: Killer-Application oder Hype , Erleichterung oder Gefahr?