JavaScript's Bizarre Adventure - Part 3 : les bibliothèques

JavaScript

Après l'exécution de JavaScript et un point sur le langage et ses alternatives, c'est donc le moment d'étudier l'utilisation concrète du langage dans les prochains articles.

Et pour celui là, ce sera à propos des bibliothèques - pas celles d'une marque suédoise, non - mais ça vous le saviez déjà si vous avez lu le titre de cet article.


La fièvre du DHTML et de l'AJAX

Logo Netscape

La fièvre du samedi soir à faire danser son HTML

DHTML ou "Dynamic HTML", on en a déjà parlé dans le premier article de cette série. C'est un nom apparu vers les années 90 / 2000, en même temps que le JavaScript, et qui désignait un peu tout et rien à la fois. On disait surtout "Je fais du DHTML" pour dire "Je dynamise ma page web avec du JavaScript" vu que c'était désormais possible grâce à ce dernier, ainsi qu'avec l'apparition du DOM qui sert à manipuler le contenu et la forme d'un document HTML ou XML, notamment depuis JavaScript (car DOM n'est pas exclusif à ce dernier pour autant).

Intégré entre 2006 et 2007 aux principaux navigateurs web de cette époque, XMLHttpRequest (parfois abrégé en XHR) allait aussi faire une petite révolution dans l'utilisation du langage.

Cette API accessible en JavaScript permet donc d'envoyer des requêtes HTTP à un serveur et d'en recevoir du contenu de tout type (pas seulement du XML malgré son nom), et ce surtout après que la page web ait déjà été chargée. D'où le nom que l'on a donné à son utilisation : AJAX, pour Asynchronous JavaScript and XML.

while (true) { new JSLibrary(); }

Smashing

Faut-il vraiment une légende à ce gif ?

Avant, bien avant l'arrivée des langages se transpilant en JavaScript, l'idée de rendre l'utilisation du JavaScript plus accessible était déjà là. Surtout lorsque, par exemple, les implémentations du CSS, du DOM ou encore même de XMLHttpRequest n'étaient pas exactement les mêmes entre les différents navigateurs web.

C'est entre 2005 et 2006 que naquit les mastodontes des bibliothèques JavaScript : jQuery, Prototype.js, MooTools, script.auculo.us, Yahoo UI, Dojo... Certaines existent encore aujourd'hui et restent grandement utilisées, jQuery en étant sûrement le meilleur exemple.

Ces bibliothèques ont plusieurs buts : uniformiser l'utilisation du DOM à travers les navigateurs, simplifier la requête de données via XHR, créer rapidement des interfaces similaires aux applications de bureau, ajouter des notions "orienté objet" à JavaScript comme les classes ou l'héritage... ainsi que quelques extras comme l'animation d'éléments HTML, étant donné que CSS3 était encore soit inexistant soit trop jeune à l'époque.

Et l'arrivée d'HTML5 et CSS3 ne fera qu'amplifier ce phénomène. Les connexions peer-to-peer (WebRTC), les Web Sockets, WebGL ou encore la géo-localisation : toutes ces nouvelles fonctionnalités désormais accessibles ont irrémédiablement mené à la création de bibliothèques pour, encore une fois, faciliter leur utilisation et prendre en compte les différences d'implémentation entre le navigateurs.

Grâce aux bibliothèques, tirer profit des possibilités de JavaScript est plus rapide et plus facile, mais avec la contrepartie majeure d'oublier l'utilisation classique du langage et surtout d'être de plus en plus dépendant d'elles. Trop ?

L'effusion inarrêtable

Plugins

Aucune limite, c'est de la pure folie

Faire bouger et changer le contenu d'une page HTML est tellement incroyable, que l'on a rapidement créé une des tonnes de bibliothèques pour la moindre chose qu'il soit possible de faire : des boutons, menus, diaporamas, fenêtres modales, lecteurs vidéos, formulaires et j'en passe.

