Javascript-Framework

Probleme bei der JavaScript-Programmierung

Eine der Hauptaufgaben der JavaScript-Programmierung ist die Manipulation von HTML-Elementen mithilfe des Document Object Models (DOM). Damit kann man sich von Element (Knoten) zu Element bewegen und diese verändern. Man kann Knoten über eine ID oder einen Tag-Namen ansteuern, es gibt aber z.B. keine direkte Möglichkeit, alle Elemente einer Klasse auszuwählen.

Eine weitere Schwierigkeit stellt die unterschiedliche Interpretation des DOMs der Browsern dar. Teile des DOM-Standards funktionieren nicht in allen Browsern. Der Internet Explorer behandelt z.B. Events anders als andere Browser, derselbe HTML-Code erzeugt eventuell in Firefox und Safari mehr Textknoten als im Internet Explorer. Das Beheben solcher JavaScript-Probleme ist sehr aufwändig und es kostet viel Zeit, entsprechenden Code zu produzieren, damit sich die verschiedenen Browser gleich verhalten.

Funktion und Vorteile von JavaScript-Frameworks

Viele JavaScript-Programme erfüllen immer wieder die gleichen Aufgaben in Webseiten: Elemente auswählen, neuen Inhalt einfügen, Inhalte anzeigen und ausblenden, die Attribute eines Tags ändern, den Wert von Formularfeldern bestimmen oder auf verschiedene Benutzerinteraktionen reagieren. Sämtliche dieser Funktionalitäten jedes Mal neu zu programmieren kann sehr aufwändig sein, vor allem wenn die Browser den Code unterschiedlich interpretieren. Mithilfe von JavaScript-Frameworks (auch JavaScript-Bibliotheken genannt) kann man viele zeitraubende Programmierdetails überspringen.

Eine JavaScript-Bibliothek ist eine Sammlung von JavaScript-Code, die einfache Lösungen für viele verbreitete und häufig benötigte Funktionalitäten beinhaltet. Solche Bibliotheken arbeiten wie eine Ansammlung im Voraus geschriebener JavaScript-Funktionen, die man je nach Bedarf in seine Seite einbindet. Diese Funktionen erleichtern den Einsatz häufig wiederkehrender Aufgaben, so kann man viele Zeilen selbstgeschriebenen Code oft durch einen einzigen Funktionsaufruf aus der Bibliothek ersetzen. Die Bibliotheken sind darauf ausgelegt, dass sie in allen Browsern gleich funktionieren, der hohe Zeitaufwand für ausführliche Tests entfällt. Mittlerweile gibt es sehr viele JavaScript-Bibliotheken von denen die meisten kostenlos verwendet werden können. Auch große Websites wie Yahoo, Amazon, CNN, Apple, Microsoft, Google und Twitter setzen erfolgreich JavaScript-Frameworks ein.

Verschiedene JavaScript-Frameworks kurz vorgestellt

• jQuery (http://www.jquery.com) ist sehr beliebt und kostenlos verfügbar, es wird von einer großen Entwicklergemeinde ständig weiterentwickelt. jQuery baut auf CSS-Wissen auf, da DOM-Elemente mit denselben Selektoren angesteuert werden. jQuery wird auf Tausenden von Websites verwendet, darunter viele mit hohem Traffic-Aufkommen wie Dell, Warner Bros. Records und Newsweek. Für jQuery können andere Programmierer Plug-ins erstellen und diese auf der jQuery-Website veröffentlichen. Das sind JavaScript-Add-on-Programme, die in Verbindung mit jQuery bestimmte Aufgaben, Effekte oder Funktionen (z.B. Slideshows) umsetzten und sich sehr einfach in eine Website einfügen lassen.
• Yahoo User Interface Library (http://developer.yahoo.com/yui/) ist ein Projekt von Yahoo. Yahoo-Programmierer erweitern und verbessern die Bibliothek ständig und bieten diese zur freien Verwendung mit einer ausführlichen Dokumentation auf der Entwickler-Website an.
• Prototype (http://www.prototypejs.org/) war eine der ersten verfügbaren JavaScript-Bibliotheken. Mit einer Datei können viele verschiedene Aufgaben erledigt werden z.B. das DOM leichter manipulieren oder auf einfache Wiese über AJAX mit einem Webserver kommunizieren. Prototype wird zusammen mit einer Bibliothek für visuelle Effekte, Animationen und Oberflächenfunktionen namens scriptaculous (http://script.aculo.us/) verwendet.
• Dojo Toolkit (http://dojotoolkit.org/) gibt es ebenfalls schon lange. Es handelt sich um eine sehr mächtige und sehr große Sammlung von JavaScript-Dateien, die nahezu jede JavaScript-Aufgabe beherrschen.
• Mootools (http://mootools.net/) ist eine weitere beliebte Bibliothek, die unter Open Source Lizenz verfügbar ist. Sie ist auf hohe Browserkompatibilität ausgelegt und bietet eine gute Dokumentation.
• ExtJS (http://www.sencha.com) ist ein JavaScript-Framework, das unter Open Source Lizenz oder kommerzieller Lizenz genutzt werden kann. Verschiedene Komponenten (einzelne Bausteine) sind beliebig kombinierbar. ExtJS bietet eine hohe Browserkompatibilität und wird hauptsächlich für komplexe Webanwendungen verwendet, farbliche Anpassungen von Benutzeroberflächen sind über sogenannte CSS-Themes möglich.

Vergleich der einzelnen Frameworks auch unter http://matthiasschuetz.com/javascript-framework-matrix/de/

Quelle: David Sawyer McFarland: JavaScript Missing Manual. O'Reilly Verlag, Köln 2009. ISBN 978-3-89721-879-6