© Andrey Lavrishchev, 123rf.com

Wer im Kampf gegen statisches HTML nicht sofort den ganz großen Web-2.0-Wurf wagen will, macht erstmal kleine Schritte. Ein Vergleich versucht einen Koffer mit Hilfe dreier Javascript-Bibliotheken clientseitig zu sortieren. Findet alles seinen Platz?

Ajax ist Teil vieler Webanwendungen und vereint eine Menge von Protokollen, Sprachen und Formaten. Es gilt als Sammelbegriff dafür, dynamisch eine geladene Webseite direkt im Browser umzuorganisieren. Kleine Codestücke in Javascript greifen auf das Document-Object-Model (DOM) zu, formatieren HTML-Elemente per CSS oder laden neue Inhalte über HTTP mittels »XML-HttpRequest«-Objekten nach. Eine Reihe von Ajax-Funktionen dienen primär der Optik und der Präsentation der Inhalte. Daher steht der Web-2.0-Ansatz oft im Ruf, aufgedunsen und schwer überschaubar zu sein.

Dabei gibt es eine Reihe nützlicher Funktionen, die clientseitige Aufgaben übernehmen, die zwar auch ein Server erledigen kann, der aber dazu oft nicht schnell genug reagiert. Als Beispiel hält eine Liste her, deren Elemente der Anwender mit der Maus im Browser neu anordnet. Dazu sind keine HTTP-Requests an den Server notwendig. Aufgrund der Vielfalt an Browsern und wegen unterschiedlicher Ausrichtung auf einen Einsatzzweck, hat der Webentwickler die quälende Auswahl zwischen einem guten Dutzend Toolkits und Bibliotheken. Wer sich einmal für eines entscheidet, bindet sich und seinen Code oft daran. Daher will die Entscheidung wohldurchdacht sein.

Solide Grundlage

Kaum zwei Frameworks sind deckungsgleich in ihrem Umfang oder ihrer Ausrichtung: Die Entwickler des Frameworks Scriptaculous legen den Fokus auf Animation und Drag-and-Drop, Dojo kommt mit drei Varianten für Grundfunktionen (Core), Widgets (Dijit) sowie Tabellen und Grafiken (Dojo X) daher. Die Yahoo Interface Library (YIL) bietet Funktionen für die Benutzerschnittstelle und legt Wert auf die Wartbarkeit und Updates dieser Komponenten.

Alle drei Kandidaten sollen eine Liste von Utensilien eines Reisekoffers lokal und ohne Zutun eines Webservers umsortieren. Dies geschieht per Drag-and-Drop, also per Nutzerinteraktion. Die Liste liegt als »ul«-Container in HTML vor und könnte initial von PHP erzeugt sein (siehe Listing 1). In der Praxis handelt es sich natürlich nicht um Kofferinhalte wie im Spiel “Ich packe meinen Koffer”, sondern beispielsweise um Bilder einer Galerie oder Aufgaben in einer Taskplanungssoftware.

01 <p>Meine Koffer:</p>
02 <ul id='bag01'>
03  <li id='item01_1'>Buch</li>
04  <li id='item01_2'>Hemd</li>
05  <li id='item01_3'>Zahncreme</li>
06  <li id='item01_4'>Fotos</li>
07 </ul>
08 
09 <ul id='bag02'>
10  <li id='item02_1'>Hose</li>
11  <li id='item02_2'>Laptop</li>
12  <li id='item02_3'>Wecker</li>
13  <li id='item02_4'>T-Shirt</li>
14 </ul>

Wer das von Hand schreiben wollte, stellt sich mit der Implementation des Drag-and-Drop-Teil einer Herausforderung. Das auch noch browserübergreifend zu implementieren, wäre eine Qual. Die Codefragmente lassen sich lokal und ohne Webserver ausprobieren. Im realen Umfeld würden die Applets ihren Status nach dem Umordnen natürlich zurück an den Server übertragen.

Scriptaculous

Der erste Blick gilt dem Toolkit Scriptaculous, das seinen Namen gleich kreativ für die eigene URL verwendet [1]. Es ist Spezialist für Animationen, Drag-and-Drop und vorgefertigte Ajax-Controls. Den DOM- und Javascript-Part überlässt es der zugrundel iegenden Bibliothek Prototype [2]. Sie kapselt eine Reihe von browserabhängigen Verhaltensweisen und stellt mächtige Objekte und Methoden zur Verfügung, die dem Programmierer ebenso wie den eigentlichen Toolkits das Leben deutlich vereinfachen (siehe Abbildung 1).

Abbildung 1: Die Webseite von Scriptaculous zeigt die Möglichkeiten der Animationskomponenten.

Das Paket erfordert einen Download, bringt dabei aber schon die Prototype-Bibliothek mit. Scriptaculous baute darauf auf. Das Toolkit lässt sich denkbar einfach einrichten: Der Entwickler legt das Paket im Unterverzeichnis »scripts/« an und verlinkt es im »head«-Bereich der Webseite:

<script src="scripts/lib/prototype.js"
        type="text/javascript"></script>
<script src="scripts/src/scriptaculous.js"
        type="text/javascript"></script>

Der Code lädt zuerst Prototype als Grundlage aus dem Verzeichnis »scripts/lib/«, danach die erweiterten Funktionen von Scriptaculous aus dem Verzeichnis »scripts/src/«. Wer nicht alle Funktionen benötigt, darf den Aufruf der Bibliothek »scriptacolous.js« um einen Parameter erweitern und aus den möglichen Paketen »builder«, »effects«, »dragdrop«, »controls« und »slider« auswählen. Das spart Ladezeit. Die Pakete »dragdrop« und »slider« lassen sich beispielsweise mit

<script src="scripts/src/scriptaculous.js?load=dragdrop,slider" 
type="text/javascript"></script> 

laden. Alle anderen ignoriert die Bibliothek. Die Kofferinhalte aus Listing 1 stellt der Entwickler als zwei unsortierte Listen mit den HTML-Tags »ul« und »li« dar. Sie stehen für die zwei Koffer, die der Nutzer gepackt hat. Allerdings soll er nun in der Lage sein, zwischen den Koffern noch einzelne Gegenstände auszutauschen. Dazu benötigen die Listen ebenso wie die einzelnen Elemente eindeutige IDs. Das Framework fordert hier eine Konvention in der Namensgebung: Die IDs der einzelnen Elemente trennt der Entwickler durch einen Unterstrich vom restlichen Namen ab. Die ID »item021« würde also ohne weitere Konfiguration (siehe »format« in Tabelle 1) nicht funktionieren, die ID »item02_1« tut es.

Anschließend folgt ein Javascript-Block im Quellcode unterhalb der Listen. Der Browser interpretiert den Quellcode der Seite Zeile für Zeile. Daher läuft Javascript ins Leere, wenn die referenzierte Elemente noch nicht in der DOM-Struktur enthalten sind. Alternativ könnte der Entwickler den Code auch erst beim Laden mit dem »onload«-Ereignis der Seite ausführen lassen.

Für das Beispiel stellt Scriptaculous eine spezielle Gruppe von Funktion zur Verfügung. Diese Gruppe ist unter dem Begriff »Sortable« zusammengefasst. Das Array »bagList« definiert in Listing 2 die beiden Listen. Die Funktion »Sortable.create()« macht eine existierenden Liste sortierbar. Dabei steht der erste Parameter für die ID der Liste, der zweite ermöglicht, verschiedene Optionen anzugeben. Damit der Anwender die Elemente zwischen den beiden Listen austauschen kann, benötigt der Code die Angabe der Option »containment«, der ab Zeile 5 als Wert den Inhalt des Arrays »bagList« benötigt. Die Funktion »Sortable.create()« kennt zusätzlich die in Tabelle 1 aufgeführten Optionen. Als durchaus überschaubares Ergebnis des Codes erhält der Anwender eine Liste mit Drag-and-Drop-Funktionalität (siehe Abbildung 2).

01 <script language="javascript"
02         type="application/javascript">
03   bagList = new Array("bag01", "bag02");
04 
05   Sortable.create('bag01', {containment: bagList});
06   Sortable.create('bag02', {containment: bagList});
07 </script>

Abbildung 2: Der knappe Scriptaculous-Code von nur neun Zeilen Code lässt den Anwender die einzelnen Listenelemente mit der Maus umordnen.

Yahoo User Interface Lib

Das von Yahoo unter der Abkürzung YUI angebotene Framework bietet der Web-Gigant in seinem Entwicklerbereich an [3]. Der enthält ein gerüttelt Maß an nützlicher Dokumentationen, ein Forum und natürlich das obligatorische YUI-Blog (siehe Abbildung 3). Die Bibliothek lässt sich elegant mit dem YUI-Loader-Utility als Dienst einbinden. Dabei fügt man in den »head«-Bereich der Seite eine von Yahoo zusammengestellte Javascript-Bibliothek ein, die jedesmal das aktuelle Paket von den Yahoo-Servern lädt.

Abbildung 3: Yahoo beglückt Entwickler mit einer beeindruckend umfangreichen Dokumentation für YUI.

Die Vorteile liegen auf der Hand: So bleibt automatisch die neuste Version der Bibliothek aktiv und der Seitenanbieter braucht sich keine Gedanken um Paket-Abhängigkeiten machen. Das erkauft er sich durch etwas längere Ladezeiten und die Notwendigkeit, den Code schnell anzupassen, wenn sich die Syntax einer verwendeten Funktionen in einer neueren Version ändert.

Code vom Dienst

Die Vor- und Nachteile bleiben abzuwägen. Wer auf Nummer sicher gehen will, sollte das Paket besser herunterladen und auf dem eigenen Webserver ablegen. Für das vorliegende Beispiel reicht das Einbinden von YUI als Dienst vom Yahoo-Server. Allerdings kommt nur das Drag-and-Drop-Modul zum Einsatz. Den dafür nötigen Javascript-Aufruf

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/animation/animation-min.js& 2.7.0/build/dragdrop/dragdrop-min.js">
</script>

hat das YUI-Loader-Utility freundlicherweise generiert. Ihn platziert den Entwickler in den Seitenkopf der HTML-Webseite. Anders als bei Scriptaculous bietet das Yahoo-Framework keine fertige Funktion für sortierbare Listen. Stattdessen baut es auf die Funktion mit dem Drag-and-Drop-Modul von YUI. Hier hilft die Dokumentation dieses Moduls [4]. Ein bestehender Codeschnipsel steht Pate für das Beispiel aus Abbildung 4.

Abbildung 4: Sortierbare Listen kennt YUI nicht von Haus aus. Die fertige Lösung ist aufwändig, aber mächtig.

Der Quellcode ist deutlich länger als bei Scriptaculous (siehe Listing 3). Er erweitert eine Klasse, die Funktionen für die Zustände des Sortiervorgangs anbietet. Das sind unter anderem der Beginn und das Ende des Ziehens. Die Funktionen basieren teilweise auf Komponenten, die das Yahoo-Framework mitbringt, aber der Anwender muss viel Code selbst schreiben. Er beobachtet die Position der Maus und platziert die »li«-Elemente bei entsprechenden Clicks neu in der DOM. In Anbetracht der selbst zu schreibenden Codemenge eignet sich Yahoos YUI für eine einfache Umsetzung des Beispiels nicht optimal, allerdings gibt die Dokumentation eine gute Hilfestellung. YUI lohnt offenbar erst bei umfangreicheren Javascript-Projekten.

01 YAH.extend(YAH.example.DDList, YAH.util.DDProxy, {
02   startDrag: function(x, y) {
03     var clickEl=this.getEl();
04     Dom.setStyle(clickEl, "visibility", "hidden");
05   },
06   endDrag: function(e) {
07     var srcEl = this.getEl();
08     var proxy = this.getDragEl();
09     // Show the proxy element and animate it
10     Dom.setStyle(proxy, "visibility", "");
11     var a = new YAH.util.Motion(
12         proxy, { points: { to: Dom.getXY(srcEl) } },
13         0.2, YAH.util.Easing.easeOut);
15     // Hide the proxy and show the source element
16     a.onComplete.subscribe(function() {
17       Dom.setStyle(proxy.id, "visibility", "hidden");
18       Dom.setStyle(this.id, "visibility", "");
19     });
20     a.animate();
21     },
22 });

Dojo

Abschließend kommt das Toolkit Dojo zum Test [5]. Seine Entwickler versprechen auf der Startseite vollmundig sowohl “schnelle Problemlösung” und ein “besseres Anwender-Erlebnis” (siehe Abbildung 5). Sie informieren darüber, dass sich auch Dojo entweder über die Server von Google oder AOL als Dienst einbinden lässt. Auch wägt der Webentwickler ab, ob er lieber die absolute Kontrolle behalten möchte und die Bibliothek auf den eigenen Server lädt oder ob er vom Update-Service profitieren möchte. Das Beispiel bindet den externen Service über den AOL-Server in den »head«-Bereich der Webseite ein:

<script type="text/javascript"
src="http://o.aolcdn.com/Dojo/1.1.1/Dojo/Dojo.xd.js"></script> 

Auch Dojo stellt keine Funktion bereit, die die Beispielaufgabe direkt umsetzt. Die Klasse »Dojo.dnd.Source« enthält allerdings Drag-and-Drop-Methoden. Um sie anzuwenden, erzeugt der Entwickler dynamisch ein Array, das sich dann sortieren lässt [6]. Er vereinbart dazu zunächst im HTML-Body eine leere Liste, die nur eine ID, aber keine Elemente enthält:

<ol id="bag01"></ol>

Ihr folgt mit Listing 4 ein Javascript-Block, der die benötigte Klasse »Dojo.dnd.Source« einbindet (Zeile 2). Anschließend bildet der Code eine Instanz der Klasse. Ein Parameter veranlasst sie dazu, die Liste mit der ID »bag01« als »Dojo.dnd.Source«-Object aufzugreifen. Damit ist die Liste im Grunde schon sortierbar, hat aber noch keine Elemente. Deshalb fügt die Instanz mit der Funktion »insertNodes()« die noch fehlenden Listenelemente in Zeile 6 hinzu. Das ist notwendig, damit die Elemente verschiebbar sind – exisitieren sie schon klappt\’s nicht. Als letzte Anweisung folgt in Zeile 9 ein der Eventlistener» Dojo.addOnLoad(init);«, der die neue Funktion »init()« beim Laden der Seite aufruft (siehe Abbildung 6).

01 <script type="text/javascript">
02   Dojo.require("Dojo.dnd.Source");
03 
04   function init() {
05     var wishlist = new Dojo.dnd.Source("bag01");
06     wishlist.insertNodes(false,
07       [ "Buch", "Hemd", "Zahncreme", "Fotos" ]);
08   };
09   Dojo.addOnLoad(init);
10 </script>

Die Dojo-Website enthält nur wenige Einstiegshilfen für das Toolkit. Die offizielle Dokumentation der Version 1.3 ist noch im Aufbau [7]: Die durchsuchbare API-Referenz ist zwar eine wertvolle Informationsquelle für erfahrene Entwickler, die sich mit den Konzepten schon auskennen, Neulingen suchen aber vergeblich nach Beispielen für den Einstieg.

Abbildung 5: Dojo präsentiert sich nüchtern und übersichtlich.

Abbildung 6: Dojo kommt mit wenigen Zeilen Code zum Ergebnis, erfordert jedoch dynamisch in Javascript erzeugte Listenelemente.

Websites schmecken zart gewürzt einfach besser

Frameworks nehmen dem Entwickler eine Menge Arbeit ab. Der muss sich allerdings auf die Herangehensweise der ausgewählten Umgebung einlassen, die sich untereinander erheblich unterschieden. Die Wahl ist auch deshalb so wichtig, weil spätere Änderungen und Ergänzungen zwar möglich sind, aber schnell aufwändig zu warten sind. In dieser Hinsicht punkten YUI und Dojo, die automatische Updates mitbringen. Es liegt am Anwender, ob er sich auf die Anbieter verlassen will. In Sachen Lizenz sind alle drei vorgestellten Frameworks unbedenklich. Scriptaculous verwendet eine eigene offene Lizenz, Dojo setzt standardmäßig auf die Academic Free Licence und YUI verwendet die BSD.

Einen besonders schnellen Einstieg ermöglicht Scriptaculous. Die Aufteilung in einzelne Bibliotheksbestandteile verringert die Ladezeit deutlich, wenn wie in diesem Beispiel nur ein Effekt im Einsatz ist. Diese Funktionalität erlaubt YUI ebenfalls, auf Wunsch auch als Dienst vom Yahoo-Server. Im vorliegenden Beispiel ist das Vorgehen mit YUI allerdings deutlich komplizierter, da im Gegensatz zu Scriptaculous kein Standardeffekt zur Verfügung steht. Hier hilft die im Vergleich zur Konkurrenz vorbildliche Dokumentation mit einem passenden Beispiel.

In Dojo versteckt sich der Sortiereffekt in den Drag-and-Drop-Funktionen und interpretiert die sortierbare Liste optisch und funktional leicht anders. Das Sortieren erfolgt innerhalb einer Liste – eine Erweiterung auf zwei Listen würde hier wie bei der YUI Handarbeit erfordern. Der Weg zum Ziel gelingt allerdings wie bei Scriptaculous sehr schnell und ohne große Codemengen. Auch Dojo erlaubt das Nachladen einzelner Framework-Bestandteile.

Trotz unterschiedlicher Ansätze bleibt als Ergebnis, dass alle Probanden die gestellte Aufgabe meistern. Alle empfehlen sich auf ihre Art für die Praxis. Insofern bietet sich auch Javascript-Skeptikern die Möglichkeit, ihre Webseiten in kleinen Schritten nachzuwürzen. (mg)