MooTools: Das kompakte JavaScript-Framework

2005 veröffentlichte der Entwickler Valerio Proietti unter dem Namen Moo.fx. ein Add-on für das damals marktführende JavaScript-Framework Prototype. Da er mit den Möglichkeiten von Prototype jedoch nicht zufrieden war, entschloss er sich schon bald dazu, ein eigenes Framework zu entwickeln, das schließlich im Dezember 2006 (Version 0.87) unter der freien MIT-Lizenz und dem Namen MooTools (My Object Oriented Tools) erschien. Heute ist ein Team aus über 20 Entwicklern und Designern mit der Weiterentwicklung des JavaScript-Frameworks beschäftigt, das laut w3techs.com bei rund 3,3 Prozent (Stand: Oktober 2016) aller Webprojekte zum Einsatz kommt und damit nach den Branchenführern jQuery und Bootstrap zu den beliebtesten JavaScript-Toolsweltweit gehört.

Das MooTools-Framework ist eine kompakte und modular aufgebaute Sammlung von JavaScript-Werkzeugen für fortgeschrittene und professionelle JavaScript-Entwickler. Dank eleganter und gut dokumentierter APIs und einer starken Objektorientierung zeichnet es sich durch seine flexiblen Einsatzmöglichkeiten aus. Es stellt diverse Funktionen und Klassen zur Verfügung, die Sie als Entwickler bei der Programmierung und dem Design moderner Webprojekte unterstützen und den Arbeitsprozess erheblich vereinfachen. Dank des modularen Aufbaus ist das Framework unkompliziert erweiterbar. Darüber hinaus kann der Nutzer gezielt solche Komponenten einbinden, die er auch tatsächlich benötigt, weshalb MooTools-Anwendungen durch einen hohen Grad an Übersichtlichkeit und Kompaktheit bestechen.

Anders als gewöhnliches JavaScript (prototypenbasiert) baut MooTools auf ein klassenbasierendesVererbungssystem, das als Grundlage für objektorientierte Programmierung und damit verbunden als Basis für alle enthaltenen Komponenten des Frameworks dient. Dieses System steht nicht nur sinnbildlich für einfache Erweiterbarkeit, sondern auch für die Möglichkeit, wiederverwertbaren und flexiblen Quellcode zu schreiben. Dank vordefinierter, modifizierbarer Klassen können Sie gleichartige Objekte – Plug-ins, HTML-Elemente, Ajax-Requests etc. – außerdem mit einer enormen Zeitersparnis realisieren. Um welche Komponenten MooTools JavaScript unter anderem erweitern kann, fasst die folgende Auflistung zusammen:

• Core: MooTools Core bildet das Herzstück des JavaScript-Frameworks, auf dem alle Komponenten aufbauen. Neben der Implementierung des Klassenkonzeptes enthält Core einige allgemeine Hilfsfunktionen.

• More: MooTools More ist die offizielle Plug-in-Sammlung des Frameworks. Sie enthält diverse Erweiterungen, die den Entwicklungsprozess vereinfachen und weitere Features hinzufügen.

• Class: Bei der Komponente Class handelt es sich um die Basis-Klasse, die Sie zur Instanziierung (Erzeugung) von wiederverwendbaren Klassenobjekten und zur Modifizierung existierender Klassen benötigen.

• Element: Eine der wichtigsten Komponenten, mit deren Hilfe Sie cross-browser-kompatibel auf HTML-Element-Objekte zugreifen oder diese erzeugen können. Enthält die Dollar-Funktionen $ und $$.

• Fx: Effekte-Modul, das als Grundlage für die Animation von Elementen und somit für die Realisierung von Scrolling-, Sliding- und anderen Effekten dient.

• JSON: Modul zur Codierung und Decodierung von Zeichenketten im JSON-Format (JavaScript Object Notation).

Einige Module bauen natürlich aufeinander auf und so setzt das Modul Fx.CSS beispielsweise voraus, dass Sie auch das aufgeführte Fx-Modul installiert haben. Generell können Sie aber im Downloadbereich ganz gezielt auswählen, welche Komponenten Sie benötigen, und diese als Ihr individuell zusammengestelltes MooTools-Framework herunterladen. Zu diesem Zweck sind die einzelnen Module in den beiden größeren Sparten Core und More aufgelistet. Ebenso ist es möglich, das komplette Basispaket bzw. alle verfügbaren Erweiterungen zu downloaden.

Einen kleinen Vorgeschmack der Funktionsweise einzelner Komponenten liefern die MooTools-Beispiel-Demos des MooTools-Entwicklerteams auf aryweb.nl. Dort finden Sie nicht nur visuelle Präsentationen von Drag-and-Drop-Funktionen, Effekten und Formularen, sondern können auch einen Blick auf die dazu passenden MooTools-JavaScript-, HTML- und CSS-Codezeilen werfen.

Als Mitte der 90er-Jahre dynamische Elemente Einzug in die Projekte des World Wide Webs hielten, verlagerte sich der Ausführungsort des Quellcodes zunehmend in Richtung Client bzw. Browser. Anfangs waren Java-Applets dabei das Maß aller Dinge. Als Alternative zu diesen „Mini“-Programmen entwickelte Brendan Eich 1995 den JavaScript-Vorgänger LiveScript für den Webbrowser Netscape 2.0. Die größten Unterschiede der beiden Sprachen lagen darin, dass JavaScript Klassen durch Prototypen ersetzte und die programmierten Codezeilen nicht von dem eigentlichen HTML-Quelltext losgelöst, sondern direkt implementiert waren – Eigenschaften, an denen sich auch bis heute nichts geändert hat.

Zunächst fungierte JavaScript als Browser-Skriptsprache in erster Linie als Konkurrenz zu Java-Applets. Der wirkliche Durchbruch gelang allerdings erst im Zuge des Web 2.0 und damit verbunden der Weiterentwicklung von Webbrowsern und der DOM-Schnittstelle ab 2005. Plötzlich war es möglich, Inhalte im Hintergrund per JavaScript zu laden und die ersten dynamischen Interfaces im Browser ohne Plug-ins und die ständige Notwendigkeit der Kommunikation mit dem Webserver entstanden. Diverse JavaScript-Bibliotheken und -Frameworks entstanden und so ist JavaScript im Verlauf des vergangenen Jahrzehntes zur meistgenutzten Skriptsprache der Webentwicklung geworden. Gleichzeitig hat sich die Durchschnittswebsite immer mehr zu einer komplexen Webanwendung mit hohem Interaktivitäts-Faktor entwickelt – ein Fakt, der JavaScript und JavaScript-Frameworks wie MooTools für die Programmierung neuer Projekte noch wichtiger gemacht hat. Seit einigen Jahren ist die Skriptsprache auch serverseitig im Einsatz.

Klassische statische Websites haben heutzutage einen schweren Stand: Interaktive Elemente sind längst zu einer Selbstverständlichkeit geworden, was es umso wichtiger macht, den User mit innovativen und nutzerfreundlichen Konzepten zu beeindrucken. Dabei spielt auch die Ladegeschwindigkeit eine große Rolle, die größtenteils von der Häufigkeit abhängig ist, mit der die Webanwendung auf den Server zugreifen muss, um eingehende Browseranfragen zu bearbeiten. Ein Webprojekt-Typ, der aus diesem Grund vermehrt zum Einsatz kommt und wie geschaffen ist für ein JavaScript-Framework wie MooTools, ist die sogenannte Single-Page-Application bzw. Single-Page-Anwendung – auch bekannt als Onepager. Dabei handelt es sich um Websites, die aus einem einzigen HTML-Dokument bestehen und den kompletten Inhalt auf einer einzigen Seite darstellen. Anstelle von Unterseiten sind diese Projekte durch Sektionen und Events strukturiert, die der Besucher durch Scrollen oder per Klick auf Buttons erreicht bzw. auslöst.

Besonders beliebt ist hierbei das Storytelling, bei dem die Informationen mithilfe der interaktiven Elemente in Form einer kleinen Geschichte aufbereitet präsentiert werden. Für die Darstellung der Single-Page-Anwendung müssen nur wenige Daten mit dem Webserver ausgetauscht werden, was für eine allgemein hohe Performance sorgt. Aufgrund der breiten Unterstützung von JavaScript sind MooTools-Applikationen dabei problemlos plattform- und browserübergreifendnutzbar.

Mit JavaScript als Programmiersprache ist das MooTools-Framework in bester Gesellschaft. Zahlreiche sehr erfolgreiche Alternativen wie zum Beispiel AngularJS oder Ember.js zeigen, dass die Nachfrage nach JavaScript-Frameworks sehr groß ist. Die Skriptsprache ist ein unumstrittener Webstandard, den jeder gängige Browser unterstützt, und eignet sich hervorragend zur Realisierung interaktiver Website-Komponenten. Für jeden Webentwickler gehört die Sprache folgerichtig zum Pflichtrepertoire, auch wenn ihr standardmäßig beispielsweise ein klassenbasierendes Vererbungssystem fehlen. MooTools räumt mit dieser Problematik auf und vereinfacht dadurch die Programmierung wiederkehrender Elemente enorm.

Für den Besucher des Webprojektes scheint der Fokus auf einen clientseitig-ausführbaren Quellcode auf den ersten Blick auch ausschließlich von Vorteil zu sein: JavaScript-Elemente versprechen eine hohe Interaktivität der Webanwendung und gleichzeitig einen sehr guten Pagespeed. Dass die Aufgabe des Code-Kompilierens bei MooTools-Anwendungen hauptsächlich in den Aufgabenbereich der Clients fällt, birgt jedoch auch Probleme und Risiken. So sind die Ressourcen in besonderer Weise beansprucht, was bei leistungsschwachen Clients und Geräten schnell zu Performance-Einbußen oder gar dem Absturz der Website führen kann. Insbesondere mobile Geräte wie Smartphones, mit denen ein bedeutender Teil der User auf das World Wide Web zugreift, sind hiervon betroffen. Ferner entstehen bei diesen oftmals auch Komplikationen in Bezug auf gerätespezifische Komponenten wie Touchscreens oder die vergleichsweise kleinen Bildschirme, die nicht oder nur wenig im Vorhinein getestet werden.

Da das Ausführen von Codes immer auch das Risiko eines externen Zugriffs (Tracking, Phishing etc.) birgt, ist der Nutzer bei Webprojekten, die sich durch eine Vielzahl clientseitiger Programmierungen auszeichnen, in besonderer Weise gefährdet. Ein gewisser Teil der Internetnutzer greift aus diesem Grund zu Skriptblockern wie NoScript oder JS Blocker, die JavaScript- und andere Skripte blockieren, wenn die betreffende Website nicht manuell auf die Whitelist gesetzt wird. Es gilt also, ganz gezielt auf die Sicherheit Ihrer MooTools-Webanwendung zu achten, um die notwendige Vertrauensbasis zu schaffen und auch solche User mit Ihrem Angebot zu erreichen.

Während die Bibliothekt MooTools noch in Joomla 2.5 von Haus aus integriert war, änderte sich das für die Joomla 3.x Versionen. Statt MooTools kommt nun die Javascript-Bibliothek jQuery zum Einsatz. Wer dennoch nicht auf die MooTools in Joomla verzichten möchte, der kann über den nachfolgenden Code die Core-Bibliothek laden:

Bei der großen Auswahl an JavaScript Frameworks stellt sich unweigerlich die Frage: MooTools oder doch jQuery? Welche der beliebten Frameworks ist besser und für welche sollte man sich entscheiden? Eine klare Antwort im Vergleich MooTools vs jQuery gibt es dabei nicht. Wie so häufig lautet die Antwort auf diese Frage: „Kommt darauf an“. Ob man sich für MooTools oder für jQuery entscheidet, hängt unter anderem davon ab, was man mit dem eignen JavaScript-Code erreichen und auch wie viel Zeit man für das Erlernen des Frameworks aufwenden möchte.

Betrachtet man die reinen Fakten beim Vergleich Mootools vs. jQuery, dann beträgt die Frameworksgröße bei der minimierten jQuery Version 3.2.1 lediglich 84,6 KB und bei MooTools  Core Version 1.6.0 fast doppelt so viel mit 158 KB. Davon abgesehen verfügen beide Frameworks über nahezu dieselben Features. Sowohl Animationen, Even Handling, CSS3 Selektoren (ein Subset), Ajax und native Erweiterungen werden unterstützt. Außerdem gibt es eine Reihe von inoffiziellen Plug-Ins zu beiden Frameworks.

Beide JavaScript Frameworks schenken sich im Faktenvergleich also relativ wenig, es kommt deshalb auf die Feinheiten an. So stimmen die meisten Programmierer damit überein, dass jQuery einfacher zu lernen sei als MooTools. Während sich jQuery sehr auf das DOM (Document Object Model) fokussiert, erweitert MooTools die Funktionalität von JavaScript rein über das DOM hinaus. Damit ist jQuery im Vergleich zu MooTools etwas limitierter, dafür aber auch einfacher zu lernen. Gerade für Web-Entwickler, die sich noch nicht mit JavaScript auseinander gesetzt haben, ist damit jQuery einfacher zu verwenden. Alle anderen, die schon den sicheren Umgang mit der Programmiersprache JavaScript beherrschen, bzw. eine höhere Lernbereitschaft besitzen, können mit MooTools auf das gesamte Spektrum von JavaScript zugreifen (beispielsweise auf Vererbung - engl. inheritance)  und sind damit in der Programmierung flexibler.

MooTools baut den objektorientierten Ansatz von JavaScript aus und erweitert die beliebte Web-Skriptsprache um anpassbare und wiederverwendbare Klassen wie man sie beispielsweise aus Java oder PHP kennt. Durch die Verwendung des Frameworks steigern Sie die Effizienz bei der Programmierung von JavaScript-Anwendungen enorm. Hier liegen auch ganz klar die Stärken der Tool-Sammlung.

Die Gestaltung kompletter Applikationen auf MooTools-Basis ist möglich, wenn auch nicht unbedingt für jegliche Art von Projekt geeignet. Selbst wenn Effekte, Animationen und AJAX-Komponenten in der modernen Webentwicklung immer wichtiger werden, sollten Sie bei der Realisierung Ihres Projektes stets die Userexperience im Auge behalten. Hierfür sind MooTools und JavaScript generell hervorragende Bausteine, die es allerdings in der passenden Dosierung einzusetzen gilt – andernfalls sprengt Ihre Web-Applikation schnell die technischen Mittel der eingesetzten Nutzer-Clients.