Je suis en proie à Jquery depuis quelques semaines que je dois utiliser sur quelques projets. Si vous m’avez suivit sur ce blog, je m’étais penché sur Mootools et nous avons même intégré ce framework dans Copix. Après pas mal de tests et de discussions, j’ai put me faire une idée assez gobale sur ces deux frameworks javascript et j’ai bien envie de vous en parler. Je vous préviens, //c’est un coup de gueule…//

Le cheval de bataille de JQuery est la vitesse. Effectivement, JQuery semble fonctionner plus rapidement que Mootools et ce quelque soit le navigateur utilisé. Cela se joue au milisecondes mais cela peut effectivement être votre critère de choix. Sauf que voilà… si une technologie devait être choisie seulement sur ce critère on pourrait purement et simplement bannir Python, PHP, Bash etc… et tout se faire en assembleur.

La différence de temps d’exécution est d’autant plus presque insignifiante pour la plupart des projets. Dans la quasi totalité des cas que j’ai vu, la différence n’est pas du tout visible. Il fau donc aller un peu plus loin pour faire un choix de framework javascript.

J’ai donc décidé de faire un point sur des exemples standards que nous utilisons beaucoup dans des projets. En l’occurrence je vais porter mes opinions sur: -les selecteurs et modificateurs d’élément -un appel Ajax -une animation -modification de style -maintenance du code

Les sélecteurs permettent de récupérer une référence d’objet se trouvant dans l’arbre DOM, c’est à dire les éléments de votre page. JQuery et Mootools utilise à peu près la même syntaxe mais vous allez vite vous rendre compte de mon dégout pour l’un des deux frameworks.

Prenons l’exemple de HTML ci-dessous: `

Regardons comment fonctionne la sélection d’élément, par exemple récupérons le div “content”: ` //à la JQuery var content = $(’#content')

//à la mootools var content = $(‘content’) `

Maintenant admettons que nous voulions récupérer les éléments “li” du div “menu”… ` //à la JQuery var lis = $(’#menu ul li’)

//à la mootools var lis = $$(’#menu ul li’) `

Déjà là JQuery est **absurde**. La fonction “$” (idée de //prototype//) renvoie dans notre premier exemple //un seul élément//, et dans le second cas il renvoie une //collection//.

Mootools sépare les deux méthodes. En utilisant le double dolar “$$” vous êtes certain de récupérer une collection ! Mootools défini, comme //prototype// que la fonction “$” récupère un élément unique via un “id”. Donc ici, inutile de donner le “#”.

Modifion une propriété, par exemple le style de “status”, nous ajoutons 3 styles: -bordure rouge -couleur de fond grise -fonte grasse ` //à la JQuery $("#status").css(‘border’,‘1px solid red’); $("#status").css(‘background-color’,’#EFEFEF’); $("#status").css(‘font-weight’,‘bold’);

//à la mootools $(‘status’).setStyles({ ‘border’: ‘1px solid red’, ‘background-color’: ‘#EFEFEF’, ‘font-weight’: ‘bold’ }) ` Remarquez la cohérence de Mootools en deux points. D’abord la méthode ne parle pas de “css” - qui normalement désigne la feuille de style, c’est à dire les fichiers css - mais bel et bien de **“styles”**. JQuery appelle sa méthode sans respecter les normes de //setter// et //getter//… et en plus **se trompe de mot**. Je continue sur ma lancée, Mootools permet deux méthodes: -setStyle(name, value) -setStyles(obj)

En bref, le mot “style” au pluriels désigne que l’on ajoute plusieurs styles (envoyés dans un objet mappant la syntaxe CSS). Et c’est valable pour **toutes les méthodes** comme //getElement// et //getElements// etc… En passant ces deux dernières méthodes **n’existent pas dans JQuery** alors qu’elles sont très pratiques et même indispensables.

En d’autres termes, Mootools est bien plus élégant et plus facile à maintenir ne serait-ce que dans sa lecture.

On va modifier les styles de tous les “li”: ` //à la JQuery $(’#menu ul li’).css(‘color’,‘red’)

//à la mootools $$(’#menu ul li’).setStyle(‘color’,‘red’) `

Même manière de faire, grosso-modo. On ne polémique plus sur la syntaxe et on passe à la suite.

J’ai envie faire un appel ajax sur tout les liens ayant la classe “ajax”. Un clique va chercher le lien et envoit le résultat dans la div “status”: ` //à la JQuery $(‘a.ajax’).bind(‘onclick’,function(){ $.ajax({ ‘url’: this.href, ‘success’: function (msg){ $(’#status’).innerHTML = msg } }); })

//à la Mootools $$(‘a.ajax’).addEvent(‘click’,function(){ new Ajax(this.href,{ update: ‘status’ }); },this); `

Je crois que ça se passe de commentaires… Allez, si, je me fais plaisirs. Tiens ? “$” maintenant il me permet d’appeler des méthodes ? Ok, on a un espace de nom et c’est pas bête en soi… mais pourquoi utiliser “$” une nouvelle fois ? Mais qu’est-ce que c’est que cette idée de faire un code si affreux ?

De plus, pour l’exemple j’ai été gentil, j’ai pas pris en compte le type de réponse ajax… parce que dans le cas de JQuery il faut spécifier avant récupération quel type de réponse on va avoir… ce qui fait que vous ne pouvez par récupérer deux type de contenu différent.

On commence à atteindre le sommum… et non, vous n’avez pas tout vu.

Je vais maintenant ajouter un élément, un lien, dans le seconde “li” du menu. ` //à la JQuery var elem = $(’Lien’); $(’#menu li’)[1].append(elem);

//à la mootools var elem = new Element(‘a’).set({‘href’ = ‘http://www.metal3d.org’}).setText(‘Lien’) elem.inject($$(’#menu li’)[1])

//ou bien en un coup: //edité le 9 mars 2009 après commentaire de efyx var elem = new Element(‘a’).set({ ‘href’ = ‘http://www.metal3d.org’, ’text’ = ‘Lien’ }).inject($$(’#menu li’)[1])

` Ok, alors quoi que vous pensiez, oui JQuery là on a codé rapidement, mais mon dieu… s’il vous plait… avec une méthode de la sorte autant poser directement le code html dans le “li” avec un vieux “innerHTML”…

Oui, avec Mootools je dois créer un élément et lui assigner des propriété, mais qu’on soit d’accord: on fait du Javascript, pas du HTML ! Imaginez une seconde que je me trompe dans le code HTML que j’envoi dans la fonction “$” (qui sert encore une fois à autre chose).

D’autant que là, encore une fois, je suis gentil… j’ai mis qu’un petit lien. Le jour où je je balance un tableau je vous raconte pas la tête du code et j’imagine d’ici le développeur qui va reprendre mon script pour ajouter un attribut.

Encore une fois, aucune élégance, aucun respect des normes ECMA… bref JQuery s’éloigne de l’idée que je me fais d’un bon framework.

Alors parlons des évènements, parce que là encore je me suis bien marré en testant. L’un des évènements les plus pratique que j’utilise est le “domready”. En gros, l’arbre DOM est prêt, mais **avant affichage** afin que je le modifie. Deux soucis, le premier venant de la syntaxe: ` //JQuery $(document).ready(function (){ //… })

//Mootools window.addEvent(‘domready’,function(){ //… }) `

Remarquez: pour JQuery c’est le document qui est prêt… pour Mootools on parle bien de “DOM” dans la fenêtre. Vous pensez que ça n’a pas d’importance ? **ERREUR** car JQuery exécute la méthode même si les feuilles de styles ne sont pas encore chargées… Ca vous épate ? moi pas. On a bloqué là dessus avec un collègue, obligé de gérer ce soucis avec un //setTimeout//…

En plus de cela, d’un coup on utilise plus “bind” mais une méthode précise ? Donc pour JQuery on a des évènements et… des évnènements… la différence ? ba le bon chasseur il voit un truc… il tire…

Bref…

En ce qui concerne les animations, je n’ai même pas osé en parler dans ce billet tant l’horreur m’a frappé quand j’ai testé JQuery. Mootools propose d’emblée des techniques de //morphing// CSS, des courbes d’animation proche de celle de Flash et la fluidité est franchement sans conteste.

Et je ne vous parle pas d’étendre la classe d’éléments… Impossible de comprendre comment faire sur JQuery alors que Mootools permet la gestion de classe et d’extension d’objet nativement (extends, implements, merge…). Là encore je ne comprend pas comment un framework peut prétendre être à la hauteur si il ne permet pas l’extension d’objet natif aussi primordial que l’élément DOM lui même !

Je sais que vous pouvez penser que je suis franchement un gueulard qui aime balancer sur des technos qu’il a pas envie d’utiliser, mais vous vous trompez ! Je me suis remis en question quand à mon choix d’avoir proposé il y a quelques temps Mootools à l’équipe de Copix. Vu la réputation qu’avait JQuery je me suis laissé tenté en espérant vraiment trouver mieux, me disant que je pourrais alors implémenter JQuery dans mon framework PHP préféré.

Mais au fur et à mesure j’ai déchanté, jusqu’à être abasourdi par une telle laideur d’implémentation. Je ne comprend pas qu’on puisse coder un framework de cette manière.

Je ne critique pas ici votre choix d’utiliser JQuery, je critique les développeur de ce framework ou plutôt l’implémentation. JQuery est fort d’une qualité: il est différent, permet de coder d’une autre manière et peut donc être plus accessible pour certains. Mais de mon coté, l’optique de JQuery ne correspond pas du tout à mes besoins.

Ne prenez donc pas mal mon post, vous pouvez y répondre.

• • Edition le 9 mars 2009:**\\

Un autre point que j’ai noté il y a quelques jours: $(document).ready(function (){ //on récupère les éléments li du menu var items = $('#menu ul li'); //on fait un truc avec ? for (i in items){ var item = items[i]; item.css('border','1px solid red'); } });

Selon vous, ça marche ? Et bien non !!! Avec JQuery, les éléments que vous récupérez ne sont pas des élements JQuery… logique ? si vous le dites… vous êtes forcé de repasser par la fontion “$”:

$(document).ready(function (){ //on récupère les éléments li du menu var items = $('#menu ul li'); //on fait un truc avec ? for (i in items){ var item = items[i]; //on es forcé de repasser par JQuery $(item).css('border','1px solid red'); } });

Avec Mootools, c’est un peu plus logique:

window.addEvent('domready',function (){ //on récupère les éléments li du menu var items = $$('#menu ul li'); //on fait un truc avec ? for (i in items){ var item = items[i]; item.setStyle('border','1px solid red'); } });

Car avec Mootools, quand vous demandez des éléments, on vous les donne prêt à l’emploi… Encore un point noir sur le visage de JQuery.