Synthèse

Yahoo ! User Interface, abrégée en YUI (prononcer « youï »), est une librairie développée par les ingénieurs de Yahoo ! mise à disposition du public depuis le début de l’année 2006.
Yahoo ! y a d’ailleurs consacré une année de travail avant cette libération de code afin de fournir une librairie de qualité, fonctionnelle et pérenne.

L’objectif avoué de Yahoo ! est de faire progresser les développeurs dans l’utilisation de Javascript tout en partageant leur point de vue sur sa conception. L’autre objectif était interne puisque il s’agit de la librairie utilisée en interne sur tous ses sites (ou presque). Cela représente la bagatelle de 500 millions d’utilisateurs quotidiens : autant dire que les exigences en terme de conception et de performances sont fortes, et c’est ce qui rend d’autant plus intéressant YUI.

Analyse

Librairie CSS

Aussi étrange que cela puisse paraître, YUI n’est pas seulement une librairie Javascript. C’est également une librairie CSS au même titre que Blueprint, la flexibilité en plus.

YUI se découpe en 3 modules :

• Fonts : uniformise et définit les conventions typographiques pour les navigateurs Web
• Grids : fournit des outils de mise en page en grille, facilitant ainsi le positionnement des éléments et la création de rythmes verticaux
• Reset : uniformise et corrige la mise en page des éléments standards dans les navigateurs Web

Un quatrième module, Base, agrège les 3 autres pour simplifier leur intégration. Cette librairie uniformise les bases de développement des feuilles de style en fournissant tout un ensemble de classes pour rapidement mettre en page le contenu.

Toutefois le nom de certains éléments peut manquer d’expressivité. Qui aurait deviné que #doc4 permettait de créer une page de 974 pixels de large ?

Espaces de noms

Pour en revenir à YUI, côté Javascript, la librairie s’axe sur l’utilisation d’un seul objet global (YAHOO) auquel sont rattachés d’autres objets. Les développeurs issus du monde C et/ou Java ne seront donc pas dépaysés. YUI module tous ses composants grâce à ce système. La seule difficulté est de savoir à quel espace de nom correspond tel ou tel module. Cette difficulté se résorbe avec une lecture de la documentation et un peu d’entrainement.

Depuis peu, un ensemble d’outils existe pour :

• charger dynamiquement les fichiers correspondant à un espace de nom
• charger les dépendances d’un module
• créer ses propres espaces de nom

Composants

Nous venons de le voir, les composants de YUI sont accessibles au travers d’espaces de noms. Ce que nous n’avons pas encore vu c’est la pléthore de composants utilisables. Si la majorité des librairies Javascript sont aujourd’hui plébiscitée pour l’utilisation simplifiée d’AJAX, de la gestion d’évènements et de quelques effets visuels sympathiques, YUI va beaucoup plus loin.

On retrouve pèle-mêle des modules comme :

• les animations (taille, couleur et aspect des éléments)
• l’auto-complétion (pour assister l’utilisation lors de la frappe dans les champs de formulaire)
• la gestion de l’historique de navigateurs (très utile pour des interfaces gérées en Javascript, cassant le contrôle natif de l’historique navigateur)
• l’affichage de calendriers (et la gestion des évènements qui va avec)
• la gestion des connexions à distance (appels AJAX, files d’attente, appels cross-browser etc.)
• la sélection DOM (via les sélecteurs CSS notamment)
• la gestion de menus contextuels (rattachés ou pas à des clics de souris)

La richesse du contexte Web fait que de nouveaux composants voient régulièrement le jour, d’abord dans un stade expérimental puis béta avant d’être considérés comme stables en production.

Qualité et compatibilité du code

En termes de stabilité, la qualité des fondations de YUI est une des clés de voute du projet. La librairie étant employée sur les sites de Yahoo !, elle doit être fonctionnelle, et dépourvue au maximum de bugs.

Cette qualité est entretenue par une recherche permanente des meilleures techniques Javascript, afin d’assurer une compatibilité maximale sur les navigateurs Web modernes. Cela passe par une documentation abondante, des exemples commentés et des normes de codage qui favorisent la lisibilité du code produit.

Cette haute exigence de qualité, alliée au système d’espaces de noms, rend YUI compatible avec de nombreuses autres librairies. D’ailleurs, ExtJS se basait entièrement sur YUI à ses débuts, avant de finalement développer un cœur indépendant.

Plus qu’une simple librairie

YUI bénéficie de tout le soutien de Yahoo ! pour des raisons évidentes, mais, derrière YUI, c’est tout le developer network de Yahoo ! qui s’exprime :

• YUI Blog : un blog dédié aux dernières trouvailles des développeurs, aux bonnes pratiques et aux pièges à expliquer. Les explications sont d’ailleurs remarquablement limpides et fourmille de détails sur des points obsurs de Javascript ;
• des outils : avec notamment des fichiers en libre utilisation pour éviter d’avoir à les héberger sur votre espace disque, un utilitaire de compression de fichiers Javascript et CSS
• des articles traitant de bonnes pratiques de conception, d’utilisation mais aussi de sécurité
• des vidéos présentant des cas concrets, des démonstrations ou des interventions d’ingénieurs

Tout ceci contribue à la dynamique du projet, qui offre ainsi plus qu’un simple outil : des connaissances, à transformer en compétences.

Perspectives

Yahoo ! User Interface est sur une pente ascendante depuis sa version 2.3. Les développeurs ont produit de gros efforts pour en simplifier l’utilisation et étoffer ses domaines fonctionnels.

Il est d’ailleurs surprenant de constater qu’avec de telles qualités, YUI ne soit pas davantage employée comme librairie de fondements, car elle demeure pionnière en terme d’interface et d’expérience utilisateur.

A ce titre, YUI est un outil à l’avenir radieux, qui propose une approche globale intéressante.

Récapitulatif