Professionelle JavaScript-Tools fürs Web 2.0

PHP, Java, Python, Perl, C#, Ruby: Bei der Entwicklung von Web-Anwendungen können serverseitig ganz unterschiedliche Programmiersprachen eingesetzt werden. Für welche man sich letztendlich entscheidet hängt von vielen Faktoren ab wie etwa Server-Infrastruktur, Personalkosten oder vorhandenes Know-How und ist nicht immer leicht. Clientseitig hat sich dagegen eine einzige Sprache deutlich etabliert und das ist JavaScript. Spätestens seit der Einführung der Ajax-Technologie (Asynchronous JavaScript and XML), die aus dem heutigen Web 2.0 nicht mehr wegzudenken ist, gibt es dazu gar keine Alternative - zumindest wenn man auf Browser-Plugins wie Adobe Flash oder Microsoft Silverlight verzichten möchte.

Die hohe Anzahl an professionellen und leistungsfähigen JavaScript-Frameworks, -Tools und -Klassenbibliotheken, die heute erhältlich sind, zeigt, wie wichtig die Skriptsprache für die Web-Entwicklung geworden ist. Zehn davon werden in den folgenden Seiten präsentiert. Sie alle zeichnen sich durch einen hohen Reifegrad aus und sind kostenlos erhältlich.

1. Adobe Spry
Spry ist ein leistungsfähiges Ajax-Framework, das die Entwicklung moderner Web 2.0-Anwendungen beschleunigt und vereinfacht. Selbst Designer mit geringen Javascript-Kenntnissen können damit dynamische und interaktive Seiten erstellen.

2. Dojo Toolkit
Mit Dojo lassen sich Desktop-typische Funktionen wie Drag & Drop und Kontextmenüs leicht in Web-Anwendungen implementieren. Das Framework überzeugt auch durch seine hohe Performance und Cross-Browser-Kompatibilität.

3. JQquery UI
JQuery UI liefert ein flexibles und ausgereiftes Framework, das sich in der Praxis bewährt hat. Durch Konzepte wie Modularisierung und Wiederverwendbarkeit macht es die Entwicklung komplexer Web-Frontends deutlich effizienter.

4. YUI Library
YUI dient als solides Fundament für anspruchsvolle Web 2.0-Clients. Bei der Frage nach dem richtigen Javascript-Framework für eigene Projekte sollte es unbedingt in Betracht gezogen werden.

5. Glow
Neben den Standardfunktionen, die bei keinem Javascript-Framework fehlen dürften, bietet Glow tolle UI-Widgets, eine exzellente Dokumentation, die den Einstieg erleichtert, sowie professionelle Performance.

6. Prototype
Bei komplexeren Web-Anwendungen ermöglicht Prototype Entwicklern, die bewährten Konzepte der Objekt-Orientierung auch auf der Client-Seite anzuwenden. Dass namhafte Unternehmen wie Apple und Twitter das Framework einsetzen, spricht für die hohe Robustheit und Leistungsfähigkeit der Lösung.

7. Scriptaculous
Scriptaculous überzeugt durch ein umfangreiches Feature-Set, die einfache Handhabung, sowie eine ausgezeichnete Online-Dokumentation mit vielen Code-Beispielen, die den Einstieg erleichtern.

8. MooTools
MooTools gehört zu den wichtigsten Frameworks für fortgeschrittene JavaScript-Entwickler. Dass es vom Unternehmen wie Chrysler, Ferrari, MTV Deutschland oder die Commerzbank eingesetzt wird, zeigt, dass es sich hier nicht um irgendwelches Framework handelt, sondern um eine ausgereifte und professionelle Lösung.

9. JavaScript MVC
JavaScriptMVC bringt Software-Engineering-Konzepte und -Tools der Enterprise-Klasse in die Welt der JavaScript-Programmierung. Das Framework eignet sich in erster Linie für mittelgroße und große Web-Projekte, bei denen Modularität und Wiederverwendbarkeit groß geschrieben werden.

