Hilf, wenn Du kannst

Kein Entwickler mag es, für gleiche Aufgaben immer wieder Code zu schreiben, zu testen und erneut zu debuggen. Ganz zu schweigen davon, dass niemand das sprichwörtliche Rad stets von Neuem erfinden möchte. Gute Gründe, die für Bibliotheken sprechen – in jeder Sprache, auch in JavaScript.

15

25.06.2009, 02:00 Uhr

Lesezeit: 11 Min.

iX Magazin

Von

Stefan Mintert

Die Entwicklung von JavaScript spiegelt sich in den Funktionen wider, die beliebte Bibliotheken für die Skriptsprache besitzen. In der Frühphase – Ende 1995, als Netscape die ursprünglich LiveScript genannte Sprache unter ihrem neuen Namen vorstellte – dachte niemand an große JavaScript-Bibliotheken. Die Nutzergemeinde war klein, der Draht zum Hauptentwickler bei Netscape, Brendan Eich, kurz. Einen Feature-Wunsch in der Entwickler-Newsgruppe hat Eich damals durchaus schon gelegentlich innerhalb weniger Tage in die Sprache oder das Objektmodell des frühen Netscape-Browsers eingebaut.

Mit dem Erfolg des sogenannten Dynamischen HTML (DHTML) verlangten die JavaScript-Programmierer nach einfachen Lösungen sowohl für wiederkehrende Aufgaben als auch für neue. Als Beispiel sei das seinerzeit neue Drag & Drop von Objekten einer Webseite genannt. Niemand möchte es für jede Webseite neu entwickeln. Was damals wie heute hinzukam, ist die Inkompatibilität der Browser. Hatte man es für den einen mühsam geschafft, lief es auf dem anderen meist nicht. iX hat derlei Konflikte schon vor mehr als zehn Jahren behandelt (siehe den damaligen Artikel, [1]).

Aufgrund solcher Schwierigkeiten tauchten bald sogenannte Cross-Browser-Bibliotheken auf. Sie verdecken beispielsweise Unterschiede im Objektmodell der verschiedenen Browser und bieten eine einheitliche API. Die Funktionen waren ursprünglich meist auf DOM-Operationen beschränkt.

Her mit den Rich Internet Applications

Mit dem Erscheinen von AJAX als Begriff (2005, siehe [2]) änderte sich die Situation grundlegend. Plötzlich war von "Rich Internet Applications" die Rede, Webanwendungen, deren Bedienkomfort dem von Desktop-Applikationen nahekommen soll. Zwangsläufig gelangt damit mehr Programmlogik in den Browser; trotz AJAX. In der Folge sind eine Reihe von JavaScript-Bibliotheken erschienen, die mehr als nur die Manipulation des HTML-DOM erlauben.

Die folgende Übersicht versucht ein Bild der JavaScript-Bibliotheken und ihrer Funktionen zu zeichnen und typische Vertreter aus den einzelnen Kategorien zu nennen. Grundsätzlich lässt sich feststellen, dass die Bibliotheken entweder Spezialisten sind, die ausschließlich Funktionen für bestimmte Aufgaben lösen, oder es handelt sich um allumfassende Funktionssammlungen, die das Ziel haben, jeden Wunsch zu erfüllen. Dabei ist es wichtig, dass die Bibliotheken aus Modulen bestehen, die man einzeln laden kann. Andernfalls überfrachten sie jede Webseite mit einem großen Skriptanteil, der gar nicht zum Zuge kommt.

Bibliothek oder Framework

Heutzutage schreibt kaum noch ein Softwareentwickler Bibliotheken, jedes Werkzeug muss auf jeden Fall ein Framework sein. Ob das daran liegt, dass letzterer Begriff schlicht moderner ist, sei dahingestellt. In diesem Artikel dient eine "Bibliothek" dazu, dass Entwickler sich bei den von ihr gebotenen Klassen, Funktionen und/oder Methoden bedienen können, um ihre Webseiten zu erstellen, ohne dass sie das vielbeschworene Rad schon wieder erfinden müssen.

In der englischsprachigen Wikipedia-Definition des Framework heißt es, hier frei übersetzt: Frameworks ähneln Bibliotheken, indem sie wiederverwendbare Code-Abstraktionen in einer wohldefinierten API bieten. Anders als bei Bibliotheken gibt nicht der Aufrufende den Programmfluss vor, sondern das Framework. Diese Umkehrung der Steuerung (Inversion of Control) unterscheidet die beiden.

In diesem Sinne sei eine Bibliothek als Sammlung von Hilfsmitteln verstanden, die dem Programmierer möglichst wenig Vorschriften macht.

Einen interessanten Ansatz für die Modularität bietet MyLibrary. Die Bibliothek, die auf eine Initiative der Newsgruppe comp.lang.javascript zurückgeht, besteht aus Modulen, die der Benutzer über ein Webformular zu seiner eigenen Bibliothek zusammensetzen kann. Wenngleich das Klicken im Formular keinen großen Unterschied zum selektiven Inkludieren von JavaScript-Quellcode darstellt, suggeriert das Webformular dennoch überzeugend, man erhielte eine eigene Bibliothek.

Auf Browser-Unterschiede reagieren die JavaScript-Bibliotheken auf unterschiedliche Weise. Der erste Ansatz ist das Auslesen der Browser-Identifikation ("Browser Sniffing"). Einige Programmierer favorisieren dagegen eine "Feature Detection". Dabei versucht das Skript das gewünschte Feature – beispielsweise ein bestimmtes Objekt im Document Object Model (DOM) – anzusprechen und reagiert entsprechend. Die Überlegung dahinter lautet: "Mir ist egal, um welchen Browser es sich handelt, wichtig ist nur, ob das Feature vorhanden ist."

Wesentlicher Vorteil dieses Vorgehens ist, dass keine endlosen Listen von Browser-Versionen und ihren Eigenschaften aufzulisten sind. Neue Versionen integrieren sich nahtlos in die Anwendung. Neben der oben genannten MyLibrary ist jQuery ab Version 1.3 eine weitere Bibliothek, die auf jede Art von Browser Sniffing verzichtet und nur noch mit Feature Detection arbeitet. In den Release Notes versprechen sich die Entwickler davon eine höhere Lebensdauer und eine geringere Zahl von Bugs.

Grafische Effekte und Widgets

Wer seine Webseite mit grafischen Effekten oder komplexen Widgets aufpeppen möchte, hat die Qual der Wahl. Die Auswahl an Bibliotheken, die dazu etwas anbieten, ist riesig. Ein bekannter Vertreter ist Scriptaculous, das mit ansprechenden Funktionen daherkommt. Es basiert auf Prototype, einer Bibliothek, das als browserseitiger Teil von Ruby on Rails bekannt wurde. Prototype besitzt Funktionen für den Umgang mit JavaScript-Objekten, Zugriff und Manipulation des DOM und einfache AJAX-Kommunikation. Scriptaculous bietet eine Reihe aufwendiger Widgets und beeindruckender visueller Effekte. Während Scriptaculous ein Spezialist ist, sind Widgets und visuelle Effekte auch bei den Generalisten zu finden. So können beispielsweise die beliebte Dojo-Bibliothek und MochiKit selbstverständlich ebenfalls mit Drag & Drop, Fade-in, Fade-out und vielen anderen Effekten aufwarten. All diese Dinge gehören längst zum Standard solcher Bibliotheken.

