MooTools: Das kompakte Ja­va­Script-Framework

2005 ver­öf­fent­lich­te der Ent­wick­ler Valerio Proietti unter dem Namen Moo.fx. ein Add-on für das damals markt­füh­ren­de Ja­va­Script-Framework Prototype. Da er mit den Mög­lich­kei­ten von Prototype jedoch nicht zufrieden war, ent­schloss er sich schon bald dazu, ein eigenes Framework zu ent­wi­ckeln, 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 Ent­wick­lern und Designern mit der Wei­ter­ent­wick­lung des Ja­va­Script-Frame­works be­schäf­tigt, das laut w3techs.com bei rund 3,3 Prozent (Stand: Oktober 2016) aller Web­pro­jek­te zum Einsatz kommt und damit nach den Bran­chen­füh­rern jQuery und Bootstrap zu den be­lieb­tes­ten Ja­va­Script-Tools weltweit gehört.

Das MooTools-Framework ist eine kompakte und modular auf­ge­bau­te Sammlung von Ja­va­Script-Werk­zeu­gen für fort­ge­schrit­te­ne und pro­fes­sio­nel­le Ja­va­Script-Ent­wick­ler. Dank eleganter und gut do­ku­men­tier­ter APIs und einer starken Ob­jekt­ori­en­tie­rung zeichnet es sich durch seine flexiblen Ein­satz­mög­lich­kei­ten aus. Es stellt diverse Funk­tio­nen und Klassen zur Verfügung, die Sie als Ent­wick­ler bei der Pro­gram­mie­rung und dem Design moderner Web­pro­jek­te un­ter­stüt­zen und den Ar­beits­pro­zess erheblich ver­ein­fa­chen. Dank des modularen Aufbaus ist das Framework un­kom­pli­ziert er­wei­ter­bar. Darüber hinaus kann der Nutzer gezielt solche Kom­po­nen­ten einbinden, die er auch tat­säch­lich benötigt, weshalb MooTools-An­wen­dun­gen durch einen hohen Grad an Über­sicht­lich­keit und Kom­pakt­heit bestechen.

Anders als ge­wöhn­li­ches Ja­va­Script (pro­to­ty­pen­ba­siert) baut MooTools auf ein klas­sen­ba­sie­ren­des Ver­er­bungs­sys­tem, das als Grundlage für ob­jekt­ori­en­tier­te Pro­gram­mie­rung und damit verbunden als Basis für alle ent­hal­te­nen Kom­po­nen­ten des Frame­works dient. Dieses System steht nicht nur sinn­bild­lich für einfache Er­wei­ter­bar­keit, sondern auch für die Mög­lich­keit, wie­der­ver­wert­ba­ren und flexiblen Quellcode zu schreiben. Dank vor­de­fi­nier­ter, mo­di­fi­zier­ba­rer Klassen können Sie gleich­ar­ti­ge Objekte – Plug-ins, HTML-Elemente, Ajax-Requests etc. – außerdem mit einer enormen Zeit­er­spar­nis rea­li­sie­ren. Um welche Kom­po­nen­ten MooTools Ja­va­Script unter anderem erweitern kann, fasst die folgende Auf­lis­tung zusammen:

• Core: MooTools Core bildet das Herzstück des Ja­va­Script-Frame­works, auf dem alle Kom­po­nen­ten aufbauen. Neben der Im­ple­men­tie­rung des Klas­sen­kon­zep­tes enthält Core einige all­ge­mei­ne Hilfs­funk­tio­nen.

• More: MooTools More ist die of­fi­zi­el­le Plug-in-Sammlung des Frame­works. Sie enthält diverse Er­wei­te­run­gen, die den Ent­wick­lungs­pro­zess ver­ein­fa­chen und weitere Features hin­zu­fü­gen.

• Class: Bei der Kom­po­nen­te Class handelt es sich um die Basis-Klasse, die Sie zur In­stan­zi­ie­rung (Erzeugung) von wie­der­ver­wend­ba­ren Klas­sen­ob­jek­ten und zur Mo­di­fi­zie­rung exis­tie­ren­der Klassen benötigen.

• Element: Eine der wich­tigs­ten Kom­po­nen­ten, mit deren Hilfe Sie cross-browser-kom­pa­ti­bel auf HTML-Element-Objekte zugreifen oder diese erzeugen können. Enthält die Dollar-Funk­tio­nen $ und $$.

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

• JSON: Modul zur Codierung und De­co­die­rung von Zei­chen­ket­ten im JSON-Format (JavaScript Object Notation).

Einige Module bauen natürlich auf­ein­an­der auf und so setzt das Modul Fx.CSS bei­spiels­wei­se voraus, dass Sie auch das auf­ge­führ­te Fx-Modul in­stal­liert haben. Generell können Sie aber im Down­load­be­reich ganz gezielt auswählen, welche Kom­po­nen­ten Sie benötigen, und diese als Ihr in­di­vi­du­ell zu­sam­men­ge­stell­tes MooTools-Framework her­un­ter­la­den. Zu diesem Zweck sind die einzelnen Module in den beiden größeren Sparten Core und More auf­ge­lis­tet. Ebenso ist es möglich, das komplette Ba­sis­pa­ket bzw. alle ver­füg­ba­ren Er­wei­te­run­gen zu down­loa­den.

Als Mitte der 90er-Jahre dy­na­mi­sche Elemente Einzug in die Projekte des World Wide Webs hielten, ver­la­ger­te sich der Aus­füh­rungs­ort des Quell­codes zunehmend in Richtung Client bzw. Browser. Anfangs waren Java-Applets dabei das Maß aller Dinge. Als Al­ter­na­ti­ve zu diesen „Mini“-Pro­gram­men ent­wi­ckel­te Brendan Eich 1995 den Ja­va­Script-Vorgänger Live­Script für den Web­brow­ser Netscape 2.0. Die größten Un­ter­schie­de der beiden Sprachen lagen darin, dass Ja­va­Script Klassen durch Pro­to­ty­pen ersetzte und die pro­gram­mier­ten Code­zei­len nicht von dem ei­gent­li­chen HTML-Quelltext losgelöst, sondern direkt im­ple­men­tiert waren – Ei­gen­schaf­ten, an denen sich auch bis heute nichts geändert hat.

Zunächst fungierte Ja­va­Script als Browser-Skript­spra­che in erster Linie als Kon­kur­renz zu Java-Applets. Der wirkliche Durch­bruch gelang al­ler­dings erst im Zuge des Web 2.0 und damit verbunden der Wei­ter­ent­wick­lung von Web­brow­sern und der DOM-Schnitt­stel­le ab 2005. Plötzlich war es möglich, Inhalte im Hin­ter­grund per Ja­va­Script zu laden und die ersten dy­na­mi­schen In­ter­faces im Browser ohne Plug-ins und die ständige Not­wen­dig­keit der Kom­mu­ni­ka­ti­on mit dem Webserver ent­stan­den. Diverse Ja­va­Script-Bi­blio­the­ken und -Frame­works ent­stan­den und so ist Ja­va­Script im Verlauf des ver­gan­ge­nen Jahr­zehn­tes zur meist­ge­nutz­ten Skript­spra­che der Web­ent­wick­lung geworden. Gleich­zei­tig hat sich die Durch­schnitts­web­site immer mehr zu einer komplexen Web­an­wen­dung mit hohem In­ter­ak­ti­vi­täts-Faktor ent­wi­ckelt – ein Fakt, der Ja­va­Script und Ja­va­Script-Frame­works wie MooTools für die Pro­gram­mie­rung neuer Projekte noch wichtiger gemacht hat. Seit einigen Jahren ist die Skript­spra­che auch ser­ver­sei­tig im Einsatz.

Klas­si­sche statische Websites haben heut­zu­ta­ge einen schweren Stand: In­ter­ak­ti­ve Elemente sind längst zu einer Selbst­ver­ständ­lich­keit geworden, was es umso wichtiger macht, den User mit in­no­va­ti­ven und nut­zer­freund­li­chen Konzepten zu be­ein­dru­cken. Dabei spielt auch die La­de­ge­schwin­dig­keit eine große Rolle, die größ­ten­teils von der Häu­fig­keit abhängig ist, mit der die Web­an­wen­dung auf den Server zugreifen muss, um ein­ge­hen­de Brow­ser­an­fra­gen zu be­ar­bei­ten. Ein Web­pro­jekt-Typ, der aus diesem Grund vermehrt zum Einsatz kommt und wie ge­schaf­fen ist für ein Ja­va­Script-Framework wie MooTools, ist die so­ge­nann­te Single-Page-Ap­pli­ca­ti­on bzw. Single-Page-Anwendung – auch bekannt als Onepager. Dabei handelt es sich um Websites, die aus einem einzigen HTML-Dokument bestehen und den kom­plet­ten Inhalt auf einer einzigen Seite dar­stel­len. Anstelle von Un­ter­sei­ten sind diese Projekte durch Sektionen und Events struk­tu­riert, die der Besucher durch Scrollen oder per Klick auf Buttons erreicht bzw. auslöst.

Besonders beliebt ist hierbei das Sto­rytel­ling, bei dem die In­for­ma­tio­nen mithilfe der in­ter­ak­ti­ven Elemente in Form einer kleinen Ge­schich­te auf­be­rei­tet prä­sen­tiert werden. Für die Dar­stel­lung der Single-Page-Anwendung müssen nur wenige Daten mit dem Webserver aus­ge­tauscht werden, was für eine allgemein hohe Per­for­mance sorgt. Aufgrund der breiten Un­ter­stüt­zung von Ja­va­Script sind MooTools-Ap­pli­ka­tio­nen dabei pro­blem­los plattform- und brow­se­r­ü­ber­grei­fend nutzbar.

Mit Ja­va­Script als Pro­gram­mier­spra­che ist das MooTools-Framework in bester Ge­sell­schaft. Zahl­rei­che sehr er­folg­rei­che Al­ter­na­ti­ven wie zum Beispiel AngularJS oder Ember.js zeigen, dass die Nachfrage nach Ja­va­Script-Frame­works sehr groß ist. Die Skript­spra­che ist ein un­um­strit­te­ner Web­stan­dard, den jeder gängige Browser un­ter­stützt, und eignet sich her­vor­ra­gend zur Rea­li­sie­rung in­ter­ak­ti­ver Website-Kom­po­nen­ten. Für jeden Web­ent­wick­ler gehört die Sprache fol­ge­rich­tig zum Pflicht­re­per­toire, auch wenn ihr stan­dard­mä­ßig bei­spiels­wei­se ein klas­sen­ba­sie­ren­des Ver­er­bungs­sys­tem fehlen. MooTools räumt mit dieser Pro­ble­ma­tik auf und ver­ein­facht dadurch die Pro­gram­mie­rung wie­der­keh­ren­der Elemente enorm.

Für den Besucher des Web­pro­jek­tes scheint der Fokus auf einen cli­ent­sei­tig-aus­führ­ba­ren Quellcode auf den ersten Blick auch aus­schließ­lich von Vorteil zu sein: Ja­va­Script-Elemente ver­spre­chen eine hohe In­ter­ak­ti­vi­tät der Web­an­wen­dung und gleich­zei­tig einen sehr guten Pagespeed. Dass die Aufgabe des Code-Kom­pi­lie­rens bei MooTools-An­wen­dun­gen haupt­säch­lich in den Auf­ga­ben­be­reich der Clients fällt, birgt jedoch auch Probleme und Risiken. So sind die Res­sour­cen in be­son­de­rer Weise be­an­sprucht, was bei leis­tungs­schwa­chen Clients und Geräten schnell zu Per­for­mance-Einbußen oder gar dem Absturz der Website führen kann. Ins­be­son­de­re mobile Geräte wie Smart­phones, mit denen ein be­deu­ten­der Teil der User auf das World Wide Web zugreift, sind hiervon betroffen. Ferner entstehen bei diesen oftmals auch Kom­pli­ka­tio­nen in Bezug auf ge­rä­te­spe­zi­fi­sche Kom­po­nen­ten wie Touch­screens oder die ver­gleichs­wei­se kleinen Bild­schir­me, 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 Web­pro­jek­ten, die sich durch eine Vielzahl cli­ent­sei­ti­ger Pro­gram­mie­run­gen aus­zeich­nen, in be­son­de­rer Weise gefährdet. Ein gewisser Teil der In­ter­net­nut­zer greift aus diesem Grund zu Skript­blo­ckern wie NoScript oder JS Blocker, die Ja­va­Script- und andere Skripte blo­ckie­ren, wenn die be­tref­fen­de Website nicht manuell auf die Whitelist gesetzt wird. Es gilt also, ganz gezielt auf die Si­cher­heit Ihrer MooTools-Web­an­wen­dung zu achten, um die not­wen­di­ge Ver­trau­ens­ba­sis zu schaffen und auch solche User mit Ihrem Angebot zu erreichen.

Während die Bi­blio­thekt MooTools noch in Joomla 2.5 von Haus aus in­te­griert war, änderte sich das für die Joomla 3.x Versionen. Statt MooTools kommt nun die Ja­va­script-Bi­blio­thek jQuery zum Einsatz. Wer dennoch nicht auf die MooTools in Joomla ver­zich­ten möchte, der kann über den nach­fol­gen­den Code die Core-Bi­blio­thek laden:

Bei der großen Auswahl an Ja­va­Script Frame­works stellt sich un­wei­ger­lich die Frage: MooTools oder doch jQuery? Welche der beliebten Frame­works ist besser und für welche sollte man sich ent­schei­den? 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 ent­schei­det, hängt unter anderem davon ab, was man mit dem eignen Ja­va­Script-Code erreichen und auch wie viel Zeit man für das Erlernen des Frame­works aufwenden möchte.

Be­trach­tet man die reinen Fakten beim Vergleich Mootools vs. jQuery, dann beträgt die Frame­works­grö­ße bei der mi­ni­mier­ten 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 Frame­works über nahezu dieselben Features. Sowohl Ani­ma­tio­nen, Even Handling, CSS3 Se­lek­to­ren (ein Subset), Ajax und native Er­wei­te­run­gen werden un­ter­stützt. Außerdem gibt es eine Reihe von in­of­fi­zi­el­len Plug-Ins zu beiden Frame­works.

Beide Ja­va­Script Frame­works schenken sich im Fak­ten­ver­gleich also relativ wenig, es kommt deshalb auf die Fein­hei­ten an. So stimmen die meisten Pro­gram­mie­rer damit überein, dass jQuery einfacher zu lernen sei als MooTools. Während sich jQuery sehr auf das DOM (Document Object Model) fo­kus­siert, erweitert MooTools die Funk­tio­na­li­tät von Ja­va­Script rein über das DOM hinaus. Damit ist jQuery im Vergleich zu MooTools etwas li­mi­tier­ter, dafür aber auch einfacher zu lernen. Gerade für Web-Ent­wick­ler, die sich noch nicht mit Ja­va­Script aus­ein­an­der gesetzt haben, ist damit jQuery einfacher zu verwenden. Alle anderen, die schon den sicheren Umgang mit der Pro­gram­mier­spra­che Ja­va­Script be­herr­schen, bzw. eine höhere Lern­be­reit­schaft besitzen, können mit MooTools auf das gesamte Spektrum von Ja­va­Script zugreifen (bei­spiels­wei­se auf Vererbung - engl. in­he­ri­tance)  und sind damit in der Pro­gram­mie­rung flexibler.

MooTools baut den ob­jekt­ori­en­tier­ten Ansatz von Ja­va­Script aus und erweitert die beliebte Web-Skript­spra­che um an­pass­ba­re und wie­der­ver­wend­ba­re Klassen wie man sie bei­spiels­wei­se aus Java oder PHP kennt. Durch die Ver­wen­dung des Frame­works steigern Sie die Effizienz bei der Pro­gram­mie­rung von Ja­va­Script-An­wen­dun­gen enorm. Hier liegen auch ganz klar die Stärken der Tool-Sammlung.

Die Ge­stal­tung kom­plet­ter Ap­pli­ka­tio­nen auf MooTools-Basis ist möglich, wenn auch nicht unbedingt für jegliche Art von Projekt geeignet. Selbst wenn Effekte, Ani­ma­tio­nen und AJAX-Kom­po­nen­ten in der modernen Web­ent­wick­lung immer wichtiger werden, sollten Sie bei der Rea­li­sie­rung Ihres Projektes stets die User­ex­pe­ri­ence im Auge behalten. Hierfür sind MooTools und Ja­va­Script generell her­vor­ra­gen­de Bausteine, die es al­ler­dings in der passenden Dosierung ein­zu­set­zen gilt – an­dern­falls sprengt Ihre Web-Ap­pli­ka­ti­on schnell die tech­ni­schen Mittel der ein­ge­setz­ten Nutzer-Clients.