10. Cufon
Typographie stellt ein zentrales Gestaltungselement im Web-Design dar. Dank Cufón müssen Designer keine Kompromisse mehr eingehen und können jede noch so exotische Font in ihren Web-Projekten verwenden, ohne dabei auf Flash oder externe Bildressourcen zurückgreifen zu müssen.

1. Adobe Spry: Ajax für Webdesigner

Mit "Spry" stellt der Multimedia-Riese Adobe ein mächtiges Ajax-Framework bereit, das eher für Webdesigner als für Entwickler konzipiert ist. Die Lösung ist integrierter Bestandteil des Html-Editors "Dreamweaver”, kann aber auch in jedem beliebigen Projekt verwendet werden. Dazu müssen lediglich die entsprechenden JavaScript-Dateien von der Adobe Labs-Website heruntergeladen und in die eigene Anwendung integriert werden.

Das Framework bietet einfache Mechanismen, mit denen interaktive und dynamische Webseiten erstellt werden können - auch dann wenn man wenig oder gar keine Programmiererfahrung hat. Es besteht aus den Modulen "Spry Data", "Spry Widgets" und "Spry Effects". Mit dem Ersten lassen sich anhand von "Spry XML Data Sets" asynchrone Datenübertragungen zwischen Server und Browser unkompliziert und mit wenig Aufwand realisieren; ohne angepasstes JavaScript für die verschiedenen Browser schreiben zu müssen. Das Widgets-Modul bietet zahlreiche vorgefertigte Grafik-Komponenten, die etwa bei der Seitennavigation eingesetzt werden können. Abgerundet wird die Bibliothek durch eine Reihe interessanter Funktionen zum Erstellen von visuellen Effekten, die in modernen Web-Anwendungen üblich sind.

2. Dojo Toolkit: Desktop-Oberflächen im Web nachmachen

Ähnlich wie Spry gibt das "Dojo Toolkit” Web-Entwicklern ein umfangreiches Funktions-Set zur DOM-Manipulation, Ajax-Funktionen und zahlreiche GUI-Komponenten an die Hand. Die integrierte GUI-Sammlung "Dijit" umfasst unter anderem sortierbare Tabellen, Bäume, Fortschrittsanzeige- und Kalender-Widgets, Texteditoren, sowie Kontextmenüs und Menüleisten. Mittels CSS kann das Aussehen der einzelnen Komponenten flexibel an die eigenen Bedürfnisse angepasst werden. Abgerundet wird die GUI-Bibliothek durch viele visuelle Effekte und Animationen, die sich online in Aktion sehen lassen.

Mitgeliefert werden zudem einfache Drag & Drop-Skripts, sowie Lokalisierungsfunktionen und Formular-Validatoren, die etwa bei der Prüfung der korrekten Syntax von E-Mail-Adressen hilfreich sind. Das Modul "Dojo Core", Kern der Bibliothek, ist dabei nur 26 KB groß und mit den wichtigsten Browsern - Firefox, Safari, Internet Explorer, Chrome und Opera - kompatibel. Weitere Module müssen nur bei Bedarf integriert werden. Wer ohne viel Programmieraufwand das Look & Feel von Desktop-Anwendungen im Web nachmachen möchte, der ist mit Dojo gut bedient.

3. JQuery UI: Mehr Flexibilität im Frontend

Das quelloffene Framework "JQuery” hat sich als einer der robustesten und bewährtesten JavaScript-Bibliotheken im Web 2.0 etabliert. Wenn man der Wikipedia Glauben schenkt, ist sie sogar die meistverwendete JavaScript-Bibliothek überhaupt. Die Erweiterung "JQuery UI” ergänzt das Framework um visuelle Effekte, Animationen und GUI-Komponenten. Vorgefertigte Standard-Widgets wie Formulare, Tabs, Dialogboxen, Kalender oder Fortschrittsanzeigen werden mitgeliefert. Wer eigene Widgets selber erstellen möchte, der wird auch nicht enttäuscht. Im Gegenteil. Mit Hilfe der so genannten "Widget-Factory” und eines ausgeklügelten CSS-Framework lassen sich beliebige, wiederverwendbare GUI-Komponenten nach eigenen Vorstellungen erstellen, die mit relativ wenig Aufwand modifiziert, erweitert und projektübergreifend eingesetzt werden können.

Die hohe Flexibilität und Modularisierung von JQuery UI spiegeln sich vor allem im Online-Tool "ThemeRoller” wieder. Mit Hilfe dieses graphischen Editors können Webdesigner das Look&Feel ihrer Web-Anwendung einfach konfigurieren. Hier genügt es, die verschiedenen Attribute der einzelnen Widgets, wie etwa Hintergrundfarbe oder Schriftgröße, mit dem richtigen Wert zu besetzen.

4. YUI Library: Umfangreiches Framework mit vielen Zusatztools

Moderne JavaScript-Frameworks wie die bereits aufgeführten Lösungen verfolgen einen ganzheitlichen Ansatz und bedienen alle Aspekte der Front-End-Entwicklung. Zu dieser Kategorie gehört auch die von Yahoo entwickelte "YUI Library”. Den Kern der Bibliothek bilden die Module "DOM-Collection", "Event-Utility" und das "Yahoo Global Object". Ohne sich um Browser-spezifische Eigenheiten kümmern zu müssen können Web-Entwickler damit auf Dokument-Elemente und Objektattribute zugreifen, sowie ein vereinheitlichtes Event-Handling über alle Komponenten hinweg implementieren. Das Modul "YUI Widgets" enthält zahlreiche GUI-Klassen, die auf den Core-Komponenten basieren und sehr gut dokumentiert sind.

Was die YUI Library jedoch von den Konkurrenzprodukten unterscheidet, sind die vielen Entwickler-Tools, die unter den "YUI-Utilities" zusammengefasst sind. Der Browser-History-Manager ermöglicht es zum Beispiel, dynamisch geladene Bereiche einer Html-Seite über eine URL zugänglich zu machen. Zudem bietet die Lösung hilfreiche Test- und Profiling-Werkzeuge, die weit über die typischen Debugging-Möglichkeiten von JavaScript hinaus gehen.

5. Glow: Zeittabellen, Richtext-Editor und weitere komplexe Widgets

Mit "Glow” bietet sich ein weiteres professionelles JavaScript-Framework an, das ähnlich wie die bereits aufgeführten Lösungen arbeitet. Diesmal stammt es aber komischerweise nicht aus der Open Source-Community oder von einem Softwareanbieter, sondern von der BBC. Nach rund zwei Jahren produktiven Einsatzes auf ihren eigenen Webseiten hat der britische Rundfunkanstalt ihre selbstentwickelte JavaScript-Bibliothek im Jahr 2009 als Open-Source freigegeben.

All die Features sind in 12 unterschiedlichen Modulen untergebracht. Dazu zählen unter anderem "glow.anim” für Animationen, "glow.data” zur Serialisierung und De-Serialisierung von Daten, "glow.embed” zum Einbetten von Flash-Objekten, sowie "glow.net” zum Senden und Empfangen von Server-Daten. Abgerundet wird auch Glow durch viele Widgets für die Benutzeroberfläche. Neben üblichen Standardkomponenten wie Panels, AutoSuggest-Elementen und Sliders enthält Glow auch komplexere Widgets, die man bei den meisten JavaScript-Frameworks vergeblich sucht. Dazu gehört ein einfaches, aber ansprechendes Bilder-Karussell, ein Richtext-Editor, sowie eine mächtige und flexible Zeittabelle. Damit lassen sich etwa Kalender-Events oder historische Ereignisse optimal visualisieren.

6. Prototype: Besseres JavaScript-Code durch Objekt-Orientierung

Ein weiteres JavaScript-Framework, das in Sachen Popularität mit JQuery und der YUI Library vergleichbar ist, bietet sich mit "Prototype” an. Die quelloffene und umfangreiche Library wurde 2005 der Öffentlichkeit vorgestellt und erfreut sich seitdem zunehmender Beliebtheit. Zu den renommierten Firmen, die Prototype einsetzen, zählen unter anderem eBay, Xing, Twitter, die CNN und Apple.

In erster Linie soll Prototype die Entwicklung komplexer Ajax-basierenden Web-Anwendungen vereinfachen. Dazu bietet die Lösung bequeme Funktionen zur DOM-Manipulation, sowie nützliche Shortcuts an - so zum Beispiel "$('ID')" anstatt "document.getElementById('ID')".

Das Besondere an dem Tool ist aber seine Unterstützung für klassische Objekt-orientierte Programmierung. Die Objekt-Orientierung hat ihren Weg in JavaScript zwar schon länger gefunden. Die Arbeit mit Klassen, Vererbung und weiteren Techniken höherer Programmiersprachen war im JavaScript-Umfeld jedoch noch nie so einfach gewesen wie mit Prototype. So genügt der Funktionsaufruf "Class.create()" um eine eigene Klasse zu spezifizieren. Wenn man dieser Methode den Namen einer weiteren Klasse als Parameter übergibt, entsteht unkompliziert eine Vererbungsbeziehung zwischen den beiden Klassen.

7. Scriptaculous: Effekte und Animationen auf Basis von Prototype

Wer sich für Prototype entscheidet, kann es optimal mit "Scriptaculous” erweitern. Die Library ergänzt das Prototype-Framework um einfach zu benutzende Ajax-Steuerungselemente, Drag-&-Drop-Funktionen, DOM-Werkzeuge, sowie ein umfangreiches Set an visuellen Effekten und Animationen. Alles, was die Benutzeroberfläche einer typischen Web 2.0-Anwendung ausmacht, kann mit Hilfe von Scriptaculous realisiert werden - darunter Inline-Text-Editoren, Transitionen, Fades und vieles mehr.

Die Arbeit damit kann kaum einfacher sein. So lässt sich zum Beispiel mit einer einzigen Zeilen Code wie "Effect.Fade('objekt_id', { duration: 3.0 })” ein Fade-Effekt auf ein beliebiges DOM-Objekt definieren. Die Implementierung der restlichen Effekte erfolgt ähnlich einfach. Interessierte können auf der Produktseite erfahren, was die Lösung alles zu bieten hat. Da stehen zahlreiche Code-Beispiele und Demos, sowie eine detaillierte Beschreibung der verschiedenen Objekte, Methoden und Eigenschaften der Library zur Verfügung.

8. MooTools: JavaScript für Fortgeschrittene

"MooTools” gehört ebenfalls zu den wichtigsten Frameworks für JavaScript-Entwickler. Dass es vom Unternehmen wie Chrysler, Ferrari, MTV Deutschland oder die Commerzbank eingesetzt wird, zeigt, dass es sich hier nicht um irgendwelches Framework handelt, sondern um eine professionelle und ausgereifte Lösung. Vergleichbar mit Prototype verfolgt auch MooTools einen Objekt-orientierten Ansatz (der Name steht für "My Object-oriented Tools”). Damit eignet es sich eher für fortgeschrittene Entwickler, die mit der Arbeit mit höheren Programmiersprachen vertraut sind.

Den Kern der Implementierung stellt ein Vererbungssystem dar, das in etwa dem entspricht, was man aus Sprachen wie Java oder C++ kennt. Dieses Konzept ermöglicht es dem Entwickler, wiederverwendbare und flexible Komponenten in Form von Klassen zu schreiben und das Framework mit großer Flexibilität zu erweitern. Ansonsten bietet MooTools alles, was man von einem typischen JavaScript-Framework erwarten darf: Wiederverwendbare GUI-Komponenten, visuelle Effekte, einfaches Event-Handling und vereinfachte DOM-Manipulation, Ajax-Unterstützung, Cross-Browser-Kompatibilität, sowie Erweiterungsmöglichkeiten durch zusätzliche Plug-Ins.

9. JavaScript MVC: JavaScript der Enterprise-Klasse

