Mootools für die Massen, Teil 1: Mootools im Überblick

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

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!

Kommentare (23)

  1. jb

    23. Juli 2009, 12:00 Uhr

    Schon mal eine intressante Einführung, grade für jemanden wie mich dessen JS-Kenntnisse nicht über eine alert-Box hinaus gehen. Ich habe zwar mootools auch schon mal angewendet, es ging aber nie über ein Copy&Paste der Demo hinaus... auch weil ich bis jetzt noch kein gutes JS/Ajax-Tutorial gefunden habe.
    Warte schon auf die näschten Teile...

  2. Worf

    23. Juli 2009, 12:20 Uhr

    Mich würde eher interessieren was an JQuery so schlecht ist im Vergleich.
    Ich lese Moo ist toll weil objektorientiert und weil einfach, ist JQuery das etwa nicht und wenn nein, dann hat es sicher andere Vorteile.

    Auch ein paar Nachteile von Moo sollten irgendwo auftauchen, damit das ganze nicht zur einseitigen Propaganda wird.

    Ansonsten bitte weiter schreiben, ich will mehr Code sehen.

  3. Peter

    23. Juli 2009, 12:24 Uhr

    Zitat Worf:

    Mich würde eher interessieren was an JQuery so schlecht ist im Vergleich.

    Wer sagt denn, dass an jQuery was schlecht ist? Das ist anders, nicht schlechter oder besser.

  4. e7

    23. Juli 2009, 12:50 Uhr

    @2: Ach was, hier gibt's öfter einseitige, nicht nachvollziehbare Propaganda. Siehe HTML5.

  5. Fabian

    23. Juli 2009, 13:24 Uhr

    Eine sehr nette Einführung! Ich selbst nutze momentan jQuery, bin aber für alles offen, gerade weil ich mich in Sachen Javascript prinzipiell zurückhalte.
    Was mich dann meist noch interessiert, ist sozusagen das Lehrmaterial, sei es ein paar Links oder ne Buchempfehlung. Da wäre ich dankbar!

  6. Webstandard-Team

    23. Juli 2009, 14:16 Uhr

    Klasse Artikel Peter. Zu dem Thema welches Framework denn das geeignete ist, hatte ich kürzlich erst eine kleine Umfrage unter dem Titel "What's your favorite JavaScript-Framework?" gestartet. An dieser haben letztendlich 363 Teilnehmern teilgenommen und dort ist MooTools, für mich etwas unverständlicherweise, mit 8% ( 29 Stimmen ) doch recht weit abgeschlagen.

  7. Philipp Kruse

    23. Juli 2009, 15:20 Uhr

    Vorneweg: jedes Framework hat selbstverständlich einen gewissen Stellenwert und ich will niemandes Lieblingsprojekt schlechtreden – und ganz sicher keine Werbung für Framework XYZ machen. Dennoch werde ich mit MooTools trotz einiger guter Ideen einfach nicht warm. Was mich nämlich ganz grundsätzlich an dessen Ansatz stört, ist die Vorstellung, dass man JavaScript echte Objektorientierung beibringen sollte. JavaScript ist m.E. schlicht keine Sprache für klassisches OOP. Wenn man versucht, das nachzubauen, verliert man schnell den Blick für die wirklich schönen Eigenschaften, insb. das was aus der funktionalen Programmierung »ausgeliehen« wurde.

  8. Jens Henschel

    23. Juli 2009, 16:01 Uhr

    Gibt es schöne Seiten an prozedualer Programmierung? Abgesehen davon dass man mal eben schnell was "hin hacken" kann fällt mir nichts ein.

    Da ich i.d.R. Joomla als CMS einsetze und dort MooTools schon mitgeliefert wird (ich weiß, eine veraltete Version), finde ich es sehr interessant mal etwas kompetentes auf deutsch lesen zu können.

    Mach weiter Peter!

  9. Peter

    23. Juli 2009, 16:13 Uhr

    Zitat Philipp Kruse:

    Was mich nämlich ganz grundsätzlich an dessen Ansatz stört, ist die Vorstellung, dass man JavaScript echte Objektorientierung beibringen sollte. JavaScript ist m.E. schlicht keine Sprache für klassisches OOP.

    Öhm. Javascript ist doch sogar schon von Haus aus absolut objektorientiert! Nur eben klassenlos (wobei man das auch mit nur ein paar Zeilen reparieren kann).

  10. Florian

    23. Juli 2009, 18:40 Uhr

    Zitat Jens Henschel:

    Gibt es schöne Seiten an prozedualer Programmierung? Abgesehen davon dass man mal eben schnell was "hin hacken" kann fällt mir nichts ein.

    Informier dich halt, was funktionale Programmierung ist.

    Hint: Das ist nicht "prozedurale Programmierung".

  11. Torsten

    23. Juli 2009, 19:08 Uhr

    Habe bisher auch nur per Copy&Paste jQuery eingesetzt und freue mich auf Infos zu Frameworks generell und Mootools im Speziellen. Bin gespannt!

  12. Gregor

    23. Juli 2009, 22:05 Uhr

    Ich freu mich schon drauf. Hab erst ein bisschen mit jQuery rumgespielt, aber MooTools wurde mir schon öfter empfohlen. Hab zwar gerade keine Zeit zum rumspielen damit, aber würde mir das gerne später mal ein bisschen angucken.

  13. Axel

    24. Juli 2009, 00:33 Uhr

    Zitat Philipp Kruse:

    Vorneweg: jedes Framework hat selbstverständlich einen gewissen Stellenwert und ich will niemandes Lieblingsprojekt schlechtreden – und ganz sicher keine Werbung für Framework XYZ machen. Dennoch werde ich mit MooTools trotz einiger guter Ideen einfach nicht warm. Was mich nämlich ganz grundsätzlich an dessen Ansatz stört, ist die Vorstellung, dass man JavaScript echte Objektorientierung beibringen sollte. JavaScript ist m.E. schlicht keine Sprache für klassisches OOP. Wenn man versucht, das nachzubauen, verliert man schnell den Blick für die wirklich schönen Eigenschaften, insb. das was aus der funktionalen Programmierung »ausgeliehen« wurde.

    Wieso "ausgeliehen"? JavaScript ist funktionale. Das ist ja das Problem, weil das viele nicht verstehen wollen. Closures etc. alles da.

    Der Syntax sieht prozeduralen Sprachen viel zu ähnlich und es wurde versucht mit komischen Dingen prozedurale Programmierung doch zu erlauben. Z.B. ist "new" in JavaScript absolut unbrauchbar.

  14. Peter

    24. Juli 2009, 00:37 Uhr

    Wenn du das so siehst, würde ich dir zwecks Schonung deines Blutdrucks empfehlen, die weiteren Teile dieser Serie zu überlesen.

  15. cortex

    24. Juli 2009, 05:25 Uhr

    die unterschiede zwischen mootools und jquery werden in diesem artikel sehr gut dargestellt: jqueryvsmootools.com.

    cx

  16. Tim

    24. Juli 2009, 08:27 Uhr

    "die am 19. Juni diesen Jahres erschien" muss "dieses Jahres" heißen. Häufiger Fehler.

  17. Philipp Kruse

    24. Juli 2009, 09:56 Uhr

    Zitat Axel:

    Der Syntax sieht prozeduralen Sprachen viel zu ähnlich und es wurde versucht mit komischen Dingen prozedurale Programmierung doch zu erlauben. Z.B. ist "new" in JavaScript absolut unbrauchbar.

    Grundsätzlich kann man in JS, denke ich, durchaus beides ordentlich betreiben. Auch wenn ich um »new« selbst auch gerne einen großen Bogen mache, geht es natürlich auch auf dem Weg. Ich habe nur das Gefühl, das klassische Vererbungsmuster fühlt sich in anderen Sprachen wohler und man kann mit JS viele nette Dinge anstellen, wenn man Probleme etwas anders angeht.

    …eigentlich aber auch ganz interessant, mal eine Diskussion über die richtige Verwendung einer Sprache zu lesen anstatt immer nur Diskussionen über die Verwendung der richtigen Sprache. ;)

  18. crkkk

    25. Juli 2009, 09:58 Uhr

    @e7
    @2: Ach was, hier gibt’s öfter einseitige, nicht nachvollziehbare Propaganda. Siehe HTML5.

    das ist auch ein persönlicher Blog und keien wikipedia

  19. Daniel Kirsch

    25. Juli 2009, 13:52 Uhr

    Zitat Peter:

    Zitat Philipp Kruse:

    Öhm. Javascript ist doch sogar schon von Haus aus absolut objektorientiert! Nur eben klassenlos (wobei man das auch mit nur ein paar Zeilen reparieren kann).

    Der Punkt ist aber, dass man das nicht reparieren muss. Klar - für den durchschnittlichen OOP-Programmierer ist es erst mal einfacher, wenn er sein gewohntes Klassenkonzept findet. Ich finde es aber auch irgendwie sinnfrei so zu tun, als sei Javascript etwas anderes als es ist, statt sich mal etwas mehr reinzuknien und die Sprache kennenzulernen. Javascript hat ja auch gute Seiten. (Wer einen versteckten Hinweis auf ein Javascript-Buch findet, darf ihn behalten und ihm folgen.)

  20. Peter

    25. Juli 2009, 14:09 Uhr

    Aber ist nicht gerade in diesem Buch wunderbar beschrieben, wie man sich ohne Weiteres ein pseudoklassisches System zusammenbauen kann, wenn man will? Außerdem, wo käme man denn hin, wenn man immer nur Dienst nach Vorschrift macht?

  21. Mario H.

    26. Juli 2009, 20:34 Uhr

    Ich finde es eigentlich ganz sexy, dass JS nicht 100%ig OOP ist. Vieles ist übernommen, aber gerade an den Sachen, die einen gewissen Overhead erzeugen, wurde gespart.
    Aber insgesamt finde ich Linux viel g*iler als Windows und Mac-Nutzer sind eh alle (ähm) komisch ;-)
    Bin gespannt auf die kommenden Teile.

    Btw: wäre schön gewesen, wenn du die Linux-Serie verlinkt hättest, dann müsste ich nicht suchen.
    Dem Hinweis konnte ich leider nicht folgen ;-(

  22. Kalmut

    2. Mai 2010, 00:48 Uhr

    Mootools ist gut, für manche Dinge sogar besser als JQuery.

    Leider ist die Dokumentation für Mootools nicht ausreichend, darum wird es sich auch nicht so schnell verbreiten.

    Die Javascript-Frameworks leisten fast alle Ähnliches, zu erwähnen wären da noch Dojo, Scriptaculous und Yui von Yahoo.

  23. Peter

    2. Mai 2010, 09:44 Uhr

    Was fehlt denn an der Dokumentation?

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon