Dieser Artikel ist Teil einer Serie:

  1. Mootools im Überblick
  2. Dollars und Events
  3. Ein Tutorial mit Objekten
  4. Klassen erstellen und erweitern
  5. Programmieren im Mootools-Stil

Manchmal glaube ich, wenn ich so durch den Feedreader blättere, dass jQuery kurz davor steht, ein Synonym für Javascript-Framework zu werden. Das ist ein bisschen schade – alle Welt scheint nur jQuery zu benutzen, dabei gibt es doch viele andere, tolle Javascript-Frameworks, die ähnliches leisten. Eins davon ist Mootools, für das ich ja schon etwas länger unorganisiert Propaganda verbreite. Diese Artikelserie soll eine etwas umfangreichere Abhandlung über Mootools werden, die auch für Otto Normaljavascriptuser zugänglich sein soll.

In diesem ersten Teil soll es darum gehen, erst mal Sinn und Zweck eines Javascript-Frameworks zu erklären und einen kurzen Überblick über die Geschichte und Vorzüge von Mootools zu geben.

Was ist Mootools?

Mootools (offizielle Schreibweise: MooTools) ist das, was gemeinhin unter einem Javascript-Framework versteht: eine Sammlung von hilfreichen Funktionen, die die Arbeit mit Javascript erleichtern. Javascript schleppt bekanntlich ein paar Designfehler mit sich herum, leidet unter dem DOM und diversen Extrawürsten, die die verschiedenen Browser sich braten. Aus Ajax-Tutorials im Hallo-Welt-Stil kennt man komplizierte Konstruktionen wie diese:

// Request-Objekt für Ajax erstellen
if (window.XMLHttpRequest) {
    var request = new XMLHttpRequest(); // Richtige Browser
} else if (window.ActiveXObject) {
    try{
        var request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
    } catch(e) {
        try {
            var request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
        } catch (e) {}
    }
}

Mootools und andere Javascript-Frameworks wie jQuery vereinfachen die Arbeit mit Javascript, indem sie Funktionen zur Verfügung stellen, die Browser-Eigenheiten oder komplexe Operationen intern regeln und dem Webworker so Arbeit abnehmen. Die obrige Erstellung eines Request-Objekts für Ajax sieht beispielsweise bei Mootools so aus:

var request = new Request ();

Damit arbeitet es sich dann schon angenehmer. Ganz ähnliche Funktionen gibt es für Animationen, das Erstellen oder Verändern neuer Elemente, den Umgang mit JSON, für Cookies und viel mehr.

Die Geschichte von Mootools

Die Anfänge von Mootools liegen in einem reinen Effekt-Plugin namens moo.fx für das Framework Prototype. Der Autor, Valerio Proietti, merkte bald, dass Prototype zwar ganz nett war, aber nicht alles konnte oder so machte, wie er es Valerio gern gehabt hätte. Die logische Konsequenz war die Entstehung eines eignen Framewrks unter dem Namen Mootools.

Mootools steht angeblich für My Object Oriented Tools aber da der Autor auch die Website mad4milk betreibt, darf man zumindest in Betracht ziehen, dass Valerio einfach ein großer Fan von Kühen ist. Die aktuelle Ausgabe von Mootools ist die Version 1.2.3, die am 19. Juni dieses Jahres erschien.

Taugt Mootools für den Fronteinsatz?

Diese Liste von gewichtigen Seiten, die allesamt Mootools einsetzen, dürfte diese Frage hinreichend beantworten:

Diese Liste ist nur eine Auswahl – weitere Motools-Seiten sammelt das Mootools-Team auf Github. Man sieht jedenfalls, dass wir es hier also nicht mit irgendeiner esoterischen Hacker-Spezialität zu tun haben, sondern mit einem kompletten, ausgereiften Framework.

Was unterscheidet Mootools von jQuery anderen Frameworks?

Der Funktionsumfang ist bei allen modernen Javascript-Frameworks so gut wie identisch; man kann mit CSS-Selektoren Elemente auswählen, man kann sie manipulieren, man kann Ajax-Requests absetzen und so weiter. Der Unterschied liegt letzten Endes immer im „Wie“ und nicht im „Was“. Und bei Mootools hat das „wie“ den Namen objektorientierte Programmierung.

Kernkonzept von Mootools ist ein Vererbungssystem, das in etwa dem entspricht, was man aus der objektorientierten Programmierung in anderen Sprachen kennt. Das erlaubt es, das Framework einfach zu erweitern oder zu verändern sowie wiederverwertbare und flexible Funktionen zu schreiben. Wenn man das Mootools-Prinzip erst einmal verinnerlicht hat, wird man feststellen, dass man sehr viel von dem, was man tagtäglich so programmiert, wiederverwerten kann (und wird). Mehr dazu in Teil 3 der Serie.

Andererseits ist es mit Mootools auch möglich, einfache Dinge auf einfache Art und Weise zu regeln. Man kann zwar alles in Klassen kapseln (und sollte das in aller Regel auch tun) aber wenn man nur schnell eine Kleinigkeit machen möchte, ist das nicht kompliziert. Ein paar Elemente auswählen und ausblenden? Kein Problem:

$$('div.foobar').fade('out');

Die einfache Seite von Mootools werden wir in Teil 2 der Serie beleuchten. Festzuhalten ist aber für den Moment: mit Mootools hat man es bei Kleinigkeiten leicht und wenn mal dickere Bretter gebohrt werden müssen, bietet es alle Funktionen, um das Dickbrettbohren effizent, übersichtlich, wiederverwertbar und modular zu machen. Somit ist es gerade für die Vielschreiber unter den Javascriptern von Interesse.

Ausblick auf Teil 2 und 3: Ran an den Code

In Teil 2 werden wir uns ein wenig mit der oben angesprochenen einfachen Seite von Mootools befassen – also ein paar Demos anschauen, ein bisschen Hallo-Welt-artigen Code basteln und generell erst mal feststellen, dass auf der einfachsten Ebene Mootools keine schwarze Magie ist. In Teil 3 nehmen wir uns dann das mächtige Class-Objekt zu Brust und werden feststellen, was Mootools wirklich stark macht.

Wie schon bei der Artikelserie über Linux habe ich zwar einen Plan für die kommenden Teile, aber bin natürlich für Feedback offen. Falls sich also jemand etwas Spezielles wünschen möchte, nur raus damit!