Choisir une bibliothèque ou un framework JavaScript

Umar Hansa

Cet article vous explique comment choisir une bibliothèque ou un framework à utiliser dans votre application Web. Les discussions qui suivent vous aideront à peser le pour et le contre pour trouver la bibliothèque ou le framework JavaScript adapté au problème commercial que vous essayez de résoudre. Il est essentiel de comprendre quels avantages et quels inconvénients s'appliquent dans différents cas de figure afin d'examiner le grand nombre de bibliothèques JavaScript disponibles.

Qu'est-ce que les bibliothèques et les frameworks JavaScript ?

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

Cet article mentionne principalement le terme "bibliothèques". Cependant, de nombreuses discussions sont également applicables aux frameworks. En gros, la différence entre les deux peut se résumer comme suit :

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

Les exemples pratiques suivants illustrent les différences.

Exemple d'appel d'une bibliothèque JavaScript

Une bibliothèque JavaScript effectue une tâche spécifique, puis redonne le contrôle à votre application. Lorsque vous utilisez une bibliothèque, vous contrôlez le flux de l'application et choisissez quand 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 du code JavaScript préécrit qui met en majuscule le 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 créez le comportement de votre application. Autrement dit, lorsque vous utilisez un framework, il contrôle le flux de l'application. Pour utiliser un framework, vous écrivez votre code d'application personnalisé, puis le framework appelle votre code d'application.

L'exemple suivant présente 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 cet exemple, notez que le framework a beaucoup plus de contrôle sur le code que vous écrivez et, dans certains cas, qu'il contrôle même à quel moment exécuter votre code.

Pourquoi utiliser une bibliothèque ?

L'utilisation d'une bibliothèque JavaScript peut vous aider à éviter la répétition inutile de code. Les bibliothèques peuvent faire abstraction de logiques complexes, telles que la manipulation de la date ou les calculs financiers. Une bibliothèque peut également vous aider à lancer 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 d'atténuation de l'animation, le code source d'une bibliothèque peut vous apprendre à les utiliser.

Certaines bibliothèques sont gérées par de grandes entreprises qui investissent du temps et de l'argent pour les maintenir à jour et les sécuriser. 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, utiliser une bibliothèque JavaScript vous fait gagner du temps.

Pourquoi vous préoccuper de l'utilisation des bibliothèques ?

Techniquement, vous pouvez développer votre application Web à partir de zéro, mais pourquoi vous en donner la peine alors que vous pouvez utiliser un logiciel gratuit (open source) ou acheter une solution qui, à long terme, peut vous faire gagner du temps et de l'argent ? Il existe un grand nombre de bibliothèques et de frameworks JavaScript disponibles, chacun offrant une approche unique pour résoudre les 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 non adapté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 dans la communauté et être bien connue des développeurs.

Comme vous pouvez le supposer, différentes caractéristiques peuvent avoir un impact différent sur votre application Web. Parfois, la décision n'est pas si importante, et vous pouvez remplacer une bibliothèque si vous ne l'aimez pas. Cependant, une bibliothèque peut parfois avoir un impact significatif sur votre travail et votre application Web, ce qui suggère qu'une approche plus éclairée pourrait être nécessaire.

Dans certains environnements JavaScript côté serveur, comme sur un serveur (exécuté dans un environnement cloud) ou sur un Raspberry Pi, vous devrez peut-être ajuster les critères que vous utilisez pour examiner les bibliothèques et les frameworks.

Performances

L'impact des performances d'une bibliothèque JavaScript sur 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 que les millisecondes font des millions.

Imaginons que vous utilisiez une bibliothèque JavaScript pour les animations. Certaines bibliothèques peuvent facilement ajouter des dizaines de kilo-octets, voire des centaines de kilo-octets dans certains cas. De telles ressources JavaScript peuvent ajouter un temps de chargement de page important, car le navigateur doit télécharger, analyser, compiler et exécuter le code.

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

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

  • Si vous utilisez une grande bibliothèque JavaScript, envisagez d'utiliser une alternative plus petite. Par exemple, date-fns offre de nombreuses fonctionnalités à une taille plus raisonnable que certaines autres options.
  • Poursuivez l'exemple date-fns précédent et 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 qu'une charge utile JavaScript minimale soit créée et envoyée à vos utilisateurs.
  • Utilisez des outils de test des performances tels que Lighthouse pour observer l'impact des performances de l'utilisation d'une certaine bibliothèque JavaScript. Si une bibliothèque ajoute une seconde de délai au temps de chargement de la page (n'oubliez pas de limiter votre réseau et votre processeur pendant les tests), vous devrez peut-être réévaluer la bibliothèque de votre choix. En plus de vérifier le chargement de la page, veillez à profiler tout comportement de page Web qui appelle du code de la bibliothèque en question. Les performances de chargement de la page ne disent pas tout.
  • Si l'auteur de la bibliothèque accepte les commentaires, envoyez-lui vos observations sur les performances, vos suggestions et même vos contributions au projet. C'est là que la communauté Open Source se distingue. Si vous décidez de faire une contribution, vous devrez peut-être d'abord vérifier auprès de votre employeur.
  • Utilisez un outil automatisé de suivi des lots, tel que bundlesize, pour surveiller les mises à jour importantes inattendues d'une bibliothèque. Il est courant qu'une bibliothèque JavaScript se développe au fil du temps. Les ajouts de fonctionnalités, les corrections de bugs, les cas particuliers et d'autres éléments peuvent augmenter la taille du fichier d'une bibliothèque. Une fois que vous ou votre équipe avez décidé d'utiliser une bibliothèque, la mise à jour de celle-ci peut être moins problématique et ne poser que peu ou pas de questions. C'est pourquoi il est utile de compter sur l'automatisation.
  • Examinez vos exigences concernant une bibliothèque et évaluez si la plate-forme Web offre ou non les mêmes fonctionnalités en mode natif. Par exemple, la plate-forme Web propose déjà un sélecteur de couleur, ce qui vous évite d'utiliser une bibliothèque JavaScript tierce pour implémenter la même fonctionnalité.

Sécurité

L'utilisation d'un module tiers présente des risques de sécurité inhérents. Un package malveillant dans le code 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 GPR. Il peut s'agir d'un package légitime. Toutefois, au fil du temps, le package peut être compromis.

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'autres services qui recherchent des failles dans votre code, tels que snyk.io.
  • Envisagez d'utiliser des services d'audit du code, qui sont des équipes d'ingénieurs qui peuvent auditer manuellement le code tiers que vous utilisez.
  • Déterminez si vous devez verrouiller vos dépendances sur une version spécifique ou effectuer un commit de votre code tiers dans le contrôle des versions. Cela peut vous aider à verrouiller votre dépendance sur une version particulière, qui est probablement considérée comme sûre. Paradoxalement, cela peut avoir un effet contre la sécurité, car vous risquez de passer à côté de mises à jour vitales de la bibliothèque.
  • Examinez la page d'accueil du projet ou la page GitHub, le cas échéant. Vérifiez 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.
  • Le code tiers qui utilise d'autres codes tiers peut présenter plus de risques qu'une bibliothèque sans dépendances. Soyez conscient de ce risque.

Accessibilité

Vous vous demandez peut-être comment les bibliothèques logicielles 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 côté client basée sur JavaScript, l'accessibilité Web est d'une importance capitale.

Une bibliothèque JavaScript côté client (ou un framework, d'ailleurs) peut améliorer ou réduire 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, vous, en tant que développeur Web, risquez de négliger une fonctionnalité aussi importante et de lancer un produit qui manque de fonctionnalités essentielles, comme la possibilité de naviguer avec le clavier.

  • Le plug-in de typographie responsive est-il compatible avec les utilisateurs qui effectuent 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 est-elle disponible pour les utilisateurs qui préfèrent les mouvements réduits ?
  • Le plug-in de carte interactive est-il compatible avec l'utilisation au clavier uniquement ?
  • La bibliothèque du lecteur audio offre-t-elle une expérience appropriée avec les lecteurs d'écran ?

Il est raisonnable de s'attendre à ce que vous, en tant que développeur Web, deviez vous impliquer dans la mesure nécessaire pour répondre à ces exigences d'accessibilité. Exemple :

  • Pour les fonctionnalités manquantes, vous pouvez les implémenter dans votre codebase, même si vous continuez à utiliser la bibliothèque en question.
  • Avec le soutien de votre employeur, vous pouvez ajouter une telle fonctionnalité manquante à la bibliothèque, si son auteur le permet.
  • Vous pouvez échanger avec l'auteur de la bibliothèque. Par exemple, ces fonctionnalités d'accessibilité spécifiques figurent-elles dans votre feuille de route ? Trouvez-vous qu'ils font partie de la bibliothèque ?
  • Pour les cas d'utilisation populaires, vous pouvez explorer d'autres options de bibliothèque plus accessibles. Elles peuvent exister, mais sont plus difficiles à trouver.
  • Dans les cas extrêmes, 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 offre une expérience d'accessibilité dégradée lors de la première utilisation et que vous devez annuler une grande partie de ce que la bibliothèque ou le framework est censé vous offrir gratuitement.

Conventions

Une bibliothèque logicielle qui utilise des conventions de codage établies est plus facile à utiliser. Si une bibliothèque utilise une convention de codage inconnue, il se peut que vous et votre équipe ayez du mal à travailler avec elle.

Si une bibliothèque ne respecte pas les conventions de codage courantes (par exemple, un guide de style commun), vous ne pouvez pas faire grand-chose pour résoudre le problème immédiatement. Toutefois, plusieurs options s'offrent à vous :

  • Veillez à faire la distinction entre le code source de la bibliothèque et l'API exposée à vous, l'utilisateur de la bibliothèque. Bien que le code source interne puisse utiliser des conventions inconnues, si l'API (la partie de la bibliothèque avec laquelle vous interagissez) utilise des conventions familières, vous n'avez peut-être pas à vous inquiéter.
  • Si l'API de la bibliothèque ne respecte pas les conventions de codage courantes, vous pouvez utiliser un modèle de conception JavaScript, comme 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 au sein de votre codebase.

Les conventions jouent un rôle important dans la facilité d'utilisation. Une bibliothèque qui inclut une API intuitive peut vous faire économiser de nombreuses heures, voire des jours de travail, par rapport à une API contre-intuitive qui nécessite de nombreuses expériences pour être comprise.

Mises à jour

Par exemple, une bibliothèque entièrement fonctionnelle qui effectue quelques calculs mathématiques peut rarement nécessiter des mises à jour. En fait, une bibliothèque dotée de fonctionnalités complètes est une trouvaille rare dans l'univers en constante évolution du développement Web. Toutefois, il arrive que vous souhaitiez que l'auteur de la bibliothèque soit réactif et prêt à apporter des mises à jour. De nouvelles recherches et découvertes peuvent révéler de meilleures façons de faire. Par conséquent, les techniques utilisées dans les bibliothèques et les frameworks sont toujours susceptibles d'évoluer.

Lorsque vous choisissez une bibliothèque ou un framework, faites attention à la façon dont les mises à jour sont traitées et gardez à l'esprit que ces 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 elles ne sont pas "publiées" ou "distribué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 logicielle logique ? Une bibliothèque devrait vous faire gagner du temps. Si vous devez modifier de manière inattendue votre code chaque fois que vous mettez à jour la version de la bibliothèque, cela peut aller à l'encontre de votre objectif initial. Les changements destructives sont parfois inévitables, mais dans un monde idéal, ces changements sont rares et ne pèsent pas sur les consommateurs des bibliothèques.
  • La bibliothèque met-elle tout en œuvre pour assurer la rétrocompatibilité ? Parfois, les mises à jour logicielles peuvent s'accompagner de modifications destructives, mais elles fournissent également une couche de rétrocompatibilité. Cela permet au client de la bibliothèque d'utiliser la dernière version de la bibliothèque en n'apportant que des modifications minimes à son code.

Licences

La licence logicielle est un aspect important de l'utilisation de bibliothèques logicielles tierces. Un auteur de bibliothèque peut attribuer une licence à sa bibliothèque. Si vous envisagez d'utiliser la bibliothèque, le choix de licence peut vous affecter.

Par exemple, une bibliothèque JavaScript peut être associée à une licence logicielle qui vous autorise à l'utiliser dans un environnement non commercial. Pour un projet personnel, il peut s'agir d'un excellent choix. Si votre projet comporte un élément commercial, vous pouvez envisager d'opter pour une licence entreprise.

En cas de doute, envisagez de demander des conseils juridiques professionnels ou de vous adresser à l'équipe juridique de votre entreprise.

Communauté

Une bibliothèque ou un framework disposant d'une grande communauté d'utilisateurs/contributeurs peut être bénéfique, 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 de bénéficier de cette fonctionnalité. Tenez compte des avantages et des inconvénients suivants de la participation à une communauté de développement :

Avantages :

  • Avec une base d'utilisateurs importante, les bugs ont peut-être plus de chances d'être repérés tôt et souvent.
  • Une vaste communauté active peut impliquer davantage de tutoriels, de guides, de vidéos et même de cours sur la bibliothèque ou le cadre en question.
  • Une grande communauté active peut offrir une assistance plus importante sur les forums et les sites Web de questions-réponses, ce qui augmente la probabilité que les questions d'assistance soient traitées.
  • Une communauté engagée peut entraîner plus de contributeurs externes à la bibliothèque ou au framework. Ils peuvent aider à proposer des fonctionnalités qui ne figurent pas dans la feuille de route de l'auteur.
  • Lorsqu'une bibliothèque ou un framework est populaire au sein d'une communauté, il est plus probable que vos pairs et collègues en aient entendu parler, voire qu'ils les connaissent.

Inconvénients :

  • Un projet avec une base d'utilisateurs importante et diversifiée peut devenir encombrant en raison 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 peut nécessiter une modération importante de la communauté.
  • Un projet qui se développe rapidement, mais qui ne dispose pas de l'assistance appropriée, peut commencer à présenter des signes d'une communauté toxique. Par exemple, les développeurs Web débutants ou juniors peuvent se sentir indésirables dans une certaine communauté en raison de la gatekeeping.

Documentation

Quelle que soit la simplicité ou la complexité d'un framework ou d'une bibliothèque JavaScript, la documentation logicielle peut toujours être utile. Même les développeurs très expérimentés utilisent la documentation plutôt que de chercher à comprendre le code eux-mêmes. La documentation précise l'API que vous devez utiliser et comment l'utiliser.

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

  • La bibliothèque inclut-elle une documentation ? Si ce n'est pas le cas, vous devrez être capable de trouver vous-même les solutions.
  • La documentation est-elle claire, facile à comprendre et sans ambiguïté ? De nombreux développeurs consacrent beaucoup de temps à la documentation. Même si cela peut sembler anodin, la clarté de la documentation textuelle peut avoir un impact important sur votre productivité.
  • La documentation est-elle entièrement générée automatiquement ? Ce type de documentation peut être plus difficile à assimiler et ne fournit pas toujours des instructions claires sur l'utilisation d'une API.
  • La documentation est-elle à jour ? La maintenance de la documentation est parfois considérée comme une réflexion après coup. Si la bibliothèque est mise à jour, mais pas la documentation, cela peut entraîner un gaspillage 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 tous des formats de documentation utiles qui peuvent vous aider à utiliser une bibliothèque ou un framework.

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

Conclusion

Il est normal de se sentir dépassé 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, mieux vous vous améliorerez. Vous pouvez vous reporter à cet article la prochaine fois que vous choisirez une bibliothèque ou un framework à utiliser. Vous pouvez utiliser les en-têtes de ce message comme checklist. 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 ?

D'autres aspects des bibliothèques et des frameworks peuvent vous intéresser, et n'ont pas été abordés en détail 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 de système de compilation ?
  • Architecture : un code propre est important, mais l'architecture globale de la bibliothèque est-elle judicieuse ?
  • Tests:le projet dispose-t-il d'une suite de tests ? Le site Web du projet utilise-t-il des badges ou des indicateurs que la suite de tests valide par rapport au dernier commit ?
  • Compatibilité:la bibliothèque fonctionne-t-elle correctement avec les autres bibliothèques et/ou frameworks que vous utilisez actuellement ?
  • Coût:combien coûte un framework ? S'agit-il d'un logiciel Open Source ou disponible à l'achat ?
  • Métriques personnalisées:elles doivent figurer tout en bas de votre liste de critères, voire être complètement ignorées. Toutefois, vous pouvez tenir compte des "votes du projet", des comptes de réseaux sociaux qui le représentent et/ou du nombre de bugs/problèmes en cours figurant sur la page du projet.