Bei der Frage, was zum Standard gehört und was nicht, ist einmal mehr Wikipedia hilfreich. Die Seite "Comparison_of_JavaScript_frameworks" (siehe "Onlinequellen") beinhaltet eine vergleichende Tabelle. Auf der Seite findet sich ein Hinweis, dass die Tabelle unvollständig sei. Dies dürfte sich vor allem auf die Zahl und Auswahl der betrachteten Tools beziehen. Ganze 16 an der Zahl sind es. Wie die Auswahl zustande gekommen ist, bleibt naturgemäß unklar. Insofern kann die Tabelle nicht als objektive, repräsentative Übersicht zu JavaScript-Bibliotheken dienen. Sie gibt aber einen guten ersten Eindruck und – vielleicht viel wichtiger – zeigt, welche Funktionen häufig anzutreffen sind und deshalb als Standard gelten können.

Onlinequellen

Bibliotheken

Wikipedia

W3C

Einführung zu Accessible Rich Internet Applications (ARIA)

Der weitaus größte Teil der dort aufgezählten Funktionen betrifft die visuellen Effekte und Widgets. Im weiteren Sinne kann man außerdem komplexe Dinge wie einen Rich Text Editor hinzuzählen.

Wenig verbreitet sind barrierefreie Widgets. Wenn es um Einhaltung der W3C-Regeln für "Accessible Rich Internet Applications" (ARIA, siehe "Onlinequellen") geht, wird die Luft dünn. Wikipedia zählt nur Dojo, die Yahoo UI Library und ZK (ein Java-Framework) auf. Für jQuery gibt es ein diesbezügliches Ticket in seinem Bug-Tracking-System, das sich auf Version 1.2.x bezieht. Es ist nicht ersichtlich, ob die ARIA-Compliance mittlerweile umgesetzt ist.

Eine auf den ersten Blick ungewöhnliche Funktion ist die Offline-Speicherung, damit eine Applikation selbst ohne Internetverbindung laufen kann. Von Haus aus kann JavaScript keine Daten lokal vorhalten. Dass die Wikipedia-Tabelle bei einem Produkt "Yes" anzeigt, liegt daran, dass es nicht unbedingt in die Tabelle gehört: das genannte Java-Framework ZK. Bei den reinen JavaScript-Produkten besteht die Funktion nur in Verbindung mit anderen Techniken wie Googles Gears oder Adobes Air.

Vektorgrafik: Ohne Durchbruch

Im Bereich der Vektorgrafiken gibt es seit vielen Jahren verschiedene Techniken, von denen sich keine endgültig durchsetzen konnte. Diesem Sachverhalt trägt beispielsweise Dojo dadurch Rechnung, dass sie eine "cross-platform vector graphics API" anbietet, die sich an SVG orientiert. Für Dojo 1.2 (aktuell ist 1.3.1) gibt es die Aussage, dass es die folgenden Vektorgrafiktechniken der Browser unterstützt (siehe "Onlinequellen"):

SVG: Firefox 1.5–3.0, Safari (Webkit) 3.0, Opera 9.0, Chrome 1.0 (Webkit) (beta), iPhone Safari 2.1
VML: IE 6–7
Silverlight
Canvas: Firefox 2.0–3.0, Safari 3.0 inklusive iPhone Safari 1.x/2.x, Opera 9.0

Abgesehen von den visuellen Effekten, optischen Spielereien und hübschen Widgets hat eine gänzlich "unsichtbare" Technik das Interesse an JavaScript vorangetrieben.

Hoffähig dank des AJAX-Hype

Durch AJAX (ursprünglich "Asynchronous JavaScript and XML", siehe [2]) hat JavaScript einen großen Aufschwung erfahren. In dessen Gefolge schossen Bibliotheken wie die sprichwörtlichen Pilze aus dem Boden. Die Zahl der Produkte war schnell dreistellig. Heute ist irgendeine Unterstützung für asynchrone oder synchrone Kommunikation per XMLHttpRequest-Objekt in nahezu jeder Bibliothek zu finden. Wer auf der Suche nach AJAX-Support ist, muss sich nur die Frage beantworten, ob er eine kleine Spezialbibliothek sucht oder eine komplexe Lösung, die außerdem noch andere Dinge kann.

Wie oben erwähnt, greifen einige Bibliotheken auf andere, spezialisierte zurück. Im Fall von AJAX handelt es sich dabei häufig um Prototype.

