Mootools, la librairie javascript modulaire et légère

Mon jouet du moment s’appelle mootools. C’est la suite logique de l’excellent pack d’effets moofx qui pèse à peine 3ko [1] et qui se plug sur prototype.

Quand je dis suite logique, je veux dire par là que Valerio Proietti, le créateur de moofx, ne s’est pas arrêté là et s’est mis à développer une librairie complète: mootools.

Mootools est modulaire, très légère et presque aussi puissante que prototype. Comme développer une librairie est un peu plus complexe que créer un pack d’effets, Valerio s’est entouré de nouveaux amis : Aaron Nexton [2] et Christophe Beyls.

Mootools est donc une librairie multiculturelle un peu belge, un peu italienne et un peu américaine. Mais ça à la limite on s’en fout. Le vrai truc exceptionnel c’est qu’elle ne pèse que 80 ko (24ko pour la version compactée) tout compris – là où le couple scriptaculous / prototype atteint les 200 ko (150ko pour la version compactée) [3]. Franchement je ne sais pas commet Aaron Christophe et Valerio Proietti ont réussi à faire ça mais je les en remercie.

Après avoir un peu manipulé la lbrairie, il s’avère qu’elle a les même fonctionnalités que prototype (manipulation du dom, fonctions $ et $$, implémentation d’ajax, gestion simplifiée des cookies en standard – ce qui n’est pas le cas de prototype…) et surtout elle dispose d’un atout exceptionnel: domReady.

En webdesign moderne,on s’efforce de séparer le contenu (html), la présentation (css) et les comportements (javascript). En clair cela signifie qu’on ne met plus de chose du genre

<a href="#" onclick="mafonction(mesparmaetres);">Lancer le script</a>

A la place, on charge un script dans l’entête du document (head) qui, va chercher le lien dans le dom et lui ajoute sur l’événement « click » mafonction. Et pour déclencher la fonction d’initialisation sans action de la part de l’utilisateur, on exécute le code au chargement du document (événement onload).

Avec mootools ça donne :

function initFooter() {
//vars
myLink = $('#myLink');
// add behaviour
myLink.addEvent('click', toggleFooter);
}
function toggleFooter(e) {
do some stuffs here;}
window.addEvent('domready', initFooter);

Le problème c’est que avec l’évènement ‘onload’, vous devez attendre que tout le document soit chargé, éléments externes compris (images, css, scripts). Parfois ça pose problème surtout dans le cas d’une page qui appelle beaucoup d’images. C’est là qu’intervient mootools et son événement spécial domReady.

Lorsqu’on appelle un script sur l’événement domReady de l’objet window, on n’a plus besoin d’attendre le chargement des dépendances du fichier html. Comme son nom l’indique, une fonction appelée sur l’événement domReady s’éxécute lorsque le DOM est prêt – en gros, lorsque le html est chargé. Ça fait une grosse différence.

En conclusion, après avoir testé Prototype, YUI et mootools, mon choix se porte définitivement sur mootools, pour sa modularité, sa légèreté et son implémentation de l’événement domReady.

Quelques ressources sur mootools dans mon delicious au tag mootools.

  1. Ce qui change de scriptaculous et de ses 132ko – même si on peut appeler scriptaculous par modules
  2. Oh ! Un collègue ! Il travaille chez CNET Networks.
  3. Oui je sais, la recherche de scripts légers tourne un peu à l’obsession chez moi…

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Ce qui est bien c’est que dès que je commence à me poser pour potasser un truc sur prototype, je lis un truc sur jQuery, et dès que je me mets à jQuery, je cherche des infos sur mootools et dès que j’ai commencé à taper 2 ou 3 truc avec mootools… 😉

    Bon, maintenant faudrait que je me mette à produire quelque chose d’utile avec tout ça :p

  2. En ce moment c’est un peu dur de choisir une librairie.

    Après avoir testé les trois cité dans ce billet (ainsi que la yahoolib) j’élimine d’entrée Protrotype…

    Trop lourde et d’une prise en main rebutante, elle ne convient vraiment pas à mes exigences.

    Mootools et jQuery sont pour moi relativement similaire mais j’ai une préférence pour jQuery est son écriture chainé très intuitive.

    Mais bon mootools risque de s’y mettre (si ce n’est pas déjà fait depuis mes essais)

    En tout cas si on prend les exemples d’utilisation de mootools, n’importe quel utilisateur de jQuery remarquera qu’il est possible de réaliser exactement la même chose avec un code presque identique (les noms de méthodes change mais ça en reste là ^^)

    ————————–

    domReady à son équivalent avec

    $(document).ready(function() {…});

    méthode que l’on peux appeler N fois ajoutant ainsi autant de traitement à effectuer au moment ou le document sera enfin disponible

    myLink = $(‘#myLink’);
    myLink.addEvent(‘click’, toggleFooter);

    Deviendrait

    $(‘#myLink’).bind(‘click’,toogleFooter);

  3. Oui JQuery est intéressante aussi, mais un moment il faut faire un choix ! Moi j’ai choisi mootools :

    – parce que j’avais utilisé mooFx auparavant et j’avais été impressionné par la légèreté du code;
    – parce que là où je travaille c’est officieusement la librairie officielle;
    – parce que John Resig (un des concepteur de JQuery) joue à « c’est qui qu’a la meilleure » avec Jack Slocum(concepteur de DOM Query) par blog interposé et que ça ne dénote pas d’un état d’esprit très intelligent surtout quand on crée et maintient une librairie open source utilisée par plusieurs milliers (?) de développeurs.

    Sinon, oui, JQuery est très élégante.

  4. Je suis lecteur régulier du blog depuis pas trés longtemps, mais pas informaticien.

    Mais là, je dois dire que même si j’ai rien compris, mais que j’ai appris plein de trucs…

  5. Je comprend tout à fait ton choix et concernant l’attitude de John Resig, elle est parfois effectivement déplorable.

    En tout cas ça m’a permis de me replonger dans Mootools et j’y ai trouvé pas mal de chose vraiment agréable à utiliser dans la gestion des effets.

    jQuery à encore pas mal de progrès à faire pour atteindre une propreté de comportement similaire.

    Mais je vais rester sur jQuery ^^ question d’habitude (surtout sur le coté Ajax).

    PS : Félicitation pour ton blog qui propose de très bons articles.

  6. Merci !

  7. Tu vois, moi j’ai écrit UN javascript dans ma vie pour moin blog et en effet, ton truc Domready ce serai pas mal de l’utiliser.

    Mais je fais comment pouir remplacer mon onload par un domready? Je dois installer la librairie quelque part, non?

  8. Oui. Tu dois installer une librairie qui gère l’évènement « ondomready ». A ma connaissance mootools et jquery le gèrent. Tu dois donc installer l’une de ces 2 librairies sur ton blog.

    Maintenant si c’est pour UN javascript, installer 25ko de librairie, ça ne vaut pas vraiment le coup. Autant tout écrire soi-même.

  9. ah… Ouais, surtout que je ne peux rien installer sur mon blog. Le fichier est sur un autre serveur.

    Je verrai cet été pendant les vacances pour refaire ce truc qui s’affiche pendant une seconde avant de disparaitre.

  10. Dites moi, est-ce qu’il est possible de modifier des styles uniquement pour le media screen ?
    Je m’explique, je suis en train de mettre en place la moodalbox sur un site… J’ai rajoute un bouton d’impression et c’est la que le bas blaisse.
    Meme avec une feuille de style dédié au print, et ben mon div est toujours centré avec une marge négative, donc on en voit la moitié à l’impression.
    Bref, la moodalbox fait du redimensionnement qui prend le dessus au moment de l’impression sur ma feuille de style print qui pourtant enleve toutes les marges, mets une largeur à 100%, etc… Le probleme n’est pas présent sur les autres styles que des styles de taille.
    Si quelqu’un a une solution, je suis preneur !
    Merci !

  11. Après analyse le problème est le suivant :
    Comment faire du style inline pour un media précis ?

    La moodalbox crée des divs avec du style inline pour centrer la div. Donc l’application d’une feuille de style spécifique au media print ne prend pas le dessus sur le style inline.
    Il me faut donc trouver le moyen de spécifier du style inline réservéau media screen.

    En espérant avoir été plus clair que la première fois 🙂

  12. Vu que personne me répond, je vais m’auto-répondre 🙂
    Ben oui, car à force de chercher j’ai enfin la solution qui était pas si compliquée que ça.
    Au lieu de torturer dans tous les sens l’objet moodalbox, j’aurais du lire ce très bon article.
    Il suffisait juste de rendre prioritaire ma feuille de style dédié au media print. Et pour cela quoi de plus simple qu’un petit !important à la fin des propriétés concernées…
    Voila, je suis content, merci moi ! 🙂
    Et désolé pour le monologue…

  13. De toute façon, j’ai rien compris au problème de départ 😉

  14. Salut 🙂
    juste pour signaler , YUI supporte aussi onDOMReady :
    YAHOO.util.Event.onDOMReady(init);

  15. Kedare >> c’est vrai et YUI est aussi une excellente librairie. Un peu trop verbeuse à mon goût : rajouter systématiquement les Yahoo.nomdelalib devant le nomdelobjet.methode(parametre), c’est un peu long… Dustin Diaz a fait de trés bons tutos pour pallier ce pb et de trés bons tutos sur YUI en général.

  16. j’utilise toutes les trois librairies suivants le besoin. comme je developpe joomla et que mootools est le framework intégré, du coup je suis contraint de l’utiliser (il cause un conflit avec prototype),

    par contre j’aime bien jQuery, vu qu’il utilise les espaces de noms, il ne pose aucun conflit avec les autre librairies

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *