Cette page a été traduite par l'API Cloud Translation.

Choisir une bibliothèque ou un framework JavaScript

Umar Hansa

Cet article explique comment choisir une bibliothèque ou un framework à utiliser dans votre application Web. Les discussions ci-après vous aideront à peser le pour et le contre pour trouver la bibliothèque ou le framework JavaScript qui convient le mieux au problème que vous essayez de résoudre. Comprendre les avantages et les inconvénients applicables dans différentes situations est essentiel pour évaluer le grand nombre de bibliothèques JavaScript disponibles.

Présentation des bibliothèques et des frameworks JavaScript

Qu'est-ce qu'une bibliothèque JavaScript ? Dans sa forme la plus simple, une bibliothèque JavaScript est un code prédéfini que vous pouvez appeler dans le code de votre projet pour effectuer une tâche spécifique.

Cet article mentionne principalement des "bibliothèques". Cependant, bon nombre de ces discussions s'appliquent également aux cadres. La différence entre les deux peut être résumée comme suit:

Pour une bibliothèque, votre code d'application appelle le code de la bibliothèque.
Dans un framework, le code de votre application est appelé par le framework.

Les exemples pratiques suivants illustrent les différences.

Exemple d'appel à une bibliothèque JavaScript

Une bibliothèque JavaScript effectue une tâche spécifique, puis rend le contrôle à votre application. Lorsque vous utilisez une bibliothèque, vous contrôlez le flux de l'application et choisissez à quel moment l'appeler.

Dans l'exemple suivant, le code d'application importe une méthode à partir de la bibliothèque lodash. Une fois l'exécution de la fonction terminée, le contrôle est renvoyé à votre application.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

Lorsque la méthode lodash.capitalize est exécutée, elle appelle le code JavaScript pré-écrit qui met une majuscule au premier caractère d'une chaîne.

Exemple d'utilisation d'un framework JavaScript

Un framework JavaScript est un modèle de code prédéfini dans lequel vous construisez le comportement de votre application. Autrement dit, lorsque vous utilisez un framework, celui-ci contrôle le flux de l'application. Pour utiliser un framework, vous devez écrire le code de votre application personnalisée, puis le framework appelle le code de votre application.

L'exemple suivant montre un extrait de code qui utilise le framework JavaScript Preact:

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

Dans l'exemple, notez que le framework a beaucoup plus de contrôle sur le code que vous écrivez et que, dans certains cas, il contrôle même le moment d'exécuter votre code.

Pourquoi utiliser une bibliothèque ?

L'utilisation d'une bibliothèque JavaScript permet d'éviter les répétitions de code inutiles. Les bibliothèques peuvent faire abstraction d'une logique complexe, telle que la manipulation de dates ou les calculs financiers. Une bibliothèque peut également vous aider à créer votre produit initial, plutôt que d'avoir à écrire tout le code à partir de zéro, ce qui peut prendre du temps.

Certaines bibliothèques JavaScript côté client permettent d'éliminer les particularités de la plate-forme Web. Une bibliothèque peut également servir d'outil d'apprentissage. Par exemple, si vous ne connaissez pas les fonctions de lissage de vitesse d'animation, le code source d'une bibliothèque peut vous apprendre à les utiliser.

Certaines bibliothèques sont soutenues par de grandes entreprises qui investissent du temps et de l'argent dans la mise à jour et la sécurité de bibliothèques. De nombreuses bibliothèques sont accompagnées d'une documentation complète, qui vous permet, à vous et à votre équipe, de vous familiariser rapidement avec leur utilisation.

En fin de compte, l'utilisation d'une bibliothèque JavaScript vous fait gagner du temps.

Pourquoi est-il important de s'intéresser à l'utilisation de la bibliothèque ?

Techniquement, vous pouvez développer votre application Web à partir de zéro. Mais pourquoi vous retrouver avec un logiciel sans frais (Open Source) ou à acheter une solution qui, à long terme, permettra de gagner du temps et de l'argent ? Il existe un grand nombre de bibliothèques et de frameworks JavaScript, chacun offrant une approche unique de la résolution des problèmes et présentant des caractéristiques différentes. Exemple :

Une bibliothèque peut être écrite et gérée en interne plutôt que par un tiers.
Une bibliothèque peut être associée à des licences légales spécifiques qui la rendent adaptée ou inappropriée à votre application Web.
Une bibliothèque peut être obsolète ou non gérée.
Une bibliothèque peut simplifier un ensemble de tâches complexes et vous faire économiser beaucoup de temps et d’argent.
Une bibliothèque peut être largement utilisée au sein de la communauté, et les développeurs peuvent la connaître.

Comme vous vous en doutez, des caractéristiques différentes peuvent affecter votre application Web de différentes manières. Parfois, la décision n'est pas si délicate et vous pouvez changer de bibliothèque en toute sécurité si elle ne vous convient pas. Cependant, une bibliothèque peut parfois avoir un effet important sur votre travail et votre application Web, ce qui suggère qu'une approche plus éclairée peut être nécessaire.

Il existe certains environnements JavaScript non côté client, par exemple sur le serveur (exécuté dans un environnement cloud) ou sur un Raspberry Pi, où vous devrez peut-être ajuster les critères que vous utilisez pour vérifier les bibliothèques et les frameworks.

Performances

L'effet d'une bibliothèque JavaScript sur les performances d'une application Web côté client ne doit pas être ignoré. Une bibliothèque JavaScript volumineuse peut perturber les performances de chargement de votre page. N'oubliez pas : les millisecondes représentent des millions.

Imaginons que vous utilisiez une bibliothèque JavaScript pour l'animation. Certaines bibliothèques peuvent facilement ajouter des dizaines, voire des centaines de kilo-octets dans certains cas. Les ressources JavaScript de ce type peuvent ralentir considérablement le chargement de votre page, car le navigateur doit télécharger, analyser, compiler et exécuter le code.

Plus la bibliothèque JavaScript est grande, plus l'impact sur les performances de vos utilisateurs est important.

Lorsque vous évaluez ou utilisez une bibliothèque ou un framework JavaScript, tenez compte des suggestions suivantes pour améliorer les performances:

Si votre bibliothèque JavaScript est volumineuse, envisagez d'utiliser une alternative plus petite. Par exemple, date-fns offre de nombreuses fonctionnalités à une taille plus raisonnable que d'autres options.
Dans la continuité de l'exemple précédent sur les fonctions de date, n'importez que les fonctions dont vous avez besoin, par exemple: import { format } from 'date-fns'. Veillez à combiner cette approche avec le tree shaking, afin de créer une charge utile JavaScript minimale et de l'envoyer à vos utilisateurs.
Utilisez des outils de test des performances tels que Lighthouse pour observer l'effet de l'utilisation d'une certaine bibliothèque JavaScript sur les performances. Si une bibliothèque ajoute un délai d'une seconde au temps de chargement de votre page (n'oubliez pas de limiter votre réseau et votre processeur pendant les tests), vous devrez peut-être réévaluer la bibliothèque que vous avez choisie. Outre la vérification du chargement de la page, veillez à profiler tout comportement de page Web qui appelle le code de la bibliothèque en question. Les performances de chargement de page ne disent pas tout.
Si les commentaires sont les bienvenus par l'auteur de la bibliothèque, envoyez vos observations sur vos performances, vos suggestions et même vos contributions au projet. C'est là que la communauté Open Source s'illustre. Si vous décidez de faire une contribution, vous devrez peut-être d’abord consulter votre employeur.
Utilisez un outil de suivi des lots automatisé, tel que bundlesize, afin de surveiller les mises à jour importantes inattendues d'une bibliothèque. Il est courant qu'une bibliothèque JavaScript se développe avec le temps. Les ajouts de fonctionnalités, les corrections de bugs, les cas spéciaux et autres peuvent tous augmenter la taille de fichier d'une bibliothèque. Une fois que vous ou votre équipe avez accepté d'utiliser une bibliothèque, sa mise à jour peut être moins problématique et ne poser aucune question. C'est là qu'il est utile de s'appuyer sur l'automatisation.
Examinez vos exigences concernant une bibliothèque et déterminez si la plate-forme Web offre ou non les mêmes fonctionnalités de manière native. Par exemple, la plate-forme Web propose déjà un sélecteur de couleur, ce qui évite d'avoir à utiliser une bibliothèque JavaScript tierce pour implémenter la même fonctionnalité.

Sécurité

L'utilisation d'un module tiers présente certains risques de sécurité inhérents. La présence d'un package malveillant dans le codebase de votre application Web peut compromettre la sécurité de votre équipe de développement et de vos utilisateurs.

Prenons l'exemple d'une bibliothèque publiée dans l'écosystème de GPR. Un tel package peut être légitime. Cependant, le package peut être compromis au fil du temps.

Voici quelques conseils de sécurité à prendre en compte lorsque vous utilisez ou évaluez du code tiers:

Si vous utilisez GitHub, envisagez les offres de sécurité du code, telles que Dependabot. Vous pouvez également envisager d'utiliser d'autres services qui recherchent des failles dans votre code, tels que snyk.io.
Pensez à faire appel aux services d'audit de code, une équipe d'ingénieurs qui peut auditer manuellement le code tiers que vous utilisez.
Déterminez si vous devez verrouiller vos dépendances sur une version spécifique ou valider votre code tiers dans le contrôle des versions. Cela peut vous aider à verrouiller votre dépendance sur une version particulière, qui est vraisemblablement considérée comme sûre. Paradoxalement, cela peut avoir un impact négatif sur la sécurité, car vous risquez de manquer des mises à jour essentielles de la bibliothèque.
Analysez la page d'accueil du projet ou la page GitHub, le cas échéant. Recherchez si des problèmes de sécurité non résolus existent et si les problèmes de sécurité précédents ont été résolus dans un délai raisonnable.
Un code tiers qui utilise un autre code tiers présente davantage de risques qu'une bibliothèque sans dépendance. Soyez conscient de ce risque.

Accessibilité

Vous vous demandez peut-être comment les bibliothèques de logiciels sont liées à l'accessibilité Web. Bien qu'une bibliothèque logicielle puisse être utilisée dans différents environnements, dans le contexte d'une bibliothèque JavaScript côté client, l'accessibilité Web revêt une grande importance.

Une bibliothèque (ou framework, d'ailleurs) côté client peut augmenter ou diminuer l'accessibilité de votre site Web. Prenons l'exemple d'une bibliothèque JavaScript tierce qui ajoute un curseur d'image à une page. Si le curseur d'image ne tient pas compte de l'accessibilité Web, en tant que développeur Web, vous pouvez négliger une fonctionnalité importante et publier un produit qui n'inclut pas certaines fonctionnalités essentielles, comme le curseur permettant la navigation au clavier.

Le plug-in de typographie responsive prend-il en charge les utilisateurs qui font un zoom avant ou arrière sur la page ?
Le plug-in d'importation de fichiers est-il compatible avec l'importation de fichiers à partir d'appareils d'assistance ?
La bibliothèque d'animations offre-t-elle une assistance aux utilisateurs qui préfèrent réduire les mouvements ?
Le plug-in de cartes interactives est-il compatible uniquement avec le clavier ?
La bibliothèque du lecteur audio offre-t-elle une expérience appropriée sur les lecteurs d'écran ?

En tant que développeur Web, il est raisonnable de s'attendre à une certaine implication pour répondre à ces exigences d'accessibilité. Exemple :

Pour les fonctionnalités manquantes, vous pouvez les implémenter dans votre codebase, même tout en continuant à utiliser la bibliothèque en question.
Avec le soutien de votre employeur, vous pouvez ajouter une fonctionnalité manquante à la bibliothèque, si l'auteur de la bibliothèque autorise une telle contribution.
Vous pouvez ouvrir un dialogue avec l'auteur de la bibliothèque. Par exemple, ces fonctionnalités d'accessibilité spécifiques figurent-elles sur votre feuille de route ? Êtes-vous d'accord pour dire qu'ils ont leur place dans la bibliothèque ?
Pour les cas d'utilisation courants, vous pouvez explorer d'autres options de bibliothèque plus accessibles, qui peuvent exister, mais sont plus difficiles à trouver.
Dans le cas extrême, vous devrez peut-être abandonner complètement une bibliothèque et implémenter vos fonctionnalités à partir de zéro. Cela peut se produire lorsqu'une bibliothèque ou un framework présente une expérience d'accessibilité dégradée lors de l'utilisation initiale, et que vous devez annuler une grande partie de ce que la bibliothèque ou le framework est censé vous offrir sans frais.

Conventions

Une bibliothèque logicielle qui utilise des conventions de codage établies est plus facile à utiliser. Si vous utilisez une convention de codage inédite pour une bibliothèque, vous et votre équipe aurez peut-être des difficultés à l'utiliser.

Si une bibliothèque ne respecte pas les conventions de codage courantes (par exemple, un guide de style courant), vous ne pouvez pas remédier immédiatement à la situation. Il vous reste toutefois quelques options:

Veillez à bien faire la différence entre le code source de la bibliothèque et l'API qui vous est présentée, en tant qu'utilisateur de la bibliothèque. Bien que le code source interne puisse utiliser des conventions inhabituelles, si l'API (la partie de la bibliothèque avec laquelle vous interagissez) utilise des conventions familières, il n'y a peut-être rien à craindre.
Si l'API de la bibliothèque ne suit pas les conventions de codage courantes, vous pouvez utiliser un modèle de conception JavaScript, tel que le modèle de proxy, pour encapsuler et contenir toutes les interactions avec la bibliothèque dans un seul fichier du codebase. Votre proxy peut alors proposer une API plus intuitive à d'autres parties du code dans votre codebase.

Les conventions jouent un rôle important et sont faciles à utiliser. Une bibliothèque qui inclut une API intuitive permet de faire gagner des heures, voire des jours entiers, à une API contre-intuitive qui nécessite de nombreuses expérimentations.

Mises à jour

Par exemple, pour une bibliothèque entièrement fonctionnelle qui effectue quelques calculs mathématiques, une telle bibliothèque peut rarement avoir besoin d'être mise à jour. En fait, une bibliothèque complète de fonctionnalités est une trouvaille rare dans le monde en constante évolution du développement Web. Cependant, vous pouvez parfois souhaiter que l'auteur de la bibliothèque soit responsif et disposé à effectuer des mises à jour. Les nouvelles recherches et découvertes peuvent révéler de meilleures façons de faire, de sorte que les techniques utilisées dans les bibliothèques et les cadres sont toujours sujettes à l'évolution.

Lorsque vous choisissez une bibliothèque ou un framework, soyez attentif à la façon dont les mises à jour sont gérées et sachez que de telles décisions peuvent vous affecter:

La bibliothèque a-t-elle un calendrier de publication raisonnable ? Par exemple, les mises à jour du dépôt de code source peuvent être fréquentes, mais si ces mises à jour ne sont pas "publiées" ou "publiées" en conséquence, vous constaterez qu'il peut être difficile de les télécharger.
La bibliothèque publie-t-elle des mises à jour avec un schéma de gestion des versions logicielles approprié ? Une bibliothèque devrait vous faire gagner du temps. Si vous devez modifier votre code de manière inattendue à chaque mise à jour de la version de la bibliothèque, cela peut aller à l'encontre de l'objectif d'utilisation initiale de cette bibliothèque. Les changements destructives sont parfois inévitables, mais dans l'idéal, ils restent peu fréquents et ne sont pas imposés aux consommateurs.
La bibliothèque consacre-t-elle des efforts à la rétrocompatibilité ? Parfois, les mises à jour logicielles peuvent s'accompagner de modifications destructives, mais elles fournissent également un niveau de rétrocompatibilité. Cela permet au consommateur de la bibliothèque d'utiliser la dernière version de la bibliothèque avec un minimum de modifications de son code.

Licences

L'attribution de licences logicielles est un aspect important de l'utilisation de bibliothèques logicielles tierces. Les auteurs peuvent attribuer une licence à leur bibliothèque. Si vous envisagez d'utiliser cette bibliothèque, le choix de la licence peut vous concerner.

Par exemple, une bibliothèque JavaScript peut disposer d'une licence logicielle qui vous permet de l'utiliser dans un environnement non commercial. Pour un projet personnel, cela pourrait être un excellent choix. Si votre projet comporte un élément commercial, vous devrez peut-être envisager une licence d'entreprise.

En cas de doute, nous vous conseillons de solliciter l'aide d'un conseiller juridique professionnel ou de vous adresser à l'équipe juridique de votre entreprise.

Communauté

Une bibliothèque ou un framework ayant une grande communauté d'utilisateurs/contributeurs peut être utile, mais ce n'est pas une garantie. En général, plus une bibliothèque ou un framework compte d'utilisateurs, plus il est susceptible d'en bénéficier. Voici les avantages et les inconvénients de la participation à une communauté de développeurs:

Avantages :

Si vous disposez d'une vaste base d'utilisateurs, les bugs ont plus de chances d'être détectés tôt et souvent.
Une vaste communauté active pourrait se traduire par plus de tutoriels, de guides, de vidéos et même de cours sur la bibliothèque ou le framework en question.
Une vaste communauté active peut se traduire par une assistance plus poussée sur les forums et sur les sites Web de questions/réponses, augmentant ainsi la probabilité d'obtenir une réponse aux questions.
Une communauté engagée peut impliquer davantage de contributeurs externes à la bibliothèque ou à la structure. Ils peuvent aider à fournir des fonctionnalités qui ne figurent autrement pas sur la feuille de route de l'auteur.
Lorsqu'une bibliothèque ou une structure sont populaires au sein d'une communauté, il est plus probable que vos pairs et collègues en aient entendu parler, ou même connaissaient, une telle bibliothèque ou ce cadre.

Inconvénients :

Un projet avec une base d'utilisateurs vaste et diversifiée peut devenir gonflé à cause de l'ajout constant de fonctionnalités. Les bibliothèques surchargées peuvent nuire aux performances Web.
Un projet avec une communauté active et engagée peut être stressant pour les auteurs et les responsables, et nécessiter une forte modération de la communauté.
Un projet qui se développe rapidement, mais qui n’a pas le soutien approprié en place, peut commencer à montrer des signes d’une communauté toxique. Par exemple, les développeurs Web débutants ou juniors peuvent se sentir mal accueillis dans une certaine communauté en raison de contrôles d’accès.

Documentation

Quelle que soit la simplicité ou la complexité d'une bibliothèque ou d'un framework JavaScript, la documentation logicielle peut toujours vous aider. Même les développeurs très expérimentés utilisent la documentation plutôt que d'apprendre à coder eux-mêmes. La documentation précise l'API à utiliser et la façon de l'utiliser.

La documentation peut même fournir des exemples de code, ce qui vous permettra de démarrer rapidement. Lorsque vous évaluez une bibliothèque ou un framework, vous pouvez vous poser certaines des questions suivantes:

La bibliothèque comprend-elle de la documentation ? Si ce n'est pas le cas, vous devrez être à l'aise pour le résoudre par vous-même.
La documentation est-elle claire, facile à comprendre et exempte d'ambiguïté ? De nombreux développeurs consacrent beaucoup de temps à la documentation. Cela peut sembler anodin, mais la clarté d’une documentation textuelle peut avoir un impact important sur votre productivité.
La documentation est-elle entièrement générée automatiquement ? Cette documentation peut être plus difficile à assimiler et ne fournit pas toujours des directives claires sur l'utilisation d'une API.
La documentation est-elle à jour ? La maintenance de la documentation est parfois considérée comme une intervention secondaire. Si la bibliothèque est mise à jour, mais pas la documentation, cela peut entraîner une perte de temps de développement.
La documentation est-elle complète et disponible dans plusieurs formats ? Les guides utilisateur, les exemples de code, la documentation de référence, les démonstrations en direct et les tutoriels sont des formats de documentation utiles qui peuvent vous aider à utiliser efficacement une bibliothèque ou un framework.

La documentation ne peut pas toujours être complète, et ce n'est pas grave. Vous devrez évaluer les besoins de votre organisation, les exigences de votre projet et la complexité de votre logiciel, et vous en servir pour déterminer le niveau de documentation dont vous avez besoin.

Conclusion

Il est normal de se sentir submergé lorsque vous choisissez une bibliothèque ou un framework pour la première fois. Comme pour tout le reste, plus vous apprenez et pratiquez une tâche, plus vous progressez. Il peut être utile de vous référer à cet article la prochaine fois que vous choisirez une bibliothèque ou un framework à utiliser. Vous pouvez utiliser les titres de cet article comme liste de contrôle. Par exemple: cette bibliothèque est-elle performante ? Cette bibliothèque respecte-t-elle les normes de mon entreprise en matière d'accessibilité Web ?

Il existe d'autres aspects des bibliothèques et des frameworks que vous pouvez envisager, et qui n'ont pas été beaucoup abordés dans cet article:

Évolutivité:est-il facile d'étendre la bibliothèque avec une logique et/ou un comportement personnalisés ?
Outils:le cas échéant, la bibliothèque dispose-t-elle d'outils tels que des plug-ins d'éditeur de code, des outils de débogage et des plug-ins système de compilation ?
Architecture:un code propre est important, mais l'architecture globale de la bibliothèque est-elle raisonnable ?
Tests:le projet comporte-t-il une suite de tests ? Le site Web du projet utilise-t-il des badges ou des indicateurs que la suite de tests passe par rapport au dernier commit ?
Compatibilité:la bibliothèque fonctionne-t-elle bien avec les autres bibliothèques et/ou frameworks que vous utilisez actuellement ?
Coût:quel est le coût d'un framework ? Sont-elles disponibles en Open Source ou disponibles à l'achat ?
Métriques personnalisées:ces métriques doivent figurer en bas de votre liste de critères, voire être complètement ignorées. Toutefois, vous pouvez prendre en compte les "votes", les comptes de réseaux sociaux qui représentent le projet et/ou le nombre de bugs/problèmes en suspens sur la page du projet.