Eine vorhandene Bibliothek für die eigene Arbeit zu verwenden ist nicht unbedingt ein Zeichen von Zusammenarbeit. Die entsprechende Lizenz vorausgesetzt, kann jeder ein vorhandenes Produkt in einer Eigenentwicklung nutzen. An anderer Stelle ist jedoch eine echte Zusammenarbeit erkennbar.

Hier ist die Rede von CSS-Selektoren. Sie dienen dazu, Elemente im DOM anzusprechen. In der Version 3, die noch keinen flächendeckenden Einzug in die Browser gefunden hat, sind sie deutlich mächtiger geworden. Vergleicht man diese Zugriffsmöglichkeit mit der reinen DOM-Programmierung, erweisen sich die Selektoren als die deutlich bequemere Art des Zugriffs. Allerdings stehen sie nicht ohne Weiteres in JavaScript zur Verfügung. Aus diesem Grund gibt es entsprechende Implementierungen in einigen JavaScript-Bibliotheken. Die jQuery-Entwickler haben ihre "CSS Selector Engine" für die Version 1.3 komplett überarbeitet und rühmen sich nun einer herausragenden Geschwindigkeit. Darüber hinaus haben sie diesen Code unter dem Namen "Sizzle" veröffentlicht, der Dojo Foundation zur Verwendung zur Verfügung gestellt und arbeiten des Weiteren mit den Entwicklern von Dojo, Prototype, Yahoo UI, MochiKit, TinyMCE und anderen zusammen. Das Ziel ist die Verbesserung von Sizzle und eine einheitliche Basis in allen Produkten.

Das Beispiel der CSS-Selektoren für DOM-Elemente zeigt, dass der JavaScript-Entwickler von den Bibliotheken nicht nur Effekte und AJAX, sondern außerdem eine Low-Level-Unterstützung bei der Programmierung für den Browser bekommen kann. Wer mehr davon sucht, wird bei den umfassenden Bibliotheken wie Dojo, MochiKit und anderen fündig. All diejenigen, die weder Datumskonvertierung noch weitere formatierte String- oder Zahlenausgabe entwickeln möchten, denen die Funktionen für reguläre Ausdrücke in JavaScript nicht bequem genug sind und document.cookie viel zu umständlich ist, brauchen sich nicht zu sorgen. Für all das findet sich schnell eine Hilfe in der einen oder anderen Bibliothek. Das Cookie-"Problem" war übrigens eines der ersten, das eine damals bekannte Bibliothek, die von Bill Dortch, schon 1996 gelöst hat. Sie ist sogar heute noch im Netz zu finden (siehe "Onlinequellen"). Ob sie allerdings mit aktuellen Browsern reibungslos funktioniert, ist unklar – und angesichts der vielen "modernen" Angebote vielleicht nicht mehr ganz so wichtig.

Fazit

Der kurze Streifzug durch die Welt der JavaScript-Bibliotheken zeigt, dass die Auswahl groß ist; sowohl was die Produkte als auch was deren Funktionsumfang angeht. Die Entwicklung ist nicht eingeschlafen. Neue Produkte und Funktionen betreten immer wieder die Bühne und bringen mehr Konkurrenz und manchmal sogar Innovation.

In den folgenden Artikeln kommen drei JavaScript-Bibliotheken zur Sprache. Grund für die Auswahl war einerseits die Tatsache, dass YAF4AJN (Yet Another Frontendcontroller for AJAX-JSON-Networks) und qooxdoo beide von deutschen Providern stammen (Telekom und 1&1). jQuery dagegen kann man als derzeit "im Kommen" bezeichnen, denn Microsoft will die Bibliothek in ASP.Net sowie Visual Studio integrieren. Alle drei sind Open Source.

Stefan Mintert
ist Geschäftsführer der Linkwerk GmbH in Hamburg, wo er sich mit Softwareentwicklung für XML, Web 2.0 und Semantic Web beschäftigt.