Comment importer du JavaScript et du CSS depuis un CDN public ?

Lorsque vous écrivez une application JavaScript Vanilla, vous n’êtes pas obligé d’héberger tout le code que vous utilisez sur votre propre site.

Les bibliothèques JavaScript les plus populaires sont disponibles à partir d’un réseau public de diffusion de contenu (CDN).

Cela peut simplifier le déploiement de l’application et la mise à jour des dépendances. En fait, si vous avez suivi un tutoriel JavaScript pour une bibliothèque, vous avez probablement déjà utilisé un CDN public, mais vous ne le savez peut-être pas.

Qu’est-ce qu’un CDN ?

Un CDN est un réseau de diffusion de contenu. Il s’agit de services d’hébergement de fichiers pour de multiples versions de bibliothèques communes. Ils sont généralement très performants et proposent des fichiers mis en cache en fonction de l’emplacement, de sorte que, où que se trouvent vos utilisateurs, ils reçoivent les fichiers à partir d’emplacements géographiques proches d’eux. Votre application peut ainsi être plus rapide que si vous hébergez vous-même les fichiers.

Les CDN présentent également l’avantage que si vous utilisez des bibliothèques communes à plusieurs sites, vos utilisateurs peuvent déjà avoir le fichier en cache dans leur navigateur. Cela accélère votre site car le navigateur n’a pas besoin de télécharger à nouveau la bibliothèque.

Par exemple, JQuery dispose d’un CDN JQuery officiel. Si la plupart des applications JQuery importent la bibliothèque JQuery à partir de ce CDN, les utilisateurs sont plus susceptibles d’avoir déjà JQuery dans leur cache.

cDNpilotés par npm

Toutes les bibliothèques ne disposent pas de leur propre CDN. La plupart des bibliothèques se déploient sur npmjs.com et comptent sur le programmeur pour ajouter la bibliothèque à son projet via npm au moment de la construction. npm télécharge la bibliothèque depuis un CDN et l’ajoute au projet localement.

Il n’est pas nécessaire d’utiliser npm et des processus de construction JavaScript pour profiter de l’écosystème npm. Nous pouvons utiliser un « CDN piloté par npm » comme hôte pour les bibliothèques, sans avoir à utiliser npm.

Un « CDN piloté par npm » est un CDN qui héberge le code de distribution des bibliothèques qui se déploient sur npm.

Par exemple, AG Grid, dont j’ai fait la démonstration dans mon article« Comment convertir un tableau HTML statique en une grille de données JavaScript dynamique« , se déploie sur npm mais ne dispose pas de son propre CDN. Au lieu de cela, les programmeurs peuvent ajouter une référence directe à AG Grid à partir d’un CDN comme unpkg.com.

 

les CDNpilotés par npm surveillent les versions distribuées via npm, et hébergent les versions sur leur propre site.

Voir aussi :  Comment créer une application Web de journalisation avec des événements envoyés par le serveur, RxJS et Express ?

Dans le code source de mon précédent post du freeCodeCamp, j’ai utilisé le CDN unpkg.com pour importer AG Grid dans mon code en utilisant un élément de script.

Comme pour tout code que nous copions et collons, il est important de comprendre ce qu’il fait afin de pouvoir gérer les problèmes éventuels.

Quels sont les CDN disponibles ?

Je n’ai jamais utilisé que trois CDN :

Ce sont tous des sites professionnels et bien gérés. Et la principale raison pour laquelle j’en ai choisi un plutôt qu’un autre est que le tutoriel que j’ai suivi pour la première fois pour une bibliothèque utilisait ce CDN particulier dans le code.

Savoir que plusieurs CDN sont disponibles est utile car :

  • une version particulière d’une bibliothèque que vous voulez utiliser peut ne pas se trouver sur tous les CDN
  • si un CDN commence à avoir des problèmes, vous pouvez modifier votre code pour en utiliser un autre
  • certaines bibliothèques peuvent être plus populaires sur un CDN que sur un autre et vous pouvez vouloir utiliser le CDN le plus populaire pour augmenter les chances que le code de la bibliothèque JavaScript soit mis en cache sur le navigateur de vos utilisateurs.

les CDN denpm

distribuent plus que du JavaScript
Les CDN distribuent plus que du JavaScript. Par exemple, AG Grid déploie des fichiers CSS ainsi que du JavaScript.

Ceux-ci seraient référencés à partir du CDN de manière normale en utilisant des éléments de lien.

Par exemple, AG Grid utilise deux feuilles de style.

