Blog tech

Introduction à MooTools

Rédigé par Nicolas Cavigneaux | 3 novembre 2011

MooTools, qu’est ce que c’est ?

MooTools est un framework JavaScript, léger et orienté-objet. Il est particulièrement adapté à l’élaboration d’applications Web.

Il vous permet d’écrire facilement du code robuste et flexible de manière portable (cross-browser). Son code est élégant et bien documenté autour d’une API cohérente.

En utilisant MooTools, vous aurez la possibilité de :

  • créer des classes
  • écrire du code en étant sûr que les objets natifs se comporte partout de la même manière
  • avoir des objets natifs incluants toutes les fonctions qui font cruellement défaut au javascript natif
  • gérer facilement les événements
  • manipuler le DOM et ses objets
  • rechercher des éléments grâce à un moteur de sélecteurs CSS3 ultra-rapide
  • faire de l’AJAX
  • gérer les cookies
  • ajouter des effets de transition

À côté de cela, MooTools More propose des extensions à ce framework de base en lui permettant de s’enrichir à l’aide de :

  • pseudo-événements
  • gestion simplifiée des dates
  • gestion des URI
  • raccourcis clavier
  • nouveaux effets
  • gestion des assets
  • gestion des locales

Pour finir, une communauté très active enrichie l’éco-système de MooTools via des plugins proposés sur la forge.

MooTools respecte de manière stricte les standards et n’affichera donc aucun warning. La clarté de son API assure que vous n’aurez aucun mal à vous y mettre et vous y prendrez certainement plaisir !

Pourquoi utiliser MooTools ?

Compatibilité

MooTools grâce à son modèle de sur-charge des prototypes (entre autre) permet d’assurer un maximum de compatibilité à travers les navigateurs. Voici ceux pour lesquels MooTools est testé :

  • Safari 3+
  • Internet Explorer 6+
  • Mozilla Firefox 2+
  • Opera 9+
  • Chrome 4+

Bénéfices

Utiliser MooTools fournit un certain nombre d’avantage par rapport au JavaScript natif :

  • utilisation des notions objet (classes, instances et héritage)
  • facilite le DRY
  • extensible et modulaire
  • effets de transitions facile à mettre en place
  • amélioration du DOM pour faciliter la manipulation des éléments
  • sélecteurs CSS3 pour les manipulations CSS
  • possibilité de stocker et récupérer des informations directement dans les éléments

Sa documentation claire et son API cohérente vous permettront de prendre rapidement le framework en main et vous y prendrez vite goût.

MooTools est également un très bon compagnon pour CoffeScript.

Modularité

MooTools a été pensé pour être le plus modulaire possible. Premier bénéfice, en tant que développeur, il vous est possible de construire votre release de MooTools pour n’inclure que les modules dont vous avez besoin. Pratique pour alléger votre JS quand vous n’avez besoin que des sélecteurs CSS3 par exemple.

La construction de votre librairie se fait via le Builder qui existe aussi pour MooTools More.

Au delà de ça, la philosophie de MooTools est de prendre avantage de la flexibilité et de la puissance de JavaScript pour en accroître la modularité et les possibilités de ré-utilisation. La façon dont cette philosophie est mise en place en pratique permet aux développeurs de se sentir de suite à l’aise avec le framework. Tout semble naturel (pour le peu qu’on souhaite et aime programmer en objet) grâce à l’inclusion du principe des classes.

Les classes sont très simples à mettre en œuvre bien qu’elles soient très puissantes. On peut faire de l’héritage, des mixins, étendre une instance …. On se met donc très vite à utiliser toute la puissance du système d’héritage par prototype propre à javascript via les classes MooTools biens plus amusante et simples à utiliser.

Aspect objet

MooTools fournit tout le nécessaire pour construire et utiliser des classes, voici un exemple :

var Animal = new Class({
    initialize: function(name) {
        this.name = name;
    }
});

var Cat = new Class({
    Extends: Animal,

    talk: function() {
        return 'Miaou';
    }

});

var Dog = new Class({
    Extends: Animal,

    talk: function() {
        return 'Woof ! Woof !';
    }

});

var animals = {
    a: new Cat('Neige'),
    b: new Cat('Le chat'),
    c: new Dog('Ruby')
};

animals.each(function(animal) {
    console.log(animal.name + ': ' + animal.talk());
});

Les ajouts de MooTools

Il serait bien trop long de vous décrire ici chaque ajout apporté par MooTools mais je vous conseille vivement de jeter un œil aux liens suivant pour en découvrir les choses qui me semblent les plus utiles :

MooTools vs jQuery

L’un n’est pas meilleur que l’autre, n’allez pas vous y tromper. Les 2 frameworks n’ont pas la même philosophie et c’est donc votre style de programmation qui vous fera penchez d’un côté. Je trouve que jQuery est particulièrement bien adapté au développement rapide qui n’est pas voué à la ré-utilisation. Si vous avez par contre plus de temps à consacrer à votre code et que vous souhaitez l’organiser, le modulariser et le partager, il y a alors de fortes chances pour que vous préféreriez MooTools.

Il faut également noter que, bien que très active, la communauté MooTools est bien plus petite que la communauté jQuery. Vous trouverez sûrement moins de ressources, de blogs et devrez parfois plus vous impliquer pour solutionner vos problèmes. Il n’en reste pas moins que la mailing list sera utile pour vous dépanner et que les articles que vous trouverez seront souvent de qualité.

Je vous recommande cette lecture qui compare les possibilités des deux frameworks à travers des exemples de code.

Au final, les possibilités sont les mêmes mais vous n’écrierez pas votre code de la même façon avec l’un et l’autre. Mais après tout, tout est question de style non ? Et en ce qui concerne le style, je préfère MooTools !

MooTools a une approche objet alors que jQuery, lui, préfère l’approche fonctionnelle.

Conclusion

Nous avons donc vu avec cette rapide introduction à MooTools, que ce framework est une vraie alternative à jQuery et Prototype. Le seul moyen de se faire une idée est d’essayer. Prenez le pour un petit projet et voyez vos affinités avec l’API. Tout le monde n’adhérera pas, certains me diront «jQuery fait le même» mais en matière de programmation il faut se sentir à l’aise et prendre du plaisir.

L’équipe Synbioz.

Libres d’être ensemble.