JavaScript Libraries Revisited

Vor einiger Zeit habe ich über die verschiedenen JavaScript-Bibliotheken berichtet. jQuery, damals für mich noch eine Neuentdeckung, hat sich unterdessen schon recht durchgesetzt. Aber auch YUI hat sich nicht schlecht geschlagen. Momentan arbeite ich am ersten kompletten Redesign der JavaScript-Komponente von ray. Deshalb hier ein kleiner Rückblick, gefolgt vom Ausblick auf die neue Komponente.

Grundlage der Komponente ist YUI. Den Entscheid, auf YUI zu setzen, haben wir keinen Moment bereut. YUI macht mit jeder neuen Version enorme Sprünge und bietet vor allem viele Widgets an, die wir direkt einbinden können. Jedoch fehlen YUI am unteren Ende der Skala einige Dinge: So vermisse ich insbesondere die inzwischen sehr populäre CSS-Selektoren-Funktionalität (siehe jQuery). Aber auch andere low-level Features fehlen: Ein Crossbrowser-Support für Array-Funktionen wie die Funktion contains(). Oder Unterstützung für Cookie-Handling. Also mussten andere Bibliotheken den low-level Bereich abdecken:

• Die Base-Klasse von Dean Edwards kümmerte sich um Klassenvererbung.
• cssQuery stellte die CSS-Selektor-Funktionalität.
• Selbstgeschriebene Funktionen übernahmen Dinge wie Array- und Cookie-Handling.

Auf dieser Basis entstand die ray-Klasse, welche einerseits dem Internet Explorer 6 ein bisschen unter die Arme griff (vor allem im visuellen Bereich) und andererseits für das dynamische Laden von Widgets zuständig war. Dies funktionierte so, dass wir einem Element eine bestimmte Klasse geben konnten, welche ray dazu veranlasste, entsprechende Skripts und eventuell auch CSS-Dateien nachzuladen. Damit blieb die ursprünglich Dateigrösse der JavaScript-Komponente auf erträglichem Niveau und die Widgets-Dateien mussten nicht “manuell” nachgeladen werden.

Ein Beispiel: <img … class=”widget calendar start” /> bewirkte, dass das YUI-Calendar-Widget geladen wurde (JavaScript und CSS-Dateien) und dass bei einem Klick auf das Bild das Widget angezeigt wurde.

Diese Komponente haben wir für viele Projekte erfolgreich eingesetzt. Während dieser Zeit hat sich jedoch gezeigt, dass noch nicht alles perfekt war. Einerseits war YUI zu tief mit dem ray-Teil verankert. Jedes Update von YUI wurde zum einem grossen Unterfangen. Zusätzlich zeigte sich, dass dynamisch nachgeladener Code nicht immer für den schnellsten Seitenaufbau sorgte. (pi hat darüber ausführlich berichtet.)

Für “kleinere” Bedürfnisse war die ray-Komponente oft überdimensioniert, weshalb wir zum Beispiel für die Implementation der JavaScript-Features von www.cornercard.ch jQuery einsetzten.

Es war an der Zeit, die ganze Komponente von Grund auf zu überarbeiten, zumal YUI sich enorm weiterentwickelt hat und nun für das Nachladen von Komponenten ein Utility zur Verfügung steht. Die Ziele der neuen Komponente sind:

• Geeignet sowohl für Frontends wie auch für Backends.
• Statisches oder dynamisches Laden von Widgets.
• Stärkere Trennung zwischen dem ray-Teil und den Libraries.

Auch die neue Version von ray.js baut auf Base auf, wenn auch auf base2. Die selbst geschriebenen Array-Funktionen kann ich somit schon mal weglassen, ebenfalls können wir die schöne base2.Package-Funktion nutzen. Dies ermöglicht, dass alle Funktionen in einem eigenen Namespace sind. ray.dom zum Beispiel beinhaltet Funktionalität zur DOM-Behandlung, ray.event die Event-Behandlung usw.

Für eine klare Trennung zwischen ray und den Libraries unterstützen wir verschiedene “Library bindings”. Im YUI-Binding wird zum Beispiel die Funktion ray.dom.getStyle direkt auf YAHOO.util.Dom.getStyle gemappt, bei einem base2.DOM-Binding würde es direkt das style-Attribut des Elements setzen. Für einfachere Widgets wie beispielsweise unser Flashtext-Widget muss nun nicht YUI geladen werden, sondern es kann auch zum Beispiel das “leichtere” Base2-Binding benutzt werden.

Nun bin ich daran, unsere Widgets auf die neue Plattform umzuschreiben. Eindrücklich ist immer wieder, wie viel Funktionalität der Widgets unterdessen in YUI zu finden ist. Und die einfache Eleganz von base2! Macht schon Spass, unter solchen Voraussetzungen zu programmieren.