Une grande part de ces bibliothèques se basent d'ailleurs sur d'autres pour fonctionner, le cas le plus connu étant les plugins jQuery. L'inconvénient, une fois encore, étant que votre page est dépendante de jQuery ainsi que de nombreux plugins.

Aussi, devant l'infinité de bibliothèques répondant à un même besoin, il est devenu extrêmement difficile de choisir la bonne : est-elle fiable, populaire, bien documentée, toujours mise à jour ? Peut-être également que l'utilisation d'une bibliothèque n'est finalement pas si essentielle pour accomplir ce que vous voulez faire.

Aujourd'hui, la tendance est plutôt à la réalisation de bibliothèques bien plus raisonnables : on évite d'utiliser jQuery si possible, on fait attention à rester léger (0 % de matières grasses de préférence) et surtout performant aussi bien sur PC que sur des appareils mobiles.

Le goût des bonnes choses

Pizza

Trop bien, pizza.js est codé en ES2015 et ils ont même un chat Gitter !

Fort heureusement, tout n'est pas noir dans l'océan des bibliothèques JS. Voici une petite sélection personnelle de certaines qui pourraient avoir un intérêt pour beaucoup de projets.

Outils

Les outils

Lodash est une boîte à outils pour manipuler aisément des structures de données comme des tableaux ou des objets : itération, filtrage, jointure... très utile lorsque l'on travaille avec des données de taille conséquente, ou quand on doit modeler les données renvoyées par une API avant pouvoir s'en servir par exemple.

Moment.js est tout simplement essentiel dès lors que vous travaillez avec des dates : conversion string <> Date, différence entre deux dates, temps relatif, formatage d'une date en plusieurs langues et même support des fuseaux horaires à l'aide de Moment Timezone.

Modernizr permet de détecter les fonctionnalités supportées (ou non) par le navigateur web d'un visiteur, afin de réagir en conséquence si votre site ou application web a besoin de fonctionnalités spécifiques pour son bon fonctionnement.

Affichage

L'affichage

Vue.js est mon petit préféré depuis un moment : un moyen rapide de construire des composants web (avec du two-way data binding à la Angular ou React) mais de façon extrêmement simple, et sans avoir recours à une usine à gaz pour bénéficier des mêmes fonctionnaltiés.

D3.js est une référence dès que vous voulez créer des schémas ou représentations graphiques plus ou moins complexes de tout type de données.

Leaflet est aussi une référence lorsque l'on veut créer une carte interactive à la Google Maps, mais en utilisant sa propre carte (ou bien celle d'OpenStreetMap).

3D

La 3D

three.js et BabylonJS sont deux moyens de générer des graphismes 3D de qualité à l'aide de WebGL. C'est aussi un excellent moyen de faire souffler le ventilateur d'un ordinateur portable, surtout les MacBook.

Je te ferai remarquer que tu as oublié xxxxxx.js qui est très bien et-

Peut-être, mais le but était juste de montrer quelques bons exemples de bibliothèques. N'hésitez pas à poster dans les commentaires celles qui valent le coup selon vous !

En définitive, il est bien sûr possible de trouver de bonnes bibliothèques. Unheap propose une sélection de plugins jQuery intéressants, et Javascripting semble être un répertoire ultime des principales bibliothèques existant à l'heure actuelle, avec un indice de popularité sur chacune d'entre elles.

L'essentiel à retenir étant donc là : en user si besoin, oui, en abuser parce que c'est possible, non. Et comme tout choix technologique, il faut faire très attention à ce que l'on choisit pour éviter d'être dans le pétrin lorsque l'on se rends compte qu'un choix était, au final, mauvais.

Next time on the series...

Les bibliothèques c'est donc très pratique, mais bien souvent pour concevoir un site ou une application web, il nous faut de quoi structurer un minimum la chose à l'aide d'un framework plus ou moins complet. Et ce sera le sujet du prochain article !

ToBeContinued