JavaScript: Bibliotheken und Frameworks

Notizen

Einführung

Wie bei jeder Programmiersprache finden sich unzählige Fertigscripte und Codeschnipsel im Netz, die Sie in Ihren Programmen verwenden können und die spezifische Aufgaben lösen. Um solche Fertig- und Helferscripte soll es hier nicht gehen, sondern um Bibliotheken, die den Programmierstil grundlegend ändern können.

Die meisten Web-Programmiersprachen bringen die wichtigsten Funktionen schon mit und es gibt einen relativ festen Rahmen, der zentral weiterentwickelt wird. In JavaScript hingegen gibt es verschiedene Schnittstellen unterschiedlicher Herkunft, die zum Teil alles andere als einfach und intuitiv sind. Es gibt einflussreiche proprietäre Erweiterungen und selbst der Sprachkern ist in den verschiedenen Browsern unterschiedlich umgesetzt (siehe ). Für Standardaufgaben wie das Event-Handling gibt es in JavaScript kein verlässliches Fundament.

Sogenannte Frameworks (englisch Rahmenwerk, Grundstruktur) kaschieren diese chaotische Situation, indem sie eine Abstraktionschicht über JavaScript legen. Ziel ist es, dass grundlegende Aufgaben des DOM Scripting nicht immer wieder von Hand mit viel Aufwand erledigt werden müssen. Anstatt z.B. direkt mit dem DOM zu arbeiten, führen Frameworks einige Objekte und Methoden als Abstraktionsschicht ein. Diese sind einfacher und intuitiver zu bedienen und nehmen dem Webautor einen Großteil der Arbeit ab.

Heutige Frameworks setzen auf Vereinfachungen unter anderem in folgenden Bereichen:

  1. Arbeiten mit dem DOM-Elementenbaum:
    1. Effizientes Ansprechen von Elementen im Dokument z.B. über CSS-artige Selektoren
    2. Durchlaufen und Durchsuchen von Elementlisten nach bestimmten Kriterien
    3. Einfaches Ändern des DOM-Baumes, Einfügen von neuen Elementen und Textinhalten
    4. Zuverlässiges Auslesen und Setzen von Attributen
  2. Event-Handling:
    1. Aufrufen von Initialisierungs-Funktionen, sobald der DOM-Baum verfügbar ist, um dem Dokument die gewünschte Interaktivität hinzuzufügen
    2. Registrieren und Entfernen von Event-Handlern sowie die Kontrolle des Event-Flusses
    3. Browserübergreifender Zugriff auf Event-Eigenschaften wie die Mausposition und gedrückte Tasten
  3. Darstellung abfragen und beeinflussen:
    1. Auslesen und Ändern der CSS-Eigenschaften von Elementen
    2. Hinzufügen und Entfernen von Klassen
    3. Animationen und Effekte, Wiederholungen und Verzögerungen
    4. Zugriff auf die Eigenschaften des sogenannten Viewports (der rechteckige Raum, in dem die Webseite dargestellt wird), der Position sowie der Ausmaße eines Elements
  4. Vereinfachtes Arbeiten mit Formularen
  5. Ajax: Kommunikation mit dem Webserver, um Daten zu übertragen oder nachzuladen, ohne das Dokument zu wechseln (XMLHttpRequest)
  6. Strukturierte und objektorientierte Programmierung, Modulverwaltung

Dies ist nur eine Auswahl der wichtigsten Bereiche, sodass Sie einen Einblick bekommen, an welchen Stellen die meisten Frameworks Vereinfachungen anbieten. Darüber hinaus bieten viele Frameworks freilich noch weitere Funktionen an, z.B. Bedienelemente (englisch Controls oder Widgets) für JavaScript-Webanwendungen.

Vor- und Nachteile von Frameworks

In letzter Zeit ist gleichsam ein Hype um Frameworks zu verzeichnen. Ihr Einsatz ist oft mit überzogenen Erwartungen und Missverständnissen verbunden. Diese sollen im Folgenden kritisch beleuchtet werden.

Frameworks sollten hier weder verteufelt noch vergöttert werden. Ihre Anwendung ist nämlich ein zweischneidiges Schwert:

