L'une des raisons pour lesquelles cette nouvelle ère de développement front-end, riche en outils, est si difficile à comprendre au début, c'est que nous appelons souvent les choses par un nom unique, alors qu'elles sont composées de plusieurs éléments interconnectés. Il en va ainsi pour npm et l'écosystème qui l'entoure.

Pensons par exemple à la façon dont nous nous référons avec désinvolture à "l'Internet", même si le Web lui-même n'est pas une chose unique et unifiée, mais une collection de protocoles, de DNS, de serveurs, de navigateurs, de réseaux, de demandes et de réponses... et bien d'autres choses assemblées au cours d'années d'itérations. Le navigateur lui-même est une machine composée de nombreuses pièces.

Table des matières (rappel)

npm est un ensemble de technologies

De même, ce que nous appelons généralement "npm" (oui, tout en minuscules) et "back-of-the-front-end" en particulier est un nom unique pour une collection de nombreuses technologies et systèmes individuels différents ! une sorte de machine de Rube Goldberg pour générer du code convivial pour le navigateur.

J'ai déjà mentionné la ligne de commande ! c'est une partie importante de l'écosystème car c'est la façon dont nous interagissons avec lui. Mais nous en reparlerons dans le prochain chapitre.

Et puis il y a npm, qui fait partie d'une catégorie connue sous le nom de logiciel de "gestion de paquets". Nous en parlerons également. En fait, vous me verrez probablement faire référence à npm en tant que gestionnaire de paquets tout au long de ce guide.

Et enfin, il y a Node lui-même, qui est si difficile à expliquer succinctement que je le décris souvent en paraphrasant Douglas Adams : c'est un langage de programmation qui ressemble presque — mais pas tout à fait — à JavaScript.

npm gère les outils de projet

Pour brouiller encore un peu les pistes, de nombreux projets pour lesquels vous tapez npm install dans la ligne de commande peuvent être livrés avec des outils préinstallés pour vous aider à faire une grande variété de choses dans votre projet, comme retraiter votre code (par exemple, transformer le code Sass en CSS). Il existe de nombreux projets tout-en-un, préconfigurés, qui n'attendent que votre installation et votre démarrage (Create React App, Next, Nuxt et SvelteKit, pour n'en citer que quelques-uns). C'est pratique quand c'est bien fait, bien sûr, mais cela a aussi ajouté de la complexité — ce qui signifie ajouter encore d'autres noms à notre liste de choses de l'arrière du front.

Cette liste comprend souvent des outils tels que Babel (pour la compilation de JavaScript), Sass (pour la compilation de CSS), webpack (pour le regroupement des ressources), Vite (pour les serveurs de développement et autres outils), PostCSS (pour transformer une syntaxe en une autre) ! Autoprefixer (qui peut être un plugin PostCSS pour les préfixes des fournisseurs de CSS) ! TypeScript (pour une syntaxe JavaScript supplémentaire) ! ESlint (pour vérifier la qualité du code) ! Prettier (pour le formatage du code), et des bibliothèques de test comme Jest ou Cypress.

Toutes ces choses (et bien d'autres) entrent dans cette vaste catégorie générale d'outils qui sont souvent fournis avec les projets installés par npm — ou qui peuvent être installés et utilisés via npm — mais qui ne font pas réellement partie de npm lui-même. Ce ne sont que des exemples d'outils modernes qui nous aident à faire de belles choses avec notre code, et je les mentionne ici uniquement parce que cela vaut la peine de noter la distinction, pour avoir une idée de l'endroit où se trouvent les limites dans ce vaste et nouveau monde.

Et d'ailleurs, si vous ne savez pas ce que sont la plupart (ou aucun) des outils mentionnés ci-dessus, ce n'est pas grave. Peut-être ne les avez-vous pas encore rencontrés, ou peut-être avez-vous travaillé, sans en connaître le nom, sur un projet où ils étaient installés. Quoi qu'il en soit, tout ceci n'est qu'un contexte supplémentaire.

Faisons une pause ici

Si vous vous sentez déjà un peu dépassé à ce stade, ne vous inquiétez pas. Ce que je veux que vous reteniez de la lecture de ce chapitre d'intro, c'est que ce que nous appelons "npm" (ou peut-être plus simplement "tous ces trucs en ligne de commande et en arrière-plan") n'est pas vraiment une chose, mais un ensemble de choses qui fonctionnent ensemble pour nous faciliter le développement.

Ah, et oui : toute cette complexité peut sembler intimidante au départ, mais elle améliore réellement les choses. Je vous le promets.

Alors que le front-end semble évoluer très rapidement, non, vous n'avez pas été laissé derrière. Vous avez peut-être juste un peu de formation continue à rattraper.