La Cascade

Un peu de tout sur CSS, HTML, SVG et JS,traduit du web anglophone
Rechercher

NPM, qu'est-ce que Node ?

par Josh Collinsworth, 28 janvier 2022, javascript, article original paru le 20 janvier 2022 dans CSS-Tricks

Le 'n' de npm est Node. Node a commencé comme un moyen d'exécuter JavaScript en dehors du navigateur.


Voici ce que vous devez savoir sur Node.js (ou simplement Node) et sur son rapport avec npm dès le départ :

  • Node est du JavaScript, mais en tant que langage côté serveur.
  • Cela est possible grâce à V8, le moteur JavaScript de Chromium, qui peut fonctionner seul, en dehors des limites du navigateur.
  • Node et le JavaScript basé sur le navigateur peuvent être très différents, et avoir des capacités différentes, bien que tous deux soient JavaScript à leur base.
  • Vous n'avez pas besoin de connaître Node pour utiliser npm.

Comme vous le savez peut-être maintenant, npm est l'abréviation de Node Package Manager (même si le site officiel de npm affiche des noms alternatifs amusants dans son en-tête à chaque chargement de page, comme "Ninja Pumpkin Mutants").

La chose essentielle à comprendre tout de suite est la suivante : "Node" et "Package Manager" sont les deux grandes pièces distinctes qui se combinent pour former npm.

Nous couvrirons ce qu'est un gestionnaire de paquets et pourquoi vous pourriez envisager d'en utiliser un lorsque nous aborderons le prochain chapitre de ce guide npm. Pour l'instant, concentrons-nous sur la compréhension de ce qu'est Node, car il s'agit d'un élément clé pour comprendre le développement Web moderne.

Table des matières (rappel)

Node, c'est JavaScript, mais sans le navigateur

Vous connaissez probablement JavaScript principalement comme un langage qui s'exécute dans le navigateur, similaire à HTML et CSS. Oui, chacun de ces langages possède des abstractions et des supersets (comme HAML pour HTML, Sass pour CSS, et TypeScript pour JavaScript, par exemple), ainsi que des compilateurs et des transpilateurs et toutes sortes de choses qui les transforment en telle ou telle forme. Mais en fin de compte, ce que ces outils génèrent, c'est du code vanille (c'est-à-dire pur) dans la syntaxe correcte, comme si les abstractions n'avaient jamais été utilisées, à exécuter dans le navigateur et dans le navigateur seul.

C'est la chose qui m'a pris le plus de temps à comprendre, et qui, honnêtement, pourrait être un mémo manqué encore plus grand que toute l'histoire de npm. JavaScript n'a plus besoin d'un navigateur pour fonctionner. Ainsi, vous me verrez parfois faire référence à Node JavaScript lorsque je ferai la distinction entre ce dernier et le JavaScript "basé sur un navigateur".

Langages côté serveur ou côté client

À ce stade, je pense qu'il est utile de prendre un moment pour explorer la distinction entre les langages côté client (HTML, CSS, JavaScript) et les langages côté serveur (essentiellement tous les autres). Je ne suppose pas que vous ayez une quelconque expérience des langages côté serveur, comme PHP, Ruby ou Python, mais si le concept des langages côté serveur est entièrement nouveau pour vous, il peut être utile de lire ce qu'ils sont (NdT: dans MDN en français). (Pour résumer : ce sont des langages de code qui s'exécutent purement sur un serveur au lieu du navigateur, et qui ont généralement des capacités beaucoup plus larges et plus puissantes).

Ceci est pertinent parce qu'il y a plusieurs années, vers 2009, il y avait des gens très intelligents qui aimaient vraiment JavaScript. En particulier, ils aimaient la rapidité de JavaScript (surtout par rapport aux langages côté serveur dominants à l'époque, notamment PHP et Ruby), et ils voulaient que JavaScript soit présent partout, pas seulement dans un navigateur.

Ryan Dahl est la figure la plus marquante parmi eux, et on lui attribue l'invention de Node (et plus récemment, Deno, qui est une anagramme de Node). C'est une chose amusante à savoir, mais autrement pas strictement pertinente à ce sujet.

Comment fonctionne Node

Ce qui est pertinent, cependant, c'est que Node est essentiellement JavaScript en tant que langage côté serveur qui fonctionne en dehors du navigateur.

Comment est-ce possible ? Sous le capot, chaque navigateur possède son propre moteur JavaScript individuel. Il s'agit de la partie du navigateur qui exécute réellement JavaScript. Oui, il s'agit apparemment d'une partie distincte du navigateur, qui ne fait pas partie des mêmes éléments que le HTML et le CSS, ce qui est logique si l'on considère que nous avons des API littérales entre le document et JavaScript. D'ailleurs, même le concept de DOM est plus logique si l'on considère que le département qui gère JavaScript est un bureau improvisé au bout du couloir du département HTML.

Le moteur JavaScript des navigateurs basés sur Chromium s'appelle V8, vraisemblablement d'après un type spécifique de moteur de voiture (et non la "boisson végétale" faite principalement de jus de tomate). V8 est de loin le moteur JavaScript le plus populaire. Grâce aux efforts de normalisation de l'ECMAScript au cours des 15 dernières années environ, il n'y a plus vraiment de différences majeures entre les moteurs JavaScript en ce qui concerne les navigateurs. Le moteur utilisé dans Chrome ressemble beaucoup à celui de Firefox, qui ressemble beaucoup à Safari, et ainsi de suite. La popularité de V8 de nos jours a moins à voir avec ses distinctions, et plus à voir avec l'omniprésence auto-entretenue de Chrome.

(Note annexe : le moteur JavaScript de Firefox s'appelle SpiderMonkey. Ce n'est pas particulièrement pertinent, mais c'est une preuve supplémentaire que Firefox est le plus cool).

Pourquoi cela est-il important ? Eh bien, il s'avère que vous pouvez retirer le moteur JavaScript d'un navigateur et, avec quelques modifications, le faire fonctionner seul - un peu comme si vous décidiez de retirer la stéréo d'une voiture, de la bricoler un peu et d'en faire une chaîne stéréo pour votre maison. V8 (et, vraisemblablement, la stéréo d'une voiture) peut parfaitement fonctionner en tant qu'unité autonome dans n'importe quel environnement.

En d'autres termes : V8 permet d'exécuter JavaScript n'importe où. C'est pourquoi nous avons le JavaScript "Node" et le JavaScript "basé sur le navigateur".

Node est presque (mais pas exactement) JavaScript

Pour récapituler : JavaScript est maintenant un langage côté serveur ! Il s'appelle Node, et cela pourrait signifier que vous n'avez même pas besoin d'apprendre quoi que ce soit sur les autres langages côté serveur. Nous sommes des développeurs frontaux, et nous avons des super-pouvoirs maintenant.

Cela dit, Node et le JavaScript que vous avez l'habitude d'exécuter dans le navigateur sont à la fois similaires et très différents l'un de l'autre.

Au risque de nous perdre dans les méandres de l'histoire : bien que tous deux soient JavaScript à la base, et que le langage et la syntaxe soient les mêmes, de nombreux éléments de base de JavaScript dans le navigateur (comme la fenêtre ou le document, et même l'alerte) ne sont pas présents dans un environnement Node purement côté serveur. Il n'y a pas de window, bien sûr, lorsque le langage s'exécute tout seul, et non dans un navigateur. Les nouveaux développeurs JavaScript Node sont souvent surpris d'apprendre que même fetch est en fait une API de navigateur, et non du JavaScript "pur".

N'ayez crainte, cependant. console.log est toujours votre meilleur ami, et il y a beaucoup de nouvelles caractéristiques spécifiques à l'environnement de Node JavaScript qui diffèrent de la mise en œuvre de JavaScript par le navigateur, comme l'objet processus, qui contient tous les détails sur les processus en cours d'exécution.

Au fil des ans, Node et son écosystème ont souvent, par nécessité, évolué dans une direction très différente de celle du JavaScript basé sur le navigateur. (Un exemple évident : la syntaxe des importations entre les deux a été différente pendant des années, et ne commence que maintenant à fusionner à nouveau. Nous en parlerons un peu plus dans le dernier chapitre).

Node a longtemps eu le privilège de pouvoir évoluer beaucoup plus rapidement que les navigateurs lorsqu'il s'agit d'acquérir de nouvelles fonctionnalités, et a également dû faire face à ses propres problèmes. Il a commencé à alimenter les applications côté serveur de la même manière que Ruby et PHP l'ont fait pendant des années, même si les navigateurs essayaient encore de se mettre d'accord sur les normes. Par conséquent, Node JavaScript et JavaScript basé sur le navigateur ressemblent plus à des cousins qu'à des clones.

Voici ce que je pense être une analogie juste pour expliquer les différences entre les deux cousins JavaScript : considérez deux instruments de musique similaires, disons une basse droite et une guitare basse électrique moderne. Les deux instruments sont accordés de la même manière et jouent les mêmes notes ; si vous connaissez l'un, à bien des égards, vous connaissez en quelque sorte l'autre. Mais si vous trouverez qu'il est beaucoup plus facile d'apprendre l'un après avoir appris l'autre, jouer du nouvel instrument sera très différent de ce à quoi vous êtes habitué.

un violoncelle à côté d'une basse électrique
La même chose, mais différent (Photos: Wikimedia Commons, Unplash).

De même, alors qu'un développeur peut écrire un type de JavaScript et qu'un second développeur écrit dans un autre type de JavaScript, il est peu probable que leurs tâches se ressemblent.

Node est JavaScript, avec les capacités des autres langages côté serveur mentionnés précédemment - des choses comme la lecture et l'écriture du système de fichiers, l'accès aux API de niveau système, la messagerie, la capacité d'écouter et de répondre aux demandes, les tâches planifiées... la liste est longue.

Je n'en dirai pas plus ici, mais sachez simplement que si les deux sont des JavaScript en fin de compte, ils fonctionnent dans des environnements différents et sont chacun capable de faire certaines choses que l'autre ne peut pas faire. Même si vous avez déjà écrit du JavaScript par navigateur, Node vous semblera probablement un peu étranger au-delà de la syntaxe de base, et sera souvent utilisé de manière très différente.

Exécuter Node localement

Comme c'est généralement le cas avec les langages côté serveur, vous devez installer Node avant de pouvoir l'utiliser.

Node est généralement installé aux côtés de npm, ensemble, puisque la partie gestionnaire de paquets a besoin de Node, et que la partie Node est plus utile avec un gestionnaire de paquets. (On pourrait dire qu'ils sont un ensemble de paquets. Non, je ne m'excuserai pas pour cette blague. Je suis un père, après tout).

Je tiens à souligner à ce stade que vous n'avez pas besoin de connaître quoi que ce soit à propos de Node pour utiliser npm. Donc, même si je suis sur le point de couvrir quelques exemples de Node ici, veuillez considérer toute cette section comme quelque chose d'agréable à savoir, mais non essentiel à cette fin. Je pense qu'il est toujours utile d'avoir une idée un peu plus précise de la façon dont Node fonctionne, juste dans le but de brosser un tableau plus complet.

Nous couvrirons l'installation de Node et de npm dans un prochain chapitre de ce guide. Donc, si vous ne les avez pas encore installés, vous pouvez soit jeter un coup d'œil sur cette partie, soit revenir ici lorsque vous les aurez prêts. Dans tous les cas, cela ne sera pas crucial pour suivre ce guide npm.

Si vous souhaitez l'essayer, vous pouvez créer un nouveau fichier test.js et y placer du JavaScript générique. Quelque chose d'artificiel comme le code suivant qui enregistre un certain contenu dans la console devrait faire l'affaire :

console.log('Regarde, ma, des mains Node!')

const oneThroughFive = [1, 2, 3, 4, 5]

oneThroughFive.forEach((nombre) => {
  console.log(nombre)
})

Disons que vous enregistrez ce code, puis ouvrez la ligne de commande dans une fenêtre de terminal, naviguez jusqu'à l'endroit où se trouve le fichier (en utilisant cd, qui signifie "changer de répertoire"), et exécutez node test.js pour obtenir la sortie suivante :

Look, ma, Node hands!
1
2
3
4
5

Vous pouvez également entrer node tout seul (sans nom de fichier ensuite) pour ouvrir un terminal interactif où vous pouvez exécuter du JavaScript Node arbitraire. Si vous avez déjà ouvert la console dans les DevTools de votre navigateur pour taper du code, c'est exactement la même chose, mais en ligne de commande avec Node à la place.

Essayez-le si vous le souhaitez, en supposant que vous avez installé Node. Mais encore une fois, tout ceci n'est qu'une illustration et n'est pas nécessaire pour utiliser npm.

commandes JavaScript dans la console

La suite

Tout ce que nous avons couvert dans ce chapitre est ingénieux et permet, nous l'espérons, de vous montrer (aussi simplement que cela puisse paraître) la façon dont Node fonctionne. Rappelez-vous, bien que nous n'ayons pas couvert d'exemple spécifique, Node est capable de faire tout ce qu'un langage côté serveur peut faire. Il n'est, je l'espère, pas trop difficile d'imaginer comment l'exécution de JavaScript pour faire pratiquement tout ce à quoi vous pouvez penser au niveau du système ou même sur un serveur distant est très attrayant et avantageux.

Le concept de Node a commencé comme un moyen d'exécuter JavaScript en dehors du navigateur. En tant que tel, nous avons des paquets de scripts basés sur Node qui sont utilisés pour nous aider avec le développement front-end. Alors comment installer ces paquets et s'assurer qu'ils ne sont pas seulement mis à jour mais qu'ils peuvent être désinstallés ? Cette question est contenue dans les deux dernières lettres de l'abréviation npm : gestionnaire de paquets (package manager).

En d'autres termes, npm est un outil qui gère les paquets écrits en JavaScript Node. Qu'est-ce qu'un gestionnaire de paquets exactement et comment npm peut-il être considéré comme tel ? C'est ce que nous allons voir dans notre guide npm.

Autres ressources externes

Articles de Josh Collinsworth traduits dans La Cascade

Voir la page de Josh Collinsworth et la liste de ses articles dans La Cascade.
Article original paru le 20 janvier 2022 dans CSS-Tricks
Traduit avec l'aimable autorisation de CSS-Tricks et de Josh Collinsworth.
Copyright CSS-Tricks © 2022