Studygroup AJAX 1 / 28. Studygroup AJAX. Christian Kroiß / 4A Solutions GmbH

Transkript

1 1 / 28 Christian Kroiß / 4A Solutions GmbH

2 2 / 28 Gliederung 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

3 Gliederung Einleitung 3 / 28 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

4 Einleitung Ursprüngliches Interaktionsmodell des WWW 4 / 28 Pattern: Representational State Transfer (REST) Browser übernimmt nur Darstellung Interaktion kommt zustande durch Verfolgen von Links Übertragen von Formulardaten Logik der Anwendung rein auf Server durch CGI / PHP / JSP / ASP... Problem Bei jeder Interaktion voller Roundtrip ( Kommunikation mit Server + Aufbau der Seite ) Bei Anwendungen mit vielen kurzen Interaktionen störend!

5 Einleitung Ursprüngliches Interaktionsmodell des WWW 4 / 28 Pattern: Representational State Transfer (REST) Browser übernimmt nur Darstellung Interaktion kommt zustande durch Verfolgen von Links Übertragen von Formulardaten Logik der Anwendung rein auf Server durch CGI / PHP / JSP / ASP... Problem Bei jeder Interaktion voller Roundtrip ( Kommunikation mit Server + Aufbau der Seite ) Bei Anwendungen mit vielen kurzen Interaktionen störend!

6 Einleitung Ursprüngliches Interaktionsmodell des WWW 4 / 28 Pattern: Representational State Transfer (REST) Browser übernimmt nur Darstellung Interaktion kommt zustande durch Verfolgen von Links Übertragen von Formulardaten Logik der Anwendung rein auf Server durch CGI / PHP / JSP / ASP... Problem Bei jeder Interaktion voller Roundtrip ( Kommunikation mit Server + Aufbau der Seite ) Bei Anwendungen mit vielen kurzen Interaktionen störend!

7 Einleitung Ursprüngliches Interaktionsmodell des WWW 4 / 28 Pattern: Representational State Transfer (REST) Browser übernimmt nur Darstellung Interaktion kommt zustande durch Verfolgen von Links Übertragen von Formulardaten Logik der Anwendung rein auf Server durch CGI / PHP / JSP / ASP... Problem Bei jeder Interaktion voller Roundtrip ( Kommunikation mit Server + Aufbau der Seite ) Bei Anwendungen mit vielen kurzen Interaktionen störend!

8 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

9 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

10 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

11 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

12 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

13 Verlagerung auf den Client Einleitung 5 / 28 Idee:Logik der Anwendung (teilweise) durch clientseitiges Skripting implementieren. Technologien: JavaScript, DOM, CSS Dynamic HTML In modernen Browsern sehr mächtig Durch (open source) Bibliotheken werden die Technologien auch aus professioneller Sicht sinnvoll nutzbar (später mehr). Quasi die komplette Applikation kann clientseitig implementiert werden. Problem Daten müssen beim erstmaligen Laden der Seite komplett geladen werden.

14 Gesucht: Kompromiss Einleitung 6 / 28 Bisher also: Serverseitige Logik OK bei Interaktionen mit längerer Nachverarbeitung des Benutzers (z.b. Ergebnis von ebay-suche) Clientseitige Logik sinnvoll bei kurzen Interaktionen mit eventuell hoher Frequenz (z.b. Auswahl bei Auto-Händler: Marke Modell). Aber: oft sind Datenmengen zu groß, um initial geladen zu werden (z.b. BLZ-Suche) Gesuchte Lösung Clientseitige Logik mit Möglichkeit zum Nachladen von Daten ohne Neuladen der Seite.

15 Gesucht: Kompromiss Einleitung 6 / 28 Bisher also: Serverseitige Logik OK bei Interaktionen mit längerer Nachverarbeitung des Benutzers (z.b. Ergebnis von ebay-suche) Clientseitige Logik sinnvoll bei kurzen Interaktionen mit eventuell hoher Frequenz (z.b. Auswahl bei Auto-Händler: Marke Modell). Aber: oft sind Datenmengen zu groß, um initial geladen zu werden (z.b. BLZ-Suche) Gesuchte Lösung Clientseitige Logik mit Möglichkeit zum Nachladen von Daten ohne Neuladen der Seite.

16 Gesucht: Kompromiss Einleitung 6 / 28 Bisher also: Serverseitige Logik OK bei Interaktionen mit längerer Nachverarbeitung des Benutzers (z.b. Ergebnis von ebay-suche) Clientseitige Logik sinnvoll bei kurzen Interaktionen mit eventuell hoher Frequenz (z.b. Auswahl bei Auto-Händler: Marke Modell). Aber: oft sind Datenmengen zu groß, um initial geladen zu werden (z.b. BLZ-Suche) Gesuchte Lösung Clientseitige Logik mit Möglichkeit zum Nachladen von Daten ohne Neuladen der Seite.

