Étendre le Javascript

Étendre le Javascript

Ce cours n'a abordé, jusqu'à présent, que le Javascript dit « pur ». Pur dans le sens où vous aviez besoin de tout développer par vous-mêmes, ce qui peut rapidement se révéler fastidieux. Un bon exemple de ce qui est nécessaire de développer régulièrement : les animations ! Aussi incroyable que cela puisse paraître, le Javascript ne fournit aucune fonction capable de nous aider dans nos animations, il nous faut donc les développer par nous-mêmes.

Heureusement, le Javascript est un langage extrêmement utilisé et sa communauté est immense, il est donc très facile de trouver des scripts adaptés à vos besoins. Parmi ces scripts, nous trouvons deux types : lesframeworks et les bibliothèques.

Les frameworks

Le terme « framework » est abusivement utilisé en Javascript. Ce que nous allons vous présenter ne sont pas des frameworks au sens propre du terme, mais il est courant de les nommer de cette manière.

Un framework a pour but de fournir une « surcouche » au Javascript afin de simplifier l'utilisation des domaines les plus utilisés de ce langage tout en facilitant la compatibilité de vos codes entre les navigateurs Web. Par exemple, quelques frameworks disposent d'une fonction $() s'utilisant de la même manière que la méthode querySelector(), et ce, sur tous les navigateurs Web, facilitant ainsi la sélection d'éléments HTML. Pour faire simple, un framework est une grosse boîte à outils contenant une multitude de fonctions permettant de subvenir aux besoins des développeurs !

L'atout numéro un d'un framework est sa capacité à s'adapter à toutes les utilisations du Javascript et à fournir un système performant de plugins afin qu'il puisse être étendu à des utilisations non envisagées par son système de base. Grâce à ces deux points, un framework permet de simplifier et d'accélérer considérablement le développement d'applications Web.

Il existe de nombreux frameworks en Javascript en raison de la pauvreté de ce langage en terme de fonctions natives, cependant nous n'allons présenter que les plus connus d'entre eux :

• jQuery : il s'agit du framework Javascript le plus connu. Réputé pour sa simplicité d'utilisation et sa communauté gigantesque, il est clairement incontournable et a l'avantage de ne peser que 30 Ko environ ! Cependant, il n'est pas toujours apprécié en raison de sa volonté de s'écarter de la syntaxe de base du Javascript grâce au chaînage de fonctions, que vous pouvez constater dans l'exemple qui suit :$("p.neat").addClass("ohmy").show("slow");.
• MooTools : un framework puissant et presque tout aussi connu que jQuery, bien que nettement moins utilisé. Il est réputé pour sa modularité et son approche différente plus proche de la syntaxe de base du Javascript. En revanche, bien que ce framework soit « segmentable » (vous ne téléchargez que ce dont vous avez besoin), il reste nettement plus lourd que jQuery.
• Dojo : connu pour sa capacité à permettre la conception d'interfaces Web extrêmement complètes, il possède des atouts indéniables face aux plus grands frameworks et tout particulièrement  jQuery UI, une extension de jQuery conçue pour faire des interfaces Web. Ce framework est l'un des plus modulaires que l'on puisse trouver sur Internet, ce qui fera la joie des fans d'optimisation.
• YUI : il est souvent oublié par les développeurs Web, mais l'entreprise Yahoo! n'a pourtant pas dit son dernier mot avec des projets ambitieux parmi lesquels compte YUI. Ce framework est pour le moins complet, ne vous fiez pas aux fausses idées que vous pouvez avoir de Yahoo!, vous pourriez avoir bien des surprises en utilisant ce framework qui est modulable et relativement performant, bien qu'il bénéficie d'une communauté assez restreinte.
• Prototype : l'un des pionniers des frameworks Javascript ! Nous le citons seulement en tant qu'exemple, car, malgré ses qualités, il se fait vieux et la dernière mise à jour officielle date du 16 novembre 2010, autant dire qu'il est mort. Son déclin s'explique par le simple fait qu'il étendait les objets natifs liés au DOM, rendant le tout assez lent et peu compatible. Bref, vous ne vous en servirez jamais, mais au moins vous saurez de quoi veulent parler certaines personnes en parlant de « Prototype » avec un P majuscule. 

Les bibliothèques

Contrairement aux frameworks, les bibliothèques (libraries en anglais) ont un but bien plus spécialisé.

Quel est l'intérêt si un framework me fournit déjà tout ce dont j'ai besoin ?

L'intérêt se situe à la fois sur le poids du fichier Javascript à utiliser (une bibliothèque sera généralement plus légère qu'un framework) et sur la spécialisation des bibliothèques. Ces dernières ont souvent tendance à aller plus loin que les frameworks, vu qu'elles n'agissent que sur un domaine bien précis, ce qui simplifie d'autant plus votre développement dans le domaine concerné par la bibliothèque.

Et puis il existe un principe important dans le développement (Web ou logiciel) : l'optimisation. Utiliser un framework uniquement pour faire une malheureuse animation n'est vraiment pas conseillé, c'est un peu comme si vous cherchiez à tuer une mouche avec un tank… Préférez alors les bibliothèques, en voici d'ailleurs quelques-unes qui pourraient vous servir :

• Sizzle, Qwery : deux bibliothèques conçues pour fonctionner de la même manière que la méthode querySelector(), ce type de bibliothèques est d'ailleurs à l'origine de l'implémentation officielle de la méthode en question. La première est le moteur de sélection du framework jQuery mais est relativement lourde, la seconde a l'avantage d'être particulièrement légère et un poil plus rapide en terme d'exécution.

• Popcorn.js : une bibliothèque permettant une manipulation aisée des balises <audio> et <video>, il devient ainsi très simple d'interagir avec ces balises afin de mettre en place des sous-titres, des commentaires placés à un moment précis de la piste audio ou vidéo, etc.

• Raphaël, CAKE, Three.js : trois bibliothèques spécialisées dans le graphisme. La première fonctionne exclusivement avec les images SVG, la deuxième avec la balise <canvas> et la troisième s'est spécialisée dans la 3D et gère à la fois SVG, <canvas> et surtout la bibliothèque WebGL, qui sait tirer parti du moteur OpenGL !

• Underscore.js : cette bibliothèque est un must-have si vous souhaitez utiliser les fonctionnalités de l'ECMAScript 5 sur tous les navigateurs ! Son principe de fonctionnement n'est pas basé sur des polyfills, qui pourraient perturber le bon déroulement d'autres scripts, mais plutôt sur une collection de méthodes chargées d'accomplir les mêmes tâches que les méthodes prévues par l'ES 5.

• Modernizr : comme vous le savez si bien, les langages Web sont plus ou moins bien supportés selon les navigateurs, surtout quand il s'agit de fonctionnalités récentes ! Cette bibliothèque a pour but de vous aider à détecter la présence de telle ou telle fonctionnalité, il ne vous restera alors plus qu'à fournir un script résolvant ce problème (un polyfill) ou exploitant une solution alternative.

Il n'est malheureusement pas possible de vous faire une liste complète de tout ce qui existe en terme de bibliothèques, elles sont bien trop nombreuses. Toutefois, vous trouverez certains sites tels que microjs qui arrivent à lister une bonne partie des bibliothèques Javascript les plus intéressantes. Vous verrez, il y a de quoi faire !

Tant que nous y sommes, voici un site bien utile qui vous permettra de savoir quels navigateurs supportent telle ou telle fonctionnalité du HTML ou du Javascript : http://caniuse.com/. À utiliser sans modération !

Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement