Dans mes projets, j’utilise principalement Mootools en tant que framework JavaScript. Je me sens vraiment à l’aise avec celui-ci par rapport aux autres framework (ex: JQuery).

Pour le premier article, il sera question de la modularité de Mootools. Mais avant tout, je vais faire une courte présentation.

Présentation de Mootools

Comme écrit précédemment, Mootools est un framework permettant de coder en JavaScript sans se soucier des problèmes récurrents de la compatibilité entre les différents navigateurs. En outre, il ajoute des fonctionnalités afin de gérer des animations, effectuer des requêtes XmlHttpRequest, parcourir le DOM, et bien plus encore. Tout cela avec simplicité.

Bien entendu, dans un projet, nous n’avons pas systématiquement besoin de toutes les fonctionnalités fournies par le framework. Grâce à sa conception modulaire, il est possible de ne télécharger que le stricte minimum de code. C’est le sujet de cet article.

Téléchargement modulaire

Il y a deux parties distincts du framework à connaître. La partie « Core » et la partie « More« .

Mootools Core comporte les composants de base du framework. Mootools More fait référence aux plugins officiels du framework.

Un « Builder » est disponible pour chacune de ces parties. Ce « builder » permet de fabriquer votre propre fichier JS du framework. En effet, la version complète de Mootools Core fait environ 80ko (version compressée). Il peut alors être intéressant de réduire cette taille en ne sélectionnant que les composants nécessaires dans votre projet.

Pour commencer, aller sur la page de Mootools Core Builder. Sur celle-ci, vous verrez les différents composants du framework dans un tableau. Vous choisissez ici les différents composants nécessaires à votre projet.

Vous pourrez remarquer que le « Builder » gère très bien les dépendances entre les différents composants. Ainsi, si vous cochez « Event », vous aurez 7 autres composants sélectionnés automatiquement. En outre, les composants inutiles sont automatiquement décochés. Par exemple, si vous décochez « Event », les 7 autres composants seront décochés. Les composants sélectionnés manuellement reste cochés.

C’est donc vraiment flexible.

Maintenant que vous avez sélectionné vos composants, vous pouvez télécharger le fichier en bas de la page. La version non compressée est idéale pour le développement. Au contraire, en production, il sera préférable d’utiliser la version compressée.

Deux mois après …

Un problème que je rencontrais était l’intégration d’un nouveau composant aux framework dans un projet. Si je n’avais pas besoin d’un composant et que par la suite il était devenu nécessaire, il fallait retrouver les bons composants du fichier téléchargé précédemment. Et à moins d’avoir une très bonne tête, ou d’avoir noté quelque part la liste des composants utilisés, il y avait un fort risque d’oubli.

Depuis la version 1.3 (me semble t-il), il est possible de charger la liste des composants grâce à une chaîne de caractères appelée « Hash ». Elle est disponible en ouvrant votre fichier JavaScript en haut du fichier.

Par exemple, en cochant « Event » sans la compatibilité 1.2, j’obtiens cette entête dans le fichier :

/*
---
MooTools: the javascript framework

web build:
 - http://mootools.net/core/e04e7bec24881285f2ba11f3116f89f0

packager build:
 - packager build Core/Event

/*
---

name: Core

description: The heart of MooTools.

license: MIT-style license.

copyright: Copyright (c) 2006-2010 [Valerio Proietti](http://mad4milk.net/).

authors: The MooTools production team (http://mootools.net/developers/)

inspiration:
  - Class implementation inspired by [Base.js](http://dean.edwards.name/weblog/2006/03/base/) Copyright (c) 2006 Dean Edwards, [GNU Lesser General Public License](http://opensource.org/licenses/lgpl-license.php)
  - Some functionality inspired by [Prototype.js](http://prototypejs.org) Copyright (c) 2005-2007 Sam Stephenson, [MIT License](http://opensource.org/licenses/mit-license.php)

provides: [Core, MooTools, Type, typeOf, instanceOf, Native]

...
*/

Le Hash est : e04e7bec24881285f2ba11f3116f89f0
Pour le charger, vous pouvez utiliser l’adresse fournie :
http://mootools.net/core/e04e7bec24881285f2ba11f3116f89f0

Vous pouvez aussi copier/coller ce Hash dans le champ en haut de la page « Builder ».

Tous les composants du fichier seront cochés automatiquement. Il ne vous reste plus qu’à ajouter ou enlever des composants et de télécharger le nouveau fichier.

La même chose est possible avec Mootools More Builder.

Conclusion

C’est un plaisir à utiliser. La modularité est vraiment complète. La possibilité de recharger les composants précédemment sélectionnés est la fonctionnalité ultime qui me manquait.