Choisir une bibliothèque ou un framework JavaScript

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. Comprendre les avantages et les inconvénients dans différentes situations est essentiel pour examiner le grand nombre de bibliothèques JavaScript disponibles.

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 :

  • Dans le cas d'une bibliothèque, le code de votre 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 d'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 quand l'appeler.

Dans l'exemple suivant, le code d'application importe une méthode à partir de la bibliothèque lodash. Une fois 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 en majuscules 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 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 contrôle beaucoup plus le code que vous écrivez. Dans certains cas, il contrôle même le moment où votre code doit être exécuté.

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 éliminer la logique complexe, comme la manipulation des dates 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, l'utilisation d'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 gagner beaucoup de temps et d'argent.
  • Une bibliothèque peut être largement utilisée au sein de la communauté et peut ê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. Toutefois, 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 peut ê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 l'animation. 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 dans une taille plus raisonnable que d'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 un retard d'une seconde au temps de chargement de votre page (n'oubliez pas de réguler 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 excelle. 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 s'agrandisse 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 là que l'automatisation est utile.
  • Examinez vos besoins en matière de bibliothèque et déterminez si la plate-forme Web offre la même fonctionnalité de manière native. 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 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 NPM. 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'utiliser d'autres services qui analysent les failles de votre code, comme 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 à une version spécifique ou enregistrer votre code tiers dans votre 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. Ironiquement, cela peut avoir un effet inverse 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. 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. Tenez compte 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 (ou un framework, d'ailleurs) côté client basée sur JavaScript 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, vous pouvez, en tant que développeur Web, négliger une fonctionnalité essentielle et lancer un produit qui ne propose pas certaines fonctionnalités essentielles, comme le curseur permettant de naviguer à l'aide du 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 Maps interactif ne prend-il pas en charge l'utilisation du 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 tout en continuant à utiliser la bibliothèque en question.
  • Avec l'aide de votre employeur, vous pouvez ajouter une fonctionnalité manquante à la bibliothèque, si l'auteur de la bibliothèque 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 ? Êtes-vous d\'accord qu\'ils appartiennent à 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 à bien différencier le code source de la bibliothèque de 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 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 ensuite proposer une API plus intuitive aux autres parties du code de votre codebase.

Les conventions jouent un rôle important en termes de facilité d’utilisation. Une bibliothèque incluant une API intuitive peut faire gagner de nombreuses heures, voire plusieurs jours, à des employés, par rapport à une API contre-intuitive qui nécessite beaucoup de tests pour être résolue.

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 complète est une rareté dans le monde en constante évolution du développement Web. Cependant, il arrive que vous souhaitiez que l'auteur de la bibliothèque soit réactif et disposé à 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 votre code de manière inattendue chaque fois que vous mettez à jour la version de la bibliothèque, cela peut annuler l'objectif d'utiliser cette bibliothèque. Les modifications non compatibles sont parfois inévitables, mais dans un monde idéal, elles sont peu fréquentes et ne sont pas imposées aux utilisateurs de la bibliothèque.
  • La bibliothèque met-elle tout en œuvre pour assurer la rétrocompatibilité ? Il peut arriver que les mises à jour logicielles comportent des modifications non compatibles avec les versions antérieures, mais qu'elles fournissent également une couche 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 apportées à 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 grande communauté active peut signifier plus de tutoriels, de guides, de vidéos et même de cours sur la bibliothèque ou le framework 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 contribuer à proposer des fonctionnalités qui ne figurent autrement pas sur 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 encombrantes 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 forte modération de la communauté.
  • Un projet qui se développe rapidement, mais qui ne dispose pas du 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 indésirables dans une certaine communauté en raison de la gatekeeping.

Documentation

Quelle que soit 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 de comprendre le code eux-mêmes. La documentation clarifie l'API à utiliser, ainsi que la manière dont vous devez l'utiliser.

La documentation peut même fournir des exemples de code pour vous aider à vous lancer 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 à l'aise pour trouver des solutions 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é 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, plus vous devenez performant. Vous pouvez vous reporter à cet article la prochaine fois que vous choisirez une bibliothèque ou un framework à utiliser. Vous pouvez utiliser les titres de cet article 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 ou 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 bien avec les autres bibliothèques et/ou frameworks que vous utilisez actuellement ?
  • Coût : quel est le coût d'un framework ? Est-elle 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.