Clever Age - Conseil en architecture technique


fév 08 25

jquery

Logo jQuery

Fiche d’identité
Nom du produit jQuery
Langage Javascript
Site de référence http://jquery.com/
Auteur Collectif dirigé par John Resig
Licence MIT, GPL
Première version 1.0 Alpha en juin 2006
Version étudiée 1.2.2
Compatibilité avec les navigateurs Firefox 1.5 +, Internet Explorer 6+, Opera 9+, Safari 2.0.2+

Synthèse

JQuery est une librairie Javascript Open Source fortement axée sur la souplesse d’utilisation, la qualité du code et la légèreté. Malgré sa toute relative jeunesse, cette politique lui a valu une adoption rapide ( 30% de parts de marché fin 2007) et une croissance vertueuse.

Outre ces aspects, jQuery a pour vocation d’être non-intrusif, facilement modulable grâce à de nombreux plugins et très tolérant en cas de cohabitation avec d’autres librairies. Le respect des standards et cette forte volonté qualitative en font un outil idéal, performant et utilisable dans un environnement de production.

Analyse

Les sélecteurs CSS

La sélection d’éléments du DOM par le biais de la symbolique fonction dollar ($()) est un des points fort de jQuery. Par le biais de cette seule fonction, elle est capable de récupérer un ou plusieurs éléments à partir :

  • d’un identifiant d’élément ($('#id'))
  • d’une classe d’élément ($('.classe'))
  • d’un nom de balise ($('div'))
  • d’un élément du DOM ($(noeud_dom))
  • mais aussi d’un mélange de tout ça ($('#id a[href^=https]')

Contrairement à d’autres librairies, la fonction dollar permet de mélanger plusieurs sélecteurs CSS et retourne l’ensemble des éléments sélectionnés dans un tableau. Tableau aisément manipulé par les autres fonctions de jQuery grâce au chainage.

Le chainage

Toutes les fonctions jQuery (ou presque) retournent systématiquement le tableau d’objets du sélecteur. Cette technique permet ainsi de chaîner des fonctions très facilement au lieu de répéter le sélecteur autant de fois que l’on souhaite leur appliquer des fonctions.

Le revers de la médaille se trouve du côté des performances. Elles s’en trouvent altérées puisque tous les éléments sélectionnés sont étendus d’un objet jQuery et se passent de fonction en fonction. Toutefois depuis la version 1.2, cet aspect négatif a été fortement réduit au point de ne plus être un problème.

AJAX

Toutes les librairies fondation Javascript proposent leurs propres fonctions pour faciliter l’utilisation de requêtes AJAX. JQuery n’est pas en reste et fournit un lot de fonctions particulièrement utiles pour :

  • charger des fichiers Javascripts distants et les rendre opérables dans le contexte actuel
  • charger des données JSON en les transformant en objets Javascript de manière sécurisée
  • fournir des fonctions dites de callback de manière ponctuelle ou permanente, avant et après l’appel AJAX, en cas de succès ou d’échec de l’appel

Ces outils libèrent le développeur de nombreuses contraintes liées à la sécurité en faisant tout le travail pour lui.

Les plugins

Les plugins permettent d’étendre les capacités de jQuery en ajoutant de nouvelles fonctions et de nouveaux attributs utilisables par tout objet jQuery et ce, de manière totalement transparente.

Un nouveau dépôt de plugins pour jQuery a été lancé mi-2007, et totalise à ce jour plus de 450 plugins conçus par des développeurs du monde entier. Ils sont pour la plupart conçus dans la philosophie de jQuery, et apportent diverses fonctionnalités comme le tri dynamique des tableaux, des galeries d’images, des vérificateurs de formulaires, des améliorations ergonomiques, des navigateurs d’arborescences, etc.

La souplesse de conception de jQuery favorise les plugins plutôt que les modifications du cœur (les hacks), et facilite de ce fait la redistribution de code dans différents projets.

Site de jQuery UI

jQuery UI

JQuery UI est né d’un plugin nommé Interface, développé en dehors de l’équipe de développement officielle. Ce plugin était l’équivalent de Script.aculo.us envers Prototype, puisqu’il fournissait des fonctions pour les tris, les glisser/déposer et des effets graphiques (accordéons, carrousels, magnifieurs etc.).

Interface a officiellement rejoint jQuery lors du lancement de la version 1.2 de ce dernier et a été du même coup renommé en jQuery UI. Le projet est même allé plus loin en fournissant des outils supplémentaires pour transformer des portions de HTML en fenêtres déplaçables, entre autre et ce, de manière totalement personnalisable. JQuery UI fournit en effet la possibilité d’utiliser ses propres thèmes visuels. Cela a pour première conséquence de maximiser l’intégration des effets à n’importe quel site Web en séparant les parties logiques du visuel.

Compatibilité avec les librairies tierces

Une des grandes préconisations dans le milieu des librairies Javascript consiste à éviter au maximum l’emploi simultané de plusieurs librairies. Ça peut se comprendre en terme de redondance de fonctionnalités, mais cela se comprend aussi dans les collisions de noms de fonctions. Ces collisions affolent les consoles d’erreur, laissant le développeur coincé face à un dilemme.

Fort heureusement, jQuery intègre une fonction permettant d’éviter les conflits (jQuery.noConflict()) en ne déclarant pas de fonction dollar. Mieux encore, elle permet même de choisir quel sera le nom de l’objet jQuery, ce qui laisse un contrôle total de son utilisation. Des motifs de conception existent aussi pour encapsuler du code jQuery de manière pérenne en limitant ainsi au maximum le nombre de $ à remplacer par un nouveau nom.

Au-delà d’un aspect de compatibilité pure, sa conception facilite également son intégration ... dans d’autres librairies. Ext permet d’utiliser jQuery en lieu et place de son composant de base.

Perspectives

Il y a fort à parier que jQuery continuera sur sa lancée et deviendra la première librairie Javascript employée sur le Web en 2008, surclassant ainsi Prototype. Son développement dynamique, sa communauté ouverte et sa documentation complète en ont à nos yeux une librairie de choix, de qualité et d’avenir.

JQuery annonce régulièrement des gains de performance, des optimisations, et se soucie de la rétro-compatibilité de ses évolutions. Cela garantit des mises à jour peu risquées et bien documentées. Toutes les suppressions de code sont systématiquement portées vers des plugins pour pérenniser tout code produit, ancien ou récent.

JQuery, « write less, do more » [1] et ce n’est pas pour rien.

Récapitulatif

Forces Faiblesses
  • simplicité d’utilisation
  • documentation en ligne
  • quantité de plugins
  • dynamisme du projet et de sa communauté
  • hétérogénéité dans la qualité des plugins
  • facilité à produire un code peu optimisé et consommateur en ressources
Opportunités Menaces
  • amélioration des performances
  • adoption rapide, y compris par de grands comptes
  • un seul leader charismatique véritablement à la tête du projet (John Resig)

[1] codez moins, faites plus