La feuille de style structurelle fournit le CSS qui mettra en page les données sous forme de grille.

 	

La feuille de style de thème fournit l’esthétique visuelle de la grille.

 	

Ces deux fichiers CSS sont également déployés sur npmjs.com et peuvent être inclus dans notre projet depuis un CDN.

Voir aussi :  Comment utiliser le chaînage optionnel en JavaScript

Comment (et pourquoi) contrôler la version de la bibliothèque

Dans mon outil d’édition de tableaux open source, j’utilise trois bibliothèques : AG Grid, PapaParse et Faker.

Faker a récemment connu un problème avec une version récente déployée sur npm. Ainsi, si mon code avait utilisé par défaut la dernière version, mon application aurait échoué.

Heureusement, j’avais importé une version spécifique de Faker depuis unpkg. Comme vous pouvez le voir dans l’URL src ci-dessous, j’ai inclus la version 5.5.3:

 

Il y a un certain nombre d’avantages à contrôler la version :

  • vous aurez testé votre application sur une version spécifique. Si vous déployez en production et laissez la version changer à chaque nouvelle version, votre application risque de présenter progressivement des bogues ou des incompatibilités au fil du temps, car vous n’avez pas testé votre application sur la nouvelle version de la bibliothèque.
  • lors de l’utilisation de plusieurs versions de bibliothèques, les versions futures peuvent entrer en conflit les unes avec les autres, provoquant à nouveau l’échec de votre application en production et peut-être sans que vous vous en rendiez compte.

J’importe les trois bibliothèques que j’utilise à des versions spécifiques :

   

Cela me permet de contrôler les tests et je suis plus sûr que tout bogue dans l’application sera le résultat de mon codage, plutôt que d’une mise à jour d’une bibliothèque utilisée dans le projet.

Les différents CDN peuvent avoir une syntaxe différente pour contrôler les numéros de version. Mais vous pourrez voir le format à utiliser en recherchant la bibliothèque sur le CDN et en suivant la documentation fournie par chaque CDN.

Voici les listes d’AG Grid sur chacun des sites CDN :

Voir aussi :  Comment créer votre propre extension Google Chrome

Si vous suivez les liens pour les paquets AG Grid, vous verrez que chaque site a une interface légèrement différente. Mais ils permettent tous de sélectionner une version spécifique d’AG Grid et vous permettent de copier et coller l’URL à ajouter à votre fichier HTML.

Le CDN en pratique

Voici un simple fichier HTML qui rendra une grille de données à l’écran.

Je ne dois déployer que le fichier HTML, car la bibliothèque AG Grid est chargée dans le navigateur depuis le CDN.

Dans l’exemple ci-dessous, je charge la version 26.2.1 de AG Grid et les fichiers CSS depuis le CDN unpkg.com.

  
  

Les importations d’unpkg sont démontrées dans cette page html déployée.

cdns and their urls

Je pourrais facilement utiliser d’autres CDN en modifiant les éléments script et lien dans la section head de mon fichier html.

JSDelivr utilisant la version 26.2.1

Les importations de JSDelivr sont démontrées dans cette page html déployée.

CdnJS utilise la version 26.2.1. CdnJS adopte une approche légèrement différente de la dénomination des versions, il est donc utile de vérifier le menu déroulant des versions sur la liste de la grille AG cdnJS

Les importations de CdnJS sont démontrées dans cette page html déployée.

Résumé

Il n’est pas toujours nécessaire de déployer des bibliothèques JavaScript sur notre site avec nos fichiers HTML. Au lieu de cela, nous pouvons les inclure de manière à ce qu’elles soient livrées par un réseau de diffusion de contenu.

De nombreux didacticiels que nous suivons montrent des exemples de cette méthode.

Si nous importons du JavaScript ou du CSS à partir d’un CDN, nous devons ajouter le numéro de version de la bibliothèque que nous utilisons afin de protéger notre exemple déployé de problèmes futurs en cas de mise à jour de la bibliothèque.

Une bonne habitude à prendre est d’ajouter la version chaque fois que nous suivons un tutoriel. Si nous remarquons que les fichiers inclus dans le CDN n’ont pas de version, cela vaut la peine de visiter le CDN pour savoir quelle est la version actuelle de la bibliothèque. Vous pouvez ensuite ajouter ce numéro de version à votre source.

Ce sont de petits ajustements comme celui-ci qui rendront les projets de portfolio que vous créerez sur Github un peu plus professionnels.