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.