Zu den JavaScript-Tools für Fortgeschrittene gehört auch "JavaScript MVC” ("Model, View, Controller”). Das MVC-Architekturmuster bildet die Grundlage für einen flexiblen Programmentwurf, der die Änderbarkeit, Erweiterbarkeit und Wiederverwendbarkeit der einzelnen Komponenten der Software erleichtert. Serverseitig werden Web-Anwendungen in aller Regel anhand dieses Modells strukturiert. Clientseitig findet dagegen die strikte Trennung der Modell-, Präsentations- und Steuerungs-Schichten eher selten statt. Die Folge: Web-Frontends lassen sich nicht so leicht erweitern oder anpassen, die verwendeten Komponenten können nur schwer in anderen Projekten wiederverwendet werden.

Wer von der Flexibilität des MVC-Ansatzes auch auf Clientseite profitieren möchte, für den ist das JavaScript MVC-Framework gedacht. Die Lösung baut auf dem JQuery-Framework auf und bietet Web-Entwicklern ein umfangreiches Feature-Set, das eine effizientere Implementierung von Web-Clients ermöglicht. Darüber hinaus integriert das Tool verschiedene Bibliotheken aus der Open-Source-Szene wie beispielsweise "Selenium” und "Env.JS” zum Ausführen von Tests. Damit können Anwendungen direkt im Browser debuggt und automatisierte Tests ausgeführt werden. Ferner dient "Include.Doc” der einfachen Dokumentation des Quelltexts. Für das Fehler-Reporting kommt "DamnIT" zum Einsatz. Damit bietet JavaScript MVC all die Werkzeuge, die bei der Arbeit mit höheren Sprachen Standard, aber in der JavaScript-Welt nicht so üblich sind.

10. Cufón: Beliebige Schriftarten im Web

Web-Designer mussten vor nicht allzu langer Zeit auf Flash zurückgreifen, wenn sie in ihren Projekten Schriftarten verwenden wollten, die dem Webstandard nicht entsprechen. Mit Hilfe von "Cufón” können sie nun auf Adobes Technologie ganz verzichten. Das Tool basiert vollständig auf JavaScript, lässt sich mit jedem der vorgestellten Frameworks integrieren, und bietet eine besonders einfache Möglichkeit, jede noch so exotische Schriftart im Web einsetzen zu können. Der Clou: Schriftarten werden unter Verwendung eines Online-Tools, dem "Cufón Generator”, in ein proprietäres Format konvertiert und in einer JavaScript- beziehungsweise Json-Datei gespeichert, die dann von der integrierten Engine genutzt wird, um die Fonts zu rendern.

Die Schrifteinbettung geht mit dem Cross-Browser-kompatiblen Tool recht unkompliziert. Zunächst muss man zwei Sourcecode-Dateien in die Website einbinden: Die Core-Bibliothek "Cufon-yui.js” und die mit dem Cufón Generator erzeugte Font-Datei. Per JavaScript lässt sich dann definieren, in welchen Html-Elementen die integrierte Schriftart verwenden werden soll. Dann genügt ein einfacher Funktionsaufruf wie "Cufon.replace('h1')”, um sämtliche H1-Überschriften in der gewünschten Schriftart auszugeben. Natürlich lassen sich mehrere Schriftarten in einer Webseite verwenden. Dazu braucht man lediglich die entsprechenden Font-Dateien hinzufügen und beim Funktionsaufruf den Namen der gewünschten Font übergeben.

Fazit

Diese Produktübersicht zeigt, dass es am Markt viele professionelle JavaScript-Frameworks erhältlich sind, die die tägliche Arbeit an der Entwicklung von Web-Clients deutlich vereinfachen können. Für JavaScript-Anfänger eignen sich vor allem Lösungen wie Adobe Spry, die YUI Library das Dojo Toolkit, Glow, JQuery UI oder Scriptaculous. Sie kapseln die Komplexität ab, die hinter der Implementierung visueller Effekte, Animationen und Ajax-Funktionen steckt, und bieten vorgefertigte Komponenten an, die mit relativ wenig Aufwand einzusetzen sind. Die Frameworks Prototype, MooTools und JavaScript MVC richten sich dagegen eher an fortgeschrittene Entwickler, die die bewährten Konzepte und Methoden höherer Programmiersprachen in die Welt von JavaScript bringen möchten. (ph)