Javascript-Frameworks: heute YUI +
Das wichtigste neben der Funktionsfähigkeit eines Frameworks ist dessen Dokumentation. Unsere erste Wahl für ein Javascript-Widget-Framework war auf Dojo gefallen. Die Beispiele sahen gut aus, es gibt alle drei Monate eine neue Webseite die nett ausschaut und es gab soweit erst einmal alle wichtigen Widgets für unsere Oberflächen.
Desto mehr wir mit Dojo machten, desto weniger Dokumentation gab es, was dazu führte, dass wir uns nach besseren Möglichkeiten umsahen. Yahoo hat mit seinem Yahoo User Interface (YUI) ein wirklich tolles Framework hingelegt. Es funktioniert, sieht gut aus, der Code ist aufgeräumt und es gibt Dokumentation – nein Unmengen an Dokumentation, die mit Beispielen dargelegt werden und mit Cheat Sheets zu jeder Komponente aufwarten.
Ein Kopf hinter Yahoo ist Douglas Crockford, der die Sprache wirklich exzellent beherrscht und dessen Beiträge zum Yahoo Theater bringen jedem Javascript-Entwickler mehr Wissen. Dieses Wissen ist in YUI eingeflossen und so gibt es eine sehr saubere Aufteilung in Namespaces und viel Techniken gleich mit an Board.
Neben Widgets wie der Datatable, dem Calendar, dem Container oder der TabView gibt es noch wesentlich mehr zu erforschen. Alle Komponenten funktionieren sehr gut, allerdings bedeutet das Beta neben einigen Komponenten, dass an der API noch heftig geschraubt wird. Dies ist uns vorallem bei der Datatable aufgefallen, die wir intensiv in unseren Portles nutzen.
Viel Wert wird bei Yahoo auf eine Optimierung der Komponenten gelegt, weswegen bei einem Download von YUI gleich auch komprimierte Versionen der Komponenten hinzugefügt wurden. Ein ganz besonderes Highlight ist der YUI Loader.
Lädt man sehr viele verschiedene Javascript-Dateien, so merkt man, wie dies die Ladezeit einer Seite wesentlich verlängert. Allerdings wird bei Ajax-Seiten nur ein Teil des Javascripts zur initialen Darstellung genutzt. Der Rest des Javascripts wird erst bei einer Nutzeraktion benötigt. An dieser Stelle wird der Yui Loader interessant. Er ermöglicht das asynchrone Laden von Javascript-Dateien und löst auch Abhängigkeiten zwischen Modulen auf. Baut man einen ähnlichen Mechanisms nach, so wird sehr schnell klar, dass es mit der Einbindung eines Script-Tags im Header nicht getan ist, sondern dass auch das korrekte Laden überprüft werden muss. Der YUI-Loader nimmt diese Arbeit ab und kann auch direkt verschiedene Arten von Dateien laden. Über die Option Filter können entweder die normale Version, die kompromierte Version oder eine Debug-Version des Moduls geladen werden. Dies wird bei uns über Maven in den verschiedenen Profilen gesteuert. Ein weiteres interessantes Feature sind die Rollups, welches Zusammenfassungen von häufig benötigten Modulen sind. Jeder Request im Browser ist teuer, deswegen können häufig benötigte Module zusammengefasst werden, wobei der YUI-Loader selber entscheidet, ob das Rollup bei den vorliegenden Abhängigkeiten sinnvoll ist.
Unsere Entscheidung auf YUI zu setzen, haben wir bisher an keiner Stelle bereut und das Zusammenspiel mit Prototype klappt sehr gut. Bei Dojo sind wir in der Version 0.7 ausgestiegen, weil an allen Ecken neue Features hinzugefügt wurden, die nirgendwo dokumentiert waren. Folgend meine Lieblingszitate zu dem Thema zu dem Zeitpunkt, als wir Dojo auf der Abschußliste hatten: