Npm vs Yarn

Npm est actuellement le gestionnaire de paquets le plus utilisé dans le monde Javascript. Fin 2016, son jeune concurrent Yarn fait son apparition et gagne très vite en popularité. Seulement une semaine après sa sortie, le projet recueille plus de 15 000 stars sur Github et forme une communauté déjà très active.

Yarn est issue d’une collaboration entre plusieurs équipes avec notamment des développeurs de Facebook et Google. Ce dernier a été développé dans le but de résoudre un certain nombre de problèmes que ses auteurs eux-mêmes rencontraient en utilisant Npm :

• Npm n’était pas assez rapide.
• Npm présentait des problèmes de cohérence lors de l’installation des dépendances sur des machines différentes.

Avant d’aller plus loin, voici quelques informations importantes :

• Yarn utilise les mêmes registres que Npm pour télécharger les données.
• Yarn manipule le fichier de dépendances package.json exactement de la même manière que Npm. Par conséquent, il est parfaitement possible d’utiliser Yarn au sein d’un projet dont les dépendances ont toujours été installées avec Npm, que ce soit pour le remplacer complètement ou utiliser les deux outils en parallèle.

Dans cet article, nous allons mettre en évidence les principales différences entre Npm et Yarn.

C’est rapide… Très rapide…

Temps d’installation des dépendances de react native (v0.39.0) sur MacBook Pro dans différents scénarios :

 
On remarque que Yarn a été 3 fois plus rapide que Npm pour télécharger les dépendances. Cela ne signifie pas que Yarn sera constamment 3 fois plus rapide que Npm.
La raison de cette rapidité est simple. Yarn télécharge les paquets en parallèle, tandis que Npm les télécharge les uns à la suite des autres. Ainsi, plus un projet possède de dépendances, plus Yarn se démarquera en terme de rapidité.
Yarn utilise également le service Cloudflare, permettant d’optimiser la diffusion des contenus, et donc de rendre le gestionnaire de paquets plus rapide de manière globale.

On verrouille tout !

Le problème de Npm

Lors de l’installation d’un paquet avec Npm, ce dernier génère par défaut une nouvelle entrée dans la section dépendance du package.json :

node : “^6.7.0”

L’opérateur ^ permet l’installation de la version la plus récente comprise entre 6.7.0 et 7.0.0 (7.0.0  étant exclu) lors de la prochaine exécution de la commande npm install.

En d’autres termes, cette syntaxe autorise la mise à jour du numéro de version minor et patch, permettant à la dépendance de rester rétrocompatible, tout en autorisant l’ajout de nouvelles fonctionnalités et la correction de bugs.
Dans un monde parfait, tous les auteurs des paquets Npm respectent la norme semver permettant au système de versionning de Npm de fonctionner correctement. Ce n’est malheureusement pas le cas !

Certains développeurs ne respectent pas cette norme, laissant apparaître des “breaking changes” sur la mise à jour d’une version minor ou patch d’un module, mettant en péril sa rétrocompatibilité.

La solution de Yarn

Lorsqu’une dépendance est installée par Yarn, ce dernier génère un fichier yarn.lock permettant de verrouiller toute les dépendances sur une version précise. Grâce à ce lockfile, tous les membres contribuant à un projet posséderont le même jeu de dépendances. Ainsi on évite les phrases du type : “Bah je comprends pas, moi ça marche sur ma machine !”.
Il est bien évidemment impératif de commit le yarn.lock sur nos services d’hébergement si l’on veut profiter de ce système.
Npm présente une fonctionnalité similaire avec la commande shrinkwrap, cependant ce n’est pas un comportement par défaut de Npm, et peu de développeurs l’utilisent.

Les petits + de Yarn

Le mode offline

Yarn offre la possibilité d’installer un paquet malgré l’absence de connexion internet, à condition qu’il ait déjà été installé sur la machine auparavant.

Yarn why

Au fur et à mesure de l’avancement d’un projet, nous sommes souvent amenés à devoir installer de nouvelles dépendances, et le dossier node_modules devient rapidement un énorme fouillis.
Yarn offre la possibilité de comprendre rapidement la provenance de n’importe quelle dépendance présente dans node_modules.

$ yarn why clean-css
yarn why v0.21.3
[1/4] ????  Why do we have the module "clean-css"...?
[2/4] ????  Initialising dependency graph...
[3/4] ????  Finding dependency...
[4/4] ????  Calculating file sizes...
info This module exists because "@ionic/app-scripts" depends on it.
info Disk size without dependencies: "500kB"
info Disk size with unique dependencies: "744kB"
info Disk size with transitive dependencies: "768kB"
info Amount of shared dependencies: 3
✨  Done in 1.20s.

Yarn upgrade interactive

Yarn permet également de mettre à jour une sélection de dépendances à travers une interface simple et clair.

$ yarn upgrade-interactive
yarn upgrade-interactive v0.21.3
? Choose which packages to update. (Press <space> to select, <a> to toggle all, <i> to inverse selection)
 dependencies
 ◯ @angular/core                      2.1.1          ❯  2.4.9    https://github.com/angular/angular#readme
 ◯ @angular/platform-server           2.1.1          ❯  2.4.9    https://github.com/angular/angular#readme
 ◯ @ionic/storage                     1.1.6          ❯  2.0.0    https://github.com/driftyco/ionic-storage#readme
 ◯ angular2-chartist                  0.10.1         ❯  0.12.2   https://github.com/willsoto/angular2-chartist#readme

Checksum

Yarn utilise un checksum pour vérifier l’intégrité de chaque paquet installé avant que son code soit exécuté.

Npm vs Yarn : les commandes

Voici un comparatif des commandes les plus utilisées avec Yarn et Npm :

 
Lors d’un yarn add <package> ou yarn remove <package>, la modification est directement sauvegardée dans le package.json. C’est pourquoi l’option --save n’est pas présente dans Yarn.

Conclusion

Yarn marque beaucoup de points et se présente comme une version évoluée de Npm notamment en corrigeant la plupart de ses défauts. Il arrive tout de même que Yarn présente quelques bugs sur certains scénarios d’installation. Cependant, sa communauté importante contribue activement pour corriger ces problèmes et rendre le projet plus performant.
On peut également espérer que dans un futur proche, Npm puisse directement intégrer les fonctionnalités et les performances de Yarn.

En apprendre plus :

• Formation Initiation Web : Coder le web
• Formation Choisir son framework JavaScript : Savoir faire le bon choix dans le bon contexte