17 Gesucht: Kompromiss Einleitung 6 / 28 Bisher also: Serverseitige Logik OK bei Interaktionen mit längerer Nachverarbeitung des Benutzers (z.b. Ergebnis von ebay-suche) Clientseitige Logik sinnvoll bei kurzen Interaktionen mit eventuell hoher Frequenz (z.b. Auswahl bei Auto-Händler: Marke Modell). Aber: oft sind Datenmengen zu groß, um initial geladen zu werden (z.b. BLZ-Suche) Gesuchte Lösung Clientseitige Logik mit Möglichkeit zum Nachladen von Daten ohne Neuladen der Seite.

18 Gliederung Technischer Hintergrund 7 / 28 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

19 Vor AJAX: iframes verstecken Technischer Hintergrund 8 / 28 Ansatz: hidden iframes / Remote Scripting iframe mit Größe 0x0 wird auf Seite eingefügt. Server-Requests werden im iframe durchgeführt. Neu geladene Seite im iframe enthält Sktipt zum Aktualisieren der Haupt-Seite. Der Benutzer kriegt vom Neuladen nichts mit Eingesetzt z.b. als Grundlage der 1. Version des Echo-Frameworks. Aber: ziemlich unsauber und schwer zu beherrschen Ähnlicher Ansatz mit versteckten Java-Applets möglich

20 Technischer Hintergrund Und dann wurde AJAX entdeckt... 9 / 28...eigentlich nicht wirklich. Grundlegende Technik besteht seit Einführung des Begriffs AJAX in Online-Artikel von Jesse James Garrett im Februar 2005: Definition: AJAX AJAX: Asynchronous JavaScript and XML. Besteht aus: standardbasierter Präsentation mit HTML und CSS dynamischer Anzeige und Interaktion mit DOM Datenaustausch und -verarbeitung mit XML und XSLT asynchroner Datenaustausch mit dem JavaScript/ActiveX-Objekt XMLHttpRequest JavaScript als Bindeglied

21 Interaktionsmodell Technischer Hintergrund 10 / 28 Initialseite: HTML, CSS und JavaScript bei Benutzer-Aktion (z.b. Button): In Event-Handler wird asynchroner Aufruf durch XMLHttpRequest gestartet. Während der Request verarbeitet wird kann der Benutzer auf der selben Seite weiterarbeiten. Bei Response von Server: Callback-Funktion wird aufgerufen. Response wird ausgewertet (z.b. mit DOM). DOM-Baum der Seite wird aktualisiert Änderungen sofort sichtbar.

22 Code-Beispiel Technischer Hintergrund 11 / 28

23 Code-Beispiel (2) Technischer Hintergrund 12 / 28

24 Code-Beispiel (3) Technischer Hintergrund 13 / 28

25 Gliederung Frameworks - Ein Überblick 14 / 28 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

26 Warum Frameworks? Frameworks - Ein Überblick 15 / 28 Schwierigkeiten beim Selbstbau: Pures JavaScript ist schwer zu beherrschen und fehleranfällig Cross-Browser-Problem: Trotz Standardisierungsprozess immer noch Browser-Unterschiede bei JavaScript und DOM Asynchronität durch AJAX erhöht Komplexität dr Programmierung Testen und Debuggen sehr aufwendig Bei größeren Projekten ist die Verwendung eines Frameworks unumgänglich.

27 Clientseitige Frameworks Frameworks - Ein Überblick 16 / 28 Prinzip: JavaScript-Bibliothek wird auf der Seite eingebunden Context AJAX: Zugriff auf XMLHttpRequest und evtl. Auswerten der Daten vereinfacht. Hilfsfunktionen für DOM-Zugriff und JavaScript-Ergänzungen Teilweise: DHTML-Effekte, GUI-Widgets, Menus, etc. Oft wird das Prädikat AJAX mehr aufgrund des Hypes verwendet. Mittlerweile gibt es weit über 100 sogenannter AJAX-Bibliotheken

28 Serverseitige Frameworks Frameworks - Ein Überblick 17 / 28 Prinzip: Konstrukte der Serverseitigen Plattform erzeugen JavaScript-Code Meist integriert in bestehende und verbreitete Web-Frameworks Verfügbar für alle einschlägigen Sprachen und Plattformen (Java,.NET, PHP, Phyton, Ruby, etc.) Prinzipielle Ansätze: Bereitstellung von fertigen Komponenten mit AJAX-Funktionalität Erweiterung des Event-Handling-Mechanismus Generierung von Javascript-RPC-Stubs für serverseitige Methoden

29 Gliederung 18 / 28 Clientseitige AJAX-Frameworks - eine Auswahl 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

30 Prototype 19 / 28 Clientseitige AJAX-Frameworks - eine Auswahl Stammt aus dem Ruby-on-Rails-Projekt Grundlegende Erweiterungen von JavaScript-Kernklassen Hilfsmittel zur DOM-Manipulation Dient als Grundlage für viele andere JavaScript-Frameworks Sehr sauber implementiert Aber: Dokumentation etwas dürftig

31 Dojo 20 / 28 Clientseitige AJAX-Frameworks - eine Auswahl Sehr mächtiges Framework zum Erstellen von Rich Web Clients Wird relativ stark gepusht (z.b. von AOL und IBM) Vielversprechendes und durchdachtes Konzept zum Erstellen von eigenen GUI-Widgets Sehr einfach und komfortabel zu benutzen Unterstützt Cross Domain XMLHttpRequest durch IFrame Proxy ( normalerweise nur eigene Domain erlaubt ) Gute Dokumentation Aber: relativ groß, viel Overhead für Anwendung als XMLHttpRequest-Kapselung

32 Gliederung AJAX und Java-Webanwendungen 21 / 28 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

33 DWR - Direct Web Remoting AJAX und Java-Webanwendungen 22 / 28 Servlet generiert dynamisch Javascript-Stubs basierend auf Java-Klassen Übernimmt Marshalling von Java-Objekten in JavaScript und zurück. Bei der Verwendung quasi wie JavaScrip-Klassen Sehr einfach einzusetzen und gut dokumentiert. Ausgezeichnete Lösung für Plain JSP Allerdings: Verwendung mit kompletten Web-Frameworks wie JSF etwas schwierig

34 DWR - Direct Web Remoting AJAX und Java-Webanwendungen 22 / 28

35 Ajax4JSF AJAX und Java-Webanwendungen 23 / 28 Ermöglicht einfaches Hinzufügen von AJAX-Funktionalität zu JSF-Applikationen Kein JavaScript für AJAX-Aufruf notwendig Fügt sich sehr elegant in den JSF-Lifecycle ein Open Source Projekt als Basis für kommerzielles Produkt (Exadel RichFaces) sehr professionell.

36 JSF-Komponenten AJAX und Java-Webanwendungen 24 / 28 Kommerzielle JSF-Komponenten-Bibliotheken z.b. Backbase, Exadel RichFaces Hochqualitative Komponenten wie Kalender, Visualisierung, Browser... Unterstützung für Drag & Drop und andere Rich-Client Technologies Teilweise spezielle Entwicklungs-Tools

37 JSF-Komponenten (2) AJAX und Java-Webanwendungen 25 / 28 Entwicklung eigener JSF-AJAX-Komponenten Nötig, wenn z.b. Ajax4JSF nicht ausreicht und sinnvoll für Wiederverwendete Komponenten Tutorial bzw. Pattern im Sun Developer Network Integration mit clientseitigem AJAX-Framework sinnvoll (z.b. Dojo) Integration in den Lifecycle durch Phase Listener Einbettung des JavaScrip-Codes auch durch Phase Listener Sehr eleganter Ansatz, allerdings relativ aufwendig

38 Rich Internet Client Frameworks AJAX und Java-Webanwendungen 26 / 28 Komplette Anwendung läuft im Browser Minimierung von notwendigem JavaScript-Code Ansätze: Eigener XML-Dialekt. z.b. ZK, OpenLaszlo AWT-ähnliches Programmiermodell (z.b. Echo2) Google Web Toolkit Völlig neuer Ansatz: AWT-ähnlicher Java-Code wird in JavaScript übersetzt Durch Emulator möglich: Entwicklung wie AWT-Anwendung (z.b. in Eclipse), inkl. Debuggen Sehr komfortabler und einfacher AJAX-Zugriff von serverseitigen Methoden Volles Marshalling von Java-Beans bei AJAX-Zugriffen Sehr schön erweiterbar, da konsequentes objektorientiertes Konzept

39 Gliederung Probleme 27 / 28 1 Einleitung 2 Technischer Hintergrund 3 Frameworks - Ein Überblick 4 Clientseitige AJAX-Frameworks - eine Auswahl 5 AJAX und Java-Webanwendungen 6 Probleme

40 Probleme Probleme 28 / 28 Sicherheitsaspekte: JavaScript und (bei IE) ActiveX müssen aktiviert sein. Dadurch übliche Gefahren. Ausbrechen aus vom Benutzer gewohntem Interaktionsmodell: Kein Zurück Knopf Keine Bookmarks Workarounds möglich, jedoch mit zusätzlicher Komplexität verbunden Testen und Debuggen generell schwierig Probleme mit Suchmaschinen Durch Hype: Angebot an Tools/Lösungen sehr unübersichtlich