Frameworks helfen Anfängern, setzen aber JavaScript-Grundkenntnisse voraus
Frameworks legen ein Abstraktionsschicht über die Browserunterschiede, vereinheitlichen den Flickenteppich von schwer zu bedienenden Schnittstellen und bieten Helferfunktionen an. Das kann Webautoren viel Arbeit abnehmen und vor allem Unerfahrenen dabei helfen, sich in der unübersichtlichen JavaScript-Welt zurechtzufinden.
Sie sollten jedoch nicht darauf hoffen, dass Frameworks das Schreiben von JavaScript ohne JavaScript-Kenntnisse ermöglichen! Frameworks nehmen Ihnen nicht das Verständnis der Grundlagen ab, sondern setzen diese stillschweigend voraus. Frameworks können Ihnen in gewissen Punkten helfen und Vorgaben machen, an vielen Stellen sind sie jedoch weiterhin auf Ihre eigenen Programmierfähigkeiten angewiesen.
Abstraktion hat Vor- und Nachteile
Die Abstraktionsschicht verbirgt die internen Vorgänge und gibt vor, einen schnellen Einstieg in eine schwierige Materie zu ermöglichen. Es ist in vielen Fällen jedoch unverzichtbar, die interne Arbeitsweise zu kennen. Hier gilt: Wenn Sie die Aufgaben schon einmal ohne Framework von Hand gelöst haben bzw. die Lösungsansätze kennen, stehen Sie nicht im Regen, wenn die Abstraktion in der Praxis nicht mehr greifen sollte.
Frameworks stecken voller Know-How und eine effiziente Anwendung erfordert Profiwissen
Frameworks setzen Programmiertechniken ein, die dem gemeinen JavaScript-Programmierer meist unbekannt sind. Die ausgiebige Nutzung von Frameworks läuft zudem immer wieder darauf hinaus, dass Sie in deren Code schauen müssen, um gewisses Verhalten zu verstehen. Das Nachvollziehen dieses anspruchsvollen Codes erfordert wiederum fortgeschrittenes JavaScript-Wissen.
Dass die heutigen Frameworks in einer bestimmten Weise aufgebaut sind, ist das Resultat eines langen Entwicklungsprozesses. Wenn Sie die ausgeklügelten Techniken der Frameworks einsetzen möchten, kommen Sie nicht umhin, diese Entwicklung nachzuvollziehen.
Frameworks können den Stil entscheidend verbessern
Mit verschiedenen Frameworks ist ein hochentwickelter Programmierstil möglich. Sie betonen vernachlässigte JavaScript-Fähigkeiten wie die funktionale und objektorientierte Programmierung. Zudem bringen sie bewährte Konzepte aus anderen Sprachen in die JavaScript-Welt.
Auch hier gilt: Um diese Möglichkeiten auszureizen, müssen Sie sich intensiv mit den dahinterstehenden Konzepten auseinandersetzen. Alleine durch den Einsatz eines Frameworks wird ihr Code nicht automatisch eleganter, strukturierter oder kompatibler - Frameworks können Ihnen aber entscheidende Hinweise geben.
Dokumentationen sind größtenteils unzureichend
Sie sollten die Herausforderung nicht unterschätzen, die Schnittstelle eines Frameworks zu überblicken und zu verstehen. Die verbreiteten Frameworks bieten leider wenig gute Dokumentation und Anleitungen, die Ihnen die jeweiligen Grundideen vermitteln.

Ausgehend von diesen Beobachtungen sei Ihnen folgender Umgang mit Frameworks empfohlen:

  1. Lernen Sie auf jeden Fall die Grundlagen von JavaScript! Dabei werden Sie die Schwierigkeiten der Praxis kennenlernen und eine Eindruck davon bekommen, wo Frameworks ansetzen.
  2. Entwickeln Sie zunächst eigene kleine Bibliotheken, indem Sie ständig wiederholte Vorgänge in Helferfunktionen auslagern. Frameworks sind der Versuch, solch lose Helferfunktionen zu einer neuen, einheitlichen Schnittstelle zusammenzufassen.
  3. Lernen Sie eine verbreitetes Framework und dessen typischen Programmiertechniken kennen. Verschaffen Sie sich einen Überblick über den grundlegenden Funktionsumfang, sodass Sie bekannte Aufgaben mithilfe des Frameworks schneller umsetzen können. Entwickeln Sie anfangs kleine Scripte mithilfe des Frameworks und versuchen Sie, dabei die Möglichkeiten des Frameworks auszureizen.
  4. Wenn Sie tiefer in die JavaScript-Programmierung einsteigen wollen, informieren Sie sich über die Konzepte der verschiedenen Frameworks, ihre Unterschiede und Grenzen.

Eigene Bibliotheken zusammenstellen

Bei den verbreiteten Frameworks ist zu beobachten, dass viele Anwender den Funktionsumfang nicht ausnutzen, sondern gerade einmal von drei oder vier gesonderten Funktionen Gebrauch machen. Die begrüßenswerten Innovationen haben die Anwender größtenteils noch nicht erreicht. Das liegt zum einen an den besagten fehlenden Dokumentationen, zum anderen an der Komplexität und fehlenden Modularisierbarkeit. Heraus kommt ein Code, bei dem Framework-Logik und herkömmlichen Lösungsweisen vermischt werden. Dieses Kauderwelsch ist inkompatibel, schwer verständlich und schlecht wartbar.

Unklare Sache von: mschaefer

zuviel Gelaber

Es ist deshalb nicht immer klug, ein vorgefertigtes, umfangreiches Framework zu nehmen, von dem der größte Teil unverstanden ist. Setzen Sie diejenigen Hilfsmittel ein, die sie verstehen und beherrschen. Sie können Sie Ihre JavaScript-Programmierung bereits entscheidend vereinfachen, indem Sie punktuell Helferscripte einsetzen. Diese Scripte helfen dabei, häufige Aufgaben umzusetzen und gängige Probleme zu lösen. In der Regel sind sie leichter verständlicher und erfordern wenig Einarbeitung.

Im Folgenden werden Bausteine kurz vorgestellt, aus denen Sie sich eine eigene Bibliothek zusammenstellen können. Diese Vorstellung ist auch gleichzeitig ein Einstieg in die Funktionsweise der »großen« Frameworks.

»Scripting Essentials« von Dan Webb

Diese Zusammenstellung von Helferfunktionen ist ein gutes Beispiel dafür, wie bereits ein paar gezielte Funktionen die Programmierung vereinfachen und verbessern können. Dan Webb nennt sie seine Scripting Essentials [en]. Code herunterladen. Das Script umfasst folgende Teile:

Verbessertes Arbeiten mit Listen (Arrays, Knotenlisten, Strings usw.)
Das Script fügt allen Arrays neue Methoden hinzu, die in Mozillas JavaScript-Spezifikation 1.6 definiert werden, aber noch nicht browserübergreifend umgesetzt werden. Mit diesen Methoden lassen sich alle möglichen Listen einfach durchlaufen, durchsuchen und Funktionen auf jedes Listenelement anwenden. Zudem stehen die Methoden für alle listenartige Objekttypen zur Verfügung, z.B. DOM-Knotenlisten und Strings.
Funktionen zum Ansprechen von Elementen nach ID und Klasse
Das Script definiert Funktionen mit den Kurznamen $ bzw. $$. Mit der ersten lassen sich Elemente anhand ihrer ID, mit der zweiten anhand einer Klasse ansprechen. Mit langen Namen könnten Sie getElementsById und getElementsByClassName heißen.
Browserübergreifendes Event-Handling
Mithilfe der Funktionen Event.add und Event.remove können Sie komfortabel Event-Handler registrieren und entfernen. Die wichtigsten Browserunterschiede beim Event-Handling werden nivelliert.
...
...

...

forEach von Dean Edwards

http://dean.edwards.name/weblog/2006/07/enum/

ist eine Enumeration-Funktion für unterschiedliche Objekttypen

DOMhelp von Christian Heilmann

http://www.beginningjavascript.com/DOMhelp.js

ist ein Sammlung von Helferfunktionen aus Christian Heilmanns Buch »Beginning JavaScript with DOM Scripting and Ajax«.

Struktur zur Verkettung eigener Helferfunktionen von Dustin Diaz

http://www.dustindiaz.com/roll-out-your-own-interface/

Dustin Diaz zeigt, wie man sich eine eigenes kleines Framework im $(...)-Stil zusammenstellt.

ffjs von Sven Helmberger

http://fforw.de/ffjs/

minimalistische Bibliothek

Verbreitete Frameworks

...

Hier ist eigentlich nur interessant, diese drei beispielhaft vorzustellen und auf deren unterschiedliche Konzepte hinzuweisen.

mootools ist sehr prototype-like, dojo hat Namespaces wie YUI

jQuery

Prototype

Yahoo! User Interface Library (YUI)