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 qui convient le mieux au problème commercial que vous essayez de résoudre. Il est essentiel de comprendre les avantages et les inconvénients de chaque bibliothèque JavaScript pour faire votre choix parmi les nombreuses options 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 les "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 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 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 de l'application importe une méthode 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 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 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 d'animation, le code source d'une bibliothèque peut vous expliquer leur fonctionnement.

Certaines bibliothèques sont soutenues 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 sans frais (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 soumise à des licences légales spécifiques qui la rendent adaptée ou non à 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 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. 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 à 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 excelle. Si vous décidez de faire un don, vous devrez peut-être d'abord vous renseigner auprès de votre employeur.
  • Utilisez un outil de suivi automatique des bundles, tel que bundlesize, pour surveiller les mises à jour inattendues d'une bibliothèque. Il est courant qu'une bibliothèque JavaScript s'agrandisse au fil du temps. L'ajout de fonctionnalités, la correction de bugs, les cas particuliers, etc. peuvent tous augmenter la taille de 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 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 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, examinez 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 en termes de sécurité, car vous risquez de manquer des mises à jour essentielles de la bibliothèque.
  • Parcourez 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 en quoi 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, 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'animation est-elle compatible avec les utilisateurs qui préfèrent un mouvement réduit ?
  • 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 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 courants, vous pouvez explorer d'autres options de bibliothèque plus accessibles. Elles peuvent exister, mais sont plus difficiles à trouver.
  • Dans le pire des cas, vous devrez peut-être abandonner une bibliothèque entièrement 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 sans frais.

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 ensuite proposer une API plus intuitive aux autres parties du code 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 complète est une rareté dans le monde 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 procéder. 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, tenez compte de la manière dont les mises à jour sont gérées et sachez 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 logicielles approprié ? Une bibliothèque doit 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 vous autorisant à 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 :

  • Une base d'utilisateurs importante peut augmenter les chances de détecter les bugs rapidement et fréquemment.
  • 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 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 dans 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 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 de communauté toxique. Par exemple, les développeurs Web débutants ou juniors peuvent se sentir mal accueillis 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 précise l'API que vous devez utiliser et comment 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 framework, vous pouvez vous poser les questions suivantes:

  • 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. 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:

  • Extensibilité: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 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 transmet sur le dernier commit ?
  • Compatibilité:la bibliothèque fonctionne-t-elle correctement avec les autres bibliothèques et/ou frameworks que vous utilisez actuellement ?
  • Coût:quel est le coût d'un framework ? S'agit-il d'un logiciel Open Source ou disponible à l'achat ?
  • Métriques de vanité:elles doivent figurer en bas de votre liste de critères, voire être complètement ignorées. Toutefois, vous pouvez prendre en compte les "votes" du projet, les comptes de réseaux sociaux qui le représentent et/ou le nombre de bugs/problèmes ouverts sur la page du projet.