Evaluierung von AJAX-basierten Frameworks für das Web 2.0

Studienarbeit von André Langer

Einleitung:

Remote Scripting - Anwendungen erleben seit einigen Jahren einen regelrechten, stetig zunehmenden Anfrageboom. Während aus usability-Sicht bisher eine strikte Unterscheidung zwischen Desktop-Anwendungen und Web Applikationen herrschte, finden sich seit einiger Zeit zunehmend Angebote im World Wide Web, die diese strikte Trennung verwischen lassen. Interaktive Nutzerdialoge, nebenläufige Prozessabarbeitung und visuelle Unterstützungsmittel wie Drag & Drop- Effekte halten auf Webseiten Einzug, die dem Nutzer bisher nur aus eigenständigen Softwareprodukten in einer spezifischen Betriebssystemumgebung bekannt waren. Viele dieser neuen Anwendungs- und Interaktionsmöglichkeiten im weltweiten Datennetz werden inzwischen unter dem Oberbegriff Web 2.0 zusammengefasst. Für den Nutzer bringt dieser neue Entwicklungstrend viele Vorteile – ansprechende, intuitive Nutzerführungen ohne die Notwendigkeit, eine ganze Internetseite bei jedem Interaktionsschritt neu zu laden und ohne bemerkbaren zeitlichen Overhead.

Was für den Nutzer Erleichterung bringen soll, bedeutet für einen Programmierer häufig zunächst Mehraufwand. Eine Technik zur Realisierung solcher so genannten Rich Internet Applications, die sich in den letzten beiden Jahren immer mehr in den Vordergrund gedrängt hat, wird unter der Bezeichnung AJAX zusammengefasst. Einen einheitlichen Standard gibt es dabei nicht, sodass fast täglich neue AJAX-basierte frameworks veröffentlicht werden, die dem Programmierer (wenigstens einen Teil der) Komplexität der Programmflusssteuerung abnehmen sollen. Aufgabe der Studienarbeit soll es daher sein, das inzwischen unüberschaubar gewordene Angebot an AJAX frameworks zu systematisieren und einen Überblick über Vor- und Nachteile ausgewählter Programmbibliotheken zu geben.

Dafür ist ein Kriterienkatalog zu erarbeiten, der eine Bewertung der verschiedenen frameworks nach unterschiedlichen Gesichtspunkten ermöglicht. Besonderer Schwerpunkt ist dabei auf Kriterien aus Programmierersicht (Sprachunabhängigkeit, Overhead, Implementierungsmöglichkeiten,…) und Anwendersicht (Plattformanforderungen, Einarbeitungszeit, Ergebnisqualität, …) zu legen. Auf den Kriterienkatalog ist anschließend eine Auswahl an bereits existierenden, frei verfügbaren AJAX frameworks anzuwenden, die als zukünftig relevant eingeschätzt werden. Die Ergebnisse sind abschließend in einer Gesamtübersicht zu präsentieren, die eine objektive Empfehlung für Nutzer darstellen soll, die vor der Wahl stehen, welche AJAX Programmbibliothek sie zukünftig einsetzen sollten.

Gang der Untersuchung:

Die Studienarbeit besteht aus insgesamt sieben Teilen. Nach einer kurzen Einführung in die Thematik im vorliegenden Kapitel 1 beschäftigt sich Kapitel 2 zunächst mit einigen Grundlagen von AJAX, die für das spätere Verständnis der framework – Evaluation nötig sind. Die Ziele und Einsatzgebiete stehen dabei im Mittelpunkt und es wird versucht die Frage zu klären, was AJAX selbst eigentlich ist. Anhand von Fallbeispielen wird die Einsatzweise von AJAX geklärt, welche später als Grundlage für die Evaluierung der verschiedenen frameworks dienen.

Kapitel 3 klärt darauf aufbauend zunächst grundlegende Begriffe im Zusammenhang mit AJAX frameworks und gibt einen Überblick über das breite Spektrum an AJAX frameworks. In Kapitel 4 wird anschließend der Kriterienkatalog definiert, welcher der Durchführung der Evaluation und der Bewertung der AJAX frameworks zugrunde liegt und legt die Kriterien offen, unter welchen Gesichtspunkten die Auswahl an frameworks getroffen wurde, die von den knapp 200 Vertretern repräsentativ evaluiert wurden. Kapitel 5 stellt den experimentellen Teil der Studienarbeit dar, in dem kategorisiert nach den zugrunde liegenden Skriptsprachen einzelne frameworks untersucht und deren Vor- und Nachteile beschrieben werden.

Daran anschließend gibt Kapitel 6 eine Übersicht über die gewonnenen Ergebnisse aus der Evaluierung und versucht, eine objektive Bewertung der getesteten frameworks abzugeben. Empfehlungen über gute und weniger gute frameworks für bestimmte Einsatzgebiete werden getroffen und deren Potential in Verbindung mit anderen Techniken diskutiert. Kapitel 7 schließlich versucht als Abschluss der Studienarbeit einen Ausblick auf die Zukunft von AJAX sowie AJAX frameworks anhand aktuell verfügbarer Fakten und Prognosen zu geben.

Inhaltsverzeichnis:

Inhaltsverzeichnis:

Textprobe:

Kapitel 2.4.2., Adresskartei:

Anwendungsbeispiel 2 sei ein Standardbeispiel, welches bei vielen framework-tutorials als Einführungsbeispiel realisiert wird: Eine webbasierte Adresskartei.

Beschreibung: Es ist eine Webanwendung zu realisieren, die das Eintragen von Adressdaten in und das Abfragen von Kontaktdaten aus einer Adressdatenbank ermöglicht. Die Webseite dafür bestehe aus insgesamt drei Bereichen. Eine Ebene mit der ID eingabe enthalte ein Formular, dessen eingegebene Daten nach Absenden dieses Formulars in die Adressendatenbank übernommen werden sollen. Die zweite Ebene mit der ID namen enthalte eine Übersicht der Namen aller bereits in der Datenbank eingetragenen Kontakte. Die dritte Ebene mit der ID info enthalte schließlich nach Auswahl eines Kontaktes dessen vollständige Adressübersicht aus der Datenbank.

Alle Adressdaten werden in einer MySQL-Datenbank gespeichert. Eine entsprechende ausführbare Datei auf dem Webserver im gleichen Verzeichnis auf dem Server stelle dazu die nötigen Funktionen bereit, um per POST übertragene Formulardaten in die Datenbank zu übernehmen (Definition beispielsweise durch zugriff.php?cmd=insert).und eine Liste aller Vor- und Zunamen der in der Datenbank enthaltenen Kontakte bereitzustellen (zugriff.php?cmd=namen). Um die XML-Unterstützung in AJAX testen zu können, werden die vollständigen Adressdaten eines einzelnen Kontaktes im XML-Format bereitgestellt (daten.xml.php mit Parameter ?contact=[contactid]).

Zielsetzung:

- Datenübermittlung via POST.

- Umgang mit Formularen.

- Aufruf einer Funktion auf einem Webserver.

- Umgang mit XML-Daten.

- Behandlung von Zeichensätzen.

Des Weiteren soll dieses Beispiel später Möglichkeiten einer Erweiterung der Nutzerfreundlichkeit durch AJAX frameworks bieten, sodass beispielsweise die Ebene namen durch ein Eingabefeld mit einer Autocomplete-Funktion ersetzt werden könnte, die Formulardaten während der Eingabe automatisch validiert werden oder die Ebenen insgesamt beispielsweise als Registerkartenvoneinander getrennt werden können. Listing 4 zeigt die klassische Realisierung des gestellten Problemfalls mittels PHP. Die Variable $db sei ein Platzhalter für die konkrete Datenbankbezeichnung und die Funktion mysqldata() abstrahiere von den konkreten Anfrageoperartionen. Ebenfalls seien Funktionen zur Herstellung der Datenbankverbindung und zum Parsen der XML-Daten nicht aufgeführt.

Um dieses Beispiel zu „ajaxifizieren“ ist es nötig, die AJAX-Hilfsfunktionen aus Listing 2 zu erweitern, damit auch Daten via POST gesendet werden können. Des Weiteren steht nun das „X“ aus AJAX im Mittelpunkt, wie XML-Daten behandelt und eingebunden werden. Listing 5 zeigt eine beispielhafte Implementierung.

Kapitel 2.4.3., AJAX-Bildergalerie:

Das dritte Beispiel soll als Grundlage dazu dienen zu zeigen, was mit AJAX frameworks für unterschiedliche Effekte realisiert werden können und wo diese sinnvoll dosiert einsetzbar sind. Beschreibung: Es ist eine einfache Bildergalerie zu realisieren. Die entsprechende HTML-Datei besteht dazu aus drei Bereichen. Die erste Ebene mit der ID thumbs enthalte dazu drei Vorschaubilder (thumbnails), die in einem entsprechenden Verzeichnis auf dem Webserver liegen und exemplarischdie Dateinamen tpic1.jpg, tpic2.jpg und tpic3.jpg haben.

Eine zweite Ebene mit der Bezeichnung bild enthalte jeweils das korrespondierende Bild pic1.jpg, pic2.jpg oder pic3.jpg in Normalansicht, welches durch den Nutzer im Vorschaubereich ausgewählt wurde. Darunter existiert eine dritte Ebene mit der ID kommentar, welche vom Webserver dem Bild zugeordnete Kommentare abruft und entsprechend anzeigt. (Diese können auf verschiedenste Wege bereitgestellt werden, im Beispielquellcode als Tabelle in einer MySQL-Datenbank, welche analog zum Beispiel 2 über ein Skript auf dem Server abgefragt wird) Zielsetzung:

- Es ist nach Animationen und Effekten zu suchen, die diese Bildergalerie für den Benutzer interessant und intuitiv bedienbar erscheinen lassen. Vorstellbar sind Fade-In-Effekte (zum Beispiel Yellow-Fade-Techniken), aber auch Drag and Drop-Effekte oder eine alternative Bilderauswahl mithilfe geeigneter Widgets.

Die grundlegende Realisierung der Funktionalität sollte keine neuen Probleme oder Anforderungen im Vergleich zu den Beispielszenarien 1 und 2 aus den vorhergegangenen beiden Unterkapiteln darstellen und ist in den Listings 6 und 7 aufgezeigt.