Mise à jour en juin 2018.
De tous les langages que vous pouvez utiliser pour créer des applications Web, JavaScript possède peut-être la sélection la plus robuste de bibliothèques et de frameworks vraiment utiles. En fait, il y en a tellement qu’il peut être difficile de savoir lesquels utiliser, surtout lorsque vous débutez.
La différence essentielle entre les bibliothèques et les frameworks JavaScript est que les bibliothèques se composent de fonctions qu’une application peut appeler pour effectuer une tâche, tandis qu’un framework définit la façon dont un développeur conçoit une application. En d’autres termes, le framework fait appel au code de l’application, plutôt que l’inverse. Bien sûr, les développeurs ont toujours besoin de bibliothèques pour accomplir des tâches de base sur le web en utilisant JavaScript.
La nature de ces outils a changé au cours des dernières années. En 2015, par exemple, jQuery était la principale bibliothèque JavaScript. Aujourd’hui, selon JavaScript Scene, les bibliothèques JavaScript traditionnelles restent importantes mais font face à une concurrence accrue des frameworks JavaScript tels que React, Angular, Node.js et Ember.js.
Lorsque vous envisagez une bibliothèque ou un framework JavaScript, vous pouvez vous poser quelques questions clés :
- La bibliothèque ou le framework est-il suffisamment flexible pour répondre à vos besoins ?
- À quelle fréquence la bibliothèque ou le framework est-il mis à jour pour répondre aux nouvelles exigences des applications et assurer la compatibilité avec les nouvelles normes ?
- La bibliothèque ou le framework est-il sécurisé ? Il peut être très difficile de corriger les problèmes de sécurité ultérieurement.
- La bibliothèque ou le framework bénéficie-t-il d’un fort soutien de la communauté ? Vous pourriez être surpris de la fréquence à laquelle vous en aurez besoin.
- Y a-t-il des applications d’exemple simples ? Vous voulez être sûr que la bibliothèque ou le framework est bien écrit et fournit une documentation utilisable.
Avec cela à l’esprit, nous mettons à jour notre liste, initialement publiée en 2015, pour couvrir les bibliothèques et les frameworks bien connus employés par à peu près tous les sites du web, ainsi que des options plus spécialisées conçues pour prendre en charge des fonctionnalités spécifiques du site. Pour vous aider à comprendre les choix, nous avons listé les bibliothèques et les frameworks séparément (par ordre alphabétique) :
Librairies JavaScript
D3.js
De nombreux sites Web modernes sont axés sur les données. Les sites d’actualités, par exemple, doivent constamment rafraîchir leur contenu, ce qui rend impossible la reconfiguration de la configuration toutes les quelques secondes pour supporter ces changements. La bibliothèque Data Driven Documents, ou D3.js, est unique en ce qu’elle donne la priorité aux données. La capture d’écran ci-dessous ne montre que quelques-unes des nombreuses présentations de données que vous trouverez dans D3.js:
Cliquer sur une entrée dans l’index visuel vous amène à une page de détails où vous pouvez voir une vue complète de la présentation de données (montrée ci-dessous), ainsi que le code sous-jacent et les données utilisées pour créer la présentation :
Le site fournit des exemples à part entière conçus pour vous aider à comprendre la puissance de la bibliothèque.
Le principal avantage de cette bibliothèque est sa manipulation extrêmement souple du contenu. Le revers de la médaille, cependant, est que D3.js n’offre pas beaucoup de piquant. Si vous travaillez sur un site de commerce électronique, par exemple, plutôt que de simplement présenter des informations, cette bibliothèque n’est peut-être pas le meilleur choix. En plus de son extrême flexibilité, la présentation relativement simplifiée de D3.js contribue à améliorer la vitesse en évitant un grand nombre de bagages que d’autres bibliothèques utilisent pour créer des présentations éblouissantes. Et si vous trouvez que D3.js est encore un peu trop pour vos besoins, considérez Chart.js, une bibliothèque plus petite dédiée à la fourniture de graphiques.
jQuery
JQuery a gagné son statut de longue date de souverain régnant de la page web. De nombreux sites utilisent encore jQuery pour la manipulation de base du Document Object Model (DOM) pour trois raisons essentielles :
- jQuery est incroyablement facile à apprendre. Il fournit plus d’exemples que la plupart des bibliothèques, il y a donc de très bonnes chances que vous trouviez un exemple qui démontre exactement comment accomplir votre tâche spécifique.
- JQuery est incroyablement rapide. Parce qu’il se concentre sur la bonne exécution de tâches spécifiques, jQuery permet d’effectuer ces tâches rapidement.
- JQuery a une énorme base installée. Il dispose également d’une quantité importante de soutien communautaire et de contributeurs au projet.
Vous pouvez vous attendre à ce que cette bibliothèque soit là pour longtemps. Le temps de développement supplémentaire signifie également que la documentation est assez polie. Comme vous pouvez le voir ci-dessous, la documentation décompose les sujets en morceaux faciles à comprendre et vous pouvez ensuite plonger dans des détails supplémentaires si nécessaire :
Bien sûr, rien n’est parfait. Par exemple, il arrive que jQuery ne fonctionne pas tout à fait de la même manière sur plusieurs navigateurs. JQuery est franc à propos de ces préoccupations, et vous pouvez trouver des informations sur le support des navigateurs sur le site.
Enfin, contrairement à d’autres bibliothèques, jQuery n’est pas une solution complète. Vous avez besoin d’un autre produit, comme jQuery UI (voir l’entrée suivante) pour construire une application complète. Il est important de réaliser que votre site sera plus modulaire et dépendra de plus de bibliothèques lorsque vous travaillez avec jQuery (ce qui n’est pas nécessairement une mauvaise chose).
jQuery UI
jQuery UI n’est qu’un des nombreux modules complémentaires pour jQuery, mais c’est celui que vous voyez le plus souvent, c’est pourquoi nous l’avons inclus ici. Vous utilisez jQuery UI pour ajouter des éléments graphiques de base à votre application après avoir incorporé jQuery. La bibliothèque jQuery UI est livrée avec toutes sortes de widgets intéressants, tels que des accordéons, des curseurs, des info-bulles et des sélecteurs de date, qui permettent de configurer votre application pour fournir des services utiles.
Vous pouvez approfondir des widgets particuliers ou d’autres contrôles pour voir comment ils fonctionnent. Une page contient généralement le contrôle en haut, suivi d’un mode d’emploi et d’un exemple de code. Comme avec jQuery, vous commencez par un exemple simple, mais vous approfondissez au besoin pour voir les ajouts que vous pouvez faire.
Cette bibliothèque se distingue pour plusieurs raisons. Le plus important est que JQuery UI fonctionne avec à peu près tous les navigateurs, de sorte que les utilisateurs sont moins susceptibles de se plaindre que votre application ne fonctionne pas comme prévu. jQuery UI offre également un vaste nombre de compléments. Par exemple, bien que jQuery UI ne dispose pas d’un sélecteur de temps, vous pouvez obtenir des modules complémentaires pour effectuer cette tâche à des endroits tels que trentrichardson.com/examples/timepicker.
Le seul problème avec le groupe de bibliothèques jQuery est qu’elles sont devenues grosses… vraiment grosses. Parfois, une bibliothèque devient tout simplement trop riche en fonctionnalités. La taille des bibliothèques JQuery peut les rendre lentes à charger sur les petits appareils. Des bibliothèques tierces alternatives, comme Granim.js et Multiple.js, ont vu le jour pour fournir un sous-ensemble de fonctionnalités de JQuery, parfois avec un ensemble ciblé de fonctionnalités supplémentaires, avec des temps de chargement nettement plus rapides.
Parsley
La validation des formulaires est une tâche essentielle. Parce que les données sont maintenant si souvent analysées par des machines, des données propres sont plus essentielles que jamais. Nettoyer les données après coup prend du temps et n’est jamais aussi précis que d’amener l’utilisateur à fournir des informations correctes en premier lieu.
Parsley fournit plus de techniques de validation de formulaire qu’à peu près n’importe quelle autre bibliothèque JavaScript. Vous choisissez le niveau de validation dont vous avez besoin, mais elles peuvent devenir assez complexes :
Même la validation supposée simple présentée ci-dessous contient de nombreux types de validation différents, ainsi que le code nécessaire pour effectuer la tâche. Il est étonnant de voir à quel point il est facile d’accomplir les validations les plus courantes. (Vous n’aurez pas besoin de codage lourd, sauf si vous essayez de valider des données complexes.)
QUnit
La fonctionnalité de test fournie par de nombreuses bibliothèques laisse beaucoup à désirer. Même si vous utilisez un script, le test manuel d’applications complexes est forcément lourd et chronophage – s’il parvient même à trouver toutes les erreurs.
QUnit est l’une des nombreuses bibliothèques de test unitaire disponibles pour JavaScript. Bien que certains puissent la considérer comme un peu datée, elle est relativement complète et se distingue par un grand soutien communautaire et une courbe d’apprentissage courte. Le site de QUnit fournit une foule d’informations pour démarrer, notamment un tutoriel complet sur les tests unitaires.
Vous pouvez même utiliser QUnit pour tester QUnit (en supposant que vous ayez un jour envie de le faire) !
React
Considéré habituellement comme une bibliothèque, React est parfois qualifié de framework. Dans le contexte de l’approche Modèle-Vue-Contrôleur (MVC) pour créer des applications à grande échelle, React fournit la partie vue. Il ne suppose rien de la pile technologique sous-jacente que vous utilisez pour modéliser ou contrôler les données. Tout ce qui intéresse React, c’est d’afficher les données à l’écran. Dans cette optique, il ne s’appuie pas sur le Document Object Model (DOM) du navigateur, mais utilise plutôt un DOM virtuel léger qui affiche les informations rapidement. L’une des meilleures choses à propos de React est qu’il est déclaratif, ce qui signifie que vous dites au framework ce que vous voulez faire, et non comment le faire.
Le prix à payer pour la vitesse et la possibilité d’utiliser MVC est un certain degré de complexité supplémentaire. Même un petit composant nécessite pas mal de code (comme le démontrent les exemples sur le site de React). Ce que vous gagnez, c’est la flexibilité et la vitesse lorsque vous travaillez avec des projets vraiment importants.
Cadres JavaScript
Angular
Le cadre Angular permet d’étendre HTML en agissant comme la partie contrôleur de MVC. Les contrôleurs sont le comportement derrière les composants DOM. Angular permet de créer de nouveaux comportements d’une manière à la fois naturelle et directe. Les extensions finissent par ressembler à des ajouts au HTML, plutôt qu’à quelque chose de boulonné. Le site d’Angular expose clairement les deux raisons essentielles d’utiliser ce produit : « vitesse & performance » et « outillage incroyable. »
Cependant, le codage peut devenir complexe, et ce framework est peut-être plus adapté aux entreprises qu’aux petites startups. Même les exemples simples sur le site d’Angular reposent sur de multiples fichiers qui créent rapidement de la complexité. Il est important de noter que la dernière version d’Angular s’appuie également sur TypeScript au lieu de JavaScript pur, ce qui augmente la courbe d’apprentissage mais apporte de l’évolutivité.
Heureusement, Angular est livré avec un tutoriel complet, présenté ici, qui devrait permettre aux développeurs expérimentés de commencer à produire des résultats rapidement.
Un problème potentiel : la dernière version d’Angular ne prend pas en charge un éventail de navigateurs aussi large que les versions précédentes. Assurez-vous qu’elle est compatible avec les navigateurs pris en charge par votre site.
Ember.js
Il y a quelque chose de sérieux dans un framework qui se présente comme un « framework pour développeurs web ambitieux ». Des entreprises bien connues comme Microsoft, Netflix et LinkedIn utilisent Ember.js parce qu’il emploie le modèle MVVM (Model-View-View-Model) et intègre les meilleures pratiques dans le cadre du framework. Mieux encore, il est très bien adapté. Fait intéressant, si Ember.js se concentre sur le développement web, vous pouvez également l’utiliser pour créer des applications mobiles et de bureau – il a été utilisé pour créer Apple Music.
Contrairement à de nombreux autres frameworks, vous pouvez utiliser la suite complète d’outils basés sur Ember pour créer un environnement de développement hautement compatible. L’Ember CLI (interface de ligne de commande) donne accès à une multitude d’outils que vous pouvez automatiser à l’aide de scripts. Ember Data, par exemple, fournit un accès aux données orienté Web à l’aide d’un mappage objet-rationnel (ORM). Ember Inspector, quant à lui, est un plugin pour les navigateurs Firefox et Chrome conçu pour faciliter le débogage.
Même avec toute sa puissance, cependant, le tutoriel de démarrage rapide d’Ember.js ne prend que cinq minutes. Bien sûr, le tutoriel standard prend nettement plus de temps, mais produit des résultats plus respectables, comme le montre ce qui suit :
La documentation de ce framework comprend tous les sujets dont vous avez besoin, notamment des discussions sur le modèle d’objet, les modèles, les composants, les contrôleurs et les modèles. Il existe également un blog, et la communauté Ember.js peut fournir une aide supplémentaire.
Node.js
Node.js est un moteur d’exécution JavaScript asynchrone, piloté par les événements, avec quelques caractéristiques uniques. Pour commencer, s’il n’a pas de travail à faire, il se met tout simplement « en sommeil ». Cela peut sembler anodin, mais si vous hébergez votre site dans le cloud public, le fait de le mettre en veille peut vous faire économiser de l’argent, voire beaucoup d’argent. En outre, comme Node.js ne nécessite pas de verrous pour effectuer son travail, il n’a pas tendance à se bloquer comme certains autres frameworks. Ce produit ressemble davantage à jQuery qu’à jQueryUI, dans la mesure où vous ne l’utilisez pas pour créer une interface utilisateur. Au lieu de cela, vous créez un code qui réagit aux événements – un client génère des événements et le serveur répond à ces événements. L’interface utilisateur est un élément distinct qui affiche tout résultat.
Parce que Node.js est si simple et rapide, avec un support communautaire inégalé, vous pouvez le trouver dans les endroits les plus improbables. Même si vous ne pensez pas avoir installé le paquet complet, il est probable que vous en ayez au moins une partie installée dans le cadre de Node.js Package Manager (NPM). D’après la fondation Node.js, il existe 9 millions d’instances de NPM fonctionnant sur plus de 50 000 paquets. En d’autres termes, Node.js constitue la base d’un grand nombre des paquets que vous utilisez. Avec Node.js, les développeurs peuvent construire :
- Des applications backend
- Blogs
- Systèmes de gestion des clients
- Services en temps réel, tels que les applications de chat et les jeux
- APIREST
- Applications de réseaux sociaux
- Utilitaires et outils
Vue.js
Un framework JavaScript open-source polyvalent, Vue est « progressif », ce qui signifie que contrairement aux « frameworks monolithiques, Vue est conçu dès le départ pour pouvoir être adopté de manière incrémentielle. » Évoluant entre une bibliothèque et un framework complet, Vue utilise un « modèle de développement basé sur les composants » qui vous permet de mélanger et d’associer les composants Vue dans vos projets.
Les fonctionnalités clés de Vue comprennent les composants, les modèles, les transitions et la liaison de données bidirectionnelle, mais sa caractéristique la plus distinctive est peut-être son système de « réactivité ». Fondamentalement, la réactivité signifie que la mise à jour d’un objet JavaScript dans Vue met automatiquement et discrètement à jour les templates Vue.
Vue a été construit pour être utilisable par toute personne ayant une connaissance pratique de HTML, CSS et JavaScript. Pour avoir une idée de son fonctionnement, regardez la vidéo ci-dessous :
Pour plus d’informations, vous pouvez voir comment Vue se compare aux autres Frameworks ici.
Autres choix
N’oubliez pas qu’il existe de nombreuses autres bibliothèques, communautés, collections et frameworks JavaScript disponibles, souvent avec des domaines d’intérêt spécifiques.
Par exemple, CodePen est une communauté en ligne gratuite pour tester et présenter des mélanges de HTML, CSS et JavaScript. Pensez-y comme un environnement social pour les concepteurs et développeurs frontaux, une communauté de développement en ligne et un éditeur avec une interface uniforme. Chaque entrée du CodePen s’appelle une plume et vous pouvez les voir en action dans le cadre d’une collection. Certaines collections sont assez fantaisistes, comme anime.js, tandis que d’autres, comme Funny JS, proposent des widgets intéressants que vous ne verrez peut-être pas ailleurs. Il fonctionne également avec directement avec React.
De même, Jest est une solution de test JavaScript « zéro configuration » conçue pour fonctionner prête à l’emploi avec React.
BIDEO.JS, quant à lui, fournit une méthode pour afficher des vidéos d’arrière-plan en plein écran, utile si vous construisez un site pour une agence de voyage, par exemple.
La ligne de fond
Comme il devrait être clair maintenant, le problème n’est pas de trouver une bibliothèque ou un framework JavaScript qui peut vous aider à faire quelque chose d’intéressant – c’est de trouver la bibliothèque qui vous aidera à faire la seule tâche que vous devez accomplir.
En outre, vous voulez vous assurer que vous vous appuyez sur des bibliothèques qui seront encore là demain. Personne ne veut avoir à retravailler son application parce que la bibliothèque JavaScript qu’elle utilise n’est plus disponible. Et même si la plupart des bibliothèques et des frameworks JavaScript modernes sont aujourd’hui extrêmement fiables, vous devez tout de même vous assurer qu’ils fonctionnent avec tous les appareils et les navigateurs sur lesquels vos utilisateurs comptent.
.