Yahoo UI vs JQuery : quel framework Javascript pour vos applications Web 2.0 ?

Yahoo UI et JQuery sont deux frameworks Javascript qui simplifient la gestion d’Ajax, la mise en place d’interfaces clients riches et les interactions au sein des pages Web. La ressemblance s’arrête là. Car c’est un peu comme si on comparait une multinationale à la start-up du coin (comme leurs créateurs d’ailleurs). A ma gauche, YUI, solide, bien structuré, dont chaque extension est calibrée à la ligne de code près ; à ma droite, JQuery, rapide, dynamique, et doté d’une armada d’extensions de qualité très variable. Petite revue de détail.


Yahoo UI (que nous appellerons YUI) et JQuery sont deux frameworks Javascript qui simplifient la gestion d’Ajax, la mise en place d’interfaces clients riches et les interactions au sein des pages Web. La ressemblance s’arrête là. Car c’est un peu comme si on comparait une multinationale à la start-up du coin (comme leurs créateurs d’ailleurs). A ma gauche, YUI, solide, bien structuré, dont chaque extension est calibrée à la ligne de code près ; à ma droite, JQuery, rapide, dynamique, et doté d’une armada d’extensions de qualité très variable.

J’ai abordé les deux solutions dans des contextes différents : réalisation d’un logiciel avec YUI, intégration de quelques fonctions pour enrichir un site avec JQuery. A chacun ses préférences, mais étant un autodidacte venu au développement sur le tard, j’avoue avoir complètement craqué pour JQuery. Voici quelques arguments qui jouent en sa faveur :

JQuery : la concision avant tout

JQuery est simple et élégant. YUI est carré et lourdingue. Comparez deux méthodes pour affecter un gestionnaire de clics à un élément :

  // Yahoo UI YAHOO.util.Event.addListener('click','bouton1',maFonction); // JQuery $('#bouton1').click(maFonction);  

Le code produit par JQuery est nettement plus léger et condensé. Au prix, peut-être d’une moindre rigueur (les erreurs sont moins facilement identifiées), mais puisqu’on se perd moins dans le code, on y gagne quand même.

Les sélecteurs de JQuery : du CSS en boîte

JQuery propose un système de sélecteur qui singe à merveille les sélecteurs de CSS (en version 3, madame). Son utilisation est tout à fait logique si l’on a un peu d’expérience de CSS. On peut ainsi faire des trucs de dingue en quelques caractères :

  • $('#contenu h2') sélectionne tous les titres H2 contenus dans le div ayant l’id contenu
  • $('.mini').next() sélectionne l’élément qui suit immédiatement un élément ayant la classe .mini

YUI est loin d’offrir de telles possibilités. A titre d’exemple, la sélection de tous les éléments de classe .mini s’écrira :

YAHOO.util.Dom.getElementsByClassName('mini');

Quant à sélectionner l’élément suivant un autre, j’ignore si c’est possible avec YUI.

Des raccourcis pour les tâches courantes

Dans JQuery, une même fonction permet de renvoyer une valeur ou de la définir, selon qu’on lui passe un argument ou pas. De même on utilisera une même fonction pour définir l’événement clic ou le déclencher, selon qu’elle est appelée avec une fonction de callback (click(maFonction)) ou sans argument (click()). Simple et malin.

Autre exemple de la philosophie JQuery, la fonction each() permet d’effectuer un traitement en boucle sur un tableau de valeurs (les utilisateurs de PHP apprécieront la référence à foreach()).

Des fonctions de base sont intégrées au moteur, comme show() (afficher un élément), hide() (le masquer) et toggle() (passer de l’un à l’autre). Comme ces fonctions sont intégrées au prototype de l’objet, elles sont appelées comme des méthodes natives de l’élément sélectionné : $(‘#texte’).show() affiche fort logiquement l’élément #texte. Ce mécanisme, très intuitif, permet par exemple de générer en quelques lignes un système de FAQ déroulant accessible et simple à mettre à jour.

La documentation : Y’a où ? Ouille aïe !

Je me suis d’abord laissé envoûter par la richesse de la documentation de Yahoo UI. Elle est effectivement très renseignée. Sauf que… La librairie est tellement riche et complexe que de nombreuses fonctions ne sont pas agrémentées d’exemples. L’API est absolument illisible, et l’on se retrouve rapidement à écumer les forums pour constater que personne n’a rencontré le problème qui vous agite. Pire, à chaque changement de version, la documentation précédente disparaît : impossible de s’y retrouver parmi les fonctions obsolètes ou non implémentées dans votre version, ou encore les options de configuration qui ont changé et rendent votre application inutilisable.

A côté de ça, la doc JQuery est un bonheur. Des explications simples et concises, des exemples parlants, une certaine stabilité du code. La politique de plugins externes reporte la complexité sur les développeurs externes, mais la courbe d’apprentissage est bien moins abrupte.

Méthodes de développement : kif-kif

Qu’il s’agisse de l’objet littéral, de l’utilisation de callbacks, de la délégation d’événements, l’ensemble des méthodes de développement modernes de Javascript s’appliquent aux deux librairies. Pour les débutants, les exemples de codes proposent cependant deux approches différentes. YUI encourage la création de fonctions de callback clairement nommées, alors que JQuery créera une fonction anonyme à la volée. Par exemple :

 // Doc YUI YAHOO.util.Event.addListener('bouton1','click',afficheOK); function afficheOK() {     alert('OK'); } // Doc JQuery $('#bouton1').click(function() { alert('OK'); });  

Ce qui ne saute pas aux yeux, c’est que les deux méthodes sont strictement équivalentes et qu’on peut utiliser indifféremment une fonction de callback nommée dans JQuery et une fonction anonyme dans YUI. Au développeur de choisir une des deux méthodes. On pourra par exemple opter pour :

  • une fonction anonyme pour des effets simples et rapides, lorsque le code n’est exécuté qu’une seule fois dans le script
  • une fonction nommée lorsqu’elle est complexe (meilleure lisibilité) ou récurrente (plusieurs événements peuvent la déclencher)
  • ou encore, pour plus de rigueur, regrouper des fonctions nommées dans un objet javascript plus important. Par exemple :
     // On définit l'objet formulaire et ses fonctions internes var formulaire = {     afficheOK: function() {         alert('OK');     },     afficheErreur: function() {         alert('Erreur');     } } $('#bouton1').click(formulaire.afficheOK); $('#bouton2').click(formulaire.afficheErreur); 

JQuery : vainqueur par KO

Conclusion : le poids léger l’emporte largement sur le poids lourd. L’élément qui peut faire pencher la balance, c’est l’existence ou non de plugins « solides », équivalents des composants de YUI. S’ils existent, je pense réécrire entièrement une application YUI en JQuery pour l’alléger et la rendre plus simple à administrer.

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

8 réponses à Yahoo UI vs JQuery : quel framework Javascript pour vos applications Web 2.0 ?

  1. bruno bichet dit :

    Tout à fait d’accord avec toi pour les arguments en faveur de jQuery : les frameworks de Yahoo! (javascript, css, etc.) sont conçus par des ingénieurs pour d’autres ingénieurs alors que jQuery est pensé pour l’utilisateur par des utilisateurs ingénieux ;))

  2. tongueman dit :

    Il y’a EXT JS qui est pas mal également.

    Toutes ces bibliothéques ont un point commun: elle manque de doc est d’exemple.

  3. @bruno : j’ai été assez déçu quand j’ai pris conscience de la lourdeur du système. J’avais l’impression que yahoo accordait davantage de place au design – notamment via leurs design patterns très bien foutus.

    @tongueman : oui, il y a aussi Prototype/Scriptaculous dans le genre. Je ne les connais pas assez pour comparer leurs qualités respectives mais nul doute qu’il y a du bon dans le lot.

  4. Clochix dit :

    La cible des deux n’est peut-être pas la même, et je qualifierais plus jquery de bibliothèque que de framework. Jquery est un petit noyau très bien pensé sur lequel se greffent de nombreux pluggins. Idéal pour dynamiser rapidement quelques pages d’un site web. YUI est un ensemble "cohérent" de composants, comme par exemple Dojo ou Prototype. Plutôt destinés à réaliser des applications utilisant intensivement Javascript. Je ne pense pas que l’un l’emporte sur l’autre, ils boxent dans des catégories différentes et répondent à des besoins différents. Toute la difficulté est comme d’habitude de choisir l’outil le plus adapté à un besoin particulier, plutôt que le meilleur dans l’absolue.

  5. @Clochix : j’ai essayé de montrer qu’on pouvait aussi développer de manière "structurée" avec jQuery, même si les exemples insistent sur les méthodes légères. Je pense sincèrement qu’on peut faire de gros projets avec jQuery, la "cohérence" initiale que je trouvais chez YUI étant un peu mise à mal par ses changements incessants au fil des versions et l’aridité de sa doc.
    Mais ils sont conscients du problème puisqu’une version 3 est en pre-release, qui se veut plus légère et plus stable au niveau de l’API… c’est attrayant.

  6. satourne dit :

    Bjr,

    Je suis dacodac avec toi ! YUI c’est génial, mais quand tu vois la grammaire utilisé par JQuery y’a pas photos …

    Le truc qui penche pour YUI c’est la doc et les exemples, même si ils ne mettent pas assez en avant les optimisations de performances (genre les PickList qui pointent sur des IFRAME)

    Je pense que la prochaine fois je tente avec JQuery !

  7. minh dit :

    Perso, j’aime bien les deux frameworks.

    Comme clochix.
    Je pense que les deux frameworks ont des vocations différentes.

    Pour yui, son utilisation se justifie que si on utilise les composants qui sont hyper-bien faits. Par contre l’utilisation de ce framework implique beaucoup plus de téléchargements de script que jquery. Moi je l’envisage surtout pour des applications web lourdes.

    Pour la doc, moi je télécharge la version qui correspond à ce que j’utilise, je n’ai pas trop de problèmes.

    Pour Jquery, la syntaxe est hyper sexy, il faut le dire. C’est rapide et avec peu de chargements on peut faire pas mal de choses. C’est très intéressant lorsque l’on a beaucoup de petits scripts à faire, ou lorsque l’on travaille beaucoup le dom. Pour les composants de la librairie, la qualité est, selon moi, assez inégale.

    Pour Bruno: Les ingénieurs sont aussi ingénieux… mais différemment… :)

  8. Maxou dit :

    Ah…. Je dirais ni l’un, ni l’autre. Vive le Javascript naturel, aidé de quelques fonctions basiques.

    Va essayer de comprendre du code JQuery dans 3 ans, quand une autre bibliothèque sera à la mode ! Je trouve en effet que le code résultant n’est pas très propre.

    Plutôt que
    $(‘#bouton1’).click(maFonction);
    je préfère
    document.getElementById(« bouton1 »).onclick(maFonction);
    (il faut juste mettre une fonction à la place de document.getElementById, ça pourrait donner objet(« bouton1 »).onclick(maFonction). C’est pas cool ça ?
    L’avantage avec le onclick, c’est qu’il y a la notion d’événement, qu’on n’a pas dans click, qui amène à penser au développeur que le code s’exécute immédiatement.

    Il ne faut pas oublier que $(‘#bouton1’) est aussi plus lent qu’un bon vieux getElementById car JQuery fait une analyse de la chaîne !

Laisser un commentaire

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