Yarn, le nouveau package manager concurrent de NPM ?

Partager surShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someonePrint this page

Yarn vs NPM

Yarn, le dernier outil à la mode côté front-end.

Bref Historique

Depuis longtemps dans le développement Web front-end, la gestion des librairies externes était une chose longue et fastidieuse. C’était sans compter l’arrivée de Yarn.

En effet, devoir, pour de nombreuses web-apps/sites web, rappatrier une à une des librairies externes JavaScript type jQuery était un travail long et redondant.

Une première solution s’étant offerte au développeurs front-end: le CDN (Content Delivery Network).

Le CDN permet à quiconque, de charger une librairie JavaScript, fourni et mis en cache au près d’un serveur, le principe du CDN ? Obtenir la version en cache de votre librairie le plus rapidement possible en fonction de l’endroit où vous vous connecter.

Exemple:

Je suis à Lisbonnes, je souhaite accèder à MondayGeek.com, un appel est effectué a un des nombreux CDN jQuery, https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js , le serveur qui me retourne la version en cache de jQuery est le plus proche de moi (je récupère jQuery sur un serveur Espagnol ou Portugais, pas sur un serveur Russe ou Indien, afin de réduire le temps de chargement de ma librairie)

Plus de détails concernant le fonctionnement et l’utilité des CDN, ici.

 

Mais depuis l’arrivée des gestionnaires de paquets, tout ça c’est terminé

Si je vous dis « Bower » ou encore, « NPM« , ça vous parle ?

Ce sont tous deux de petites briques logicielles utilisées par tout bon développeur front-end en 2016 qui permettent simplement d’ installer, dés-installer, mettre à jour des librairies utilisées dans nos web-apps/sites web. on appel ces logiciels des gestionnaires de paquets ou plus couramment des packages managers.

Le tout de manière simple et automatisé via une interface en ligne de commande, disponible depuis le Terminal.

 

NPM, la référence des « packages managers » front-end

NPM Logo

Apparu avec NodeJs, NPM est rapidement devenu la référence en terme de package managers front-end, c’est aussi le premier (fourni de base avec toute installation de NodeJs).

Les avantages de NPM ont séduit beaucoup de développeurs:

  • Installation/Désintallation des librairies
  • Gestion de version des librairies et maintient à jour automatique
  • Publication de ces propres packages à la communauté

Cependant quelques éléments ont plus récemment froissés la communauté NPM:

  • Problème de performances (une installation NPM d’un projet d’ampleur peut prendre un certain temps)
  • Problème de dépendances (de plus en plus de paquets dépendent de paquets, qui dépendent eux mêmes de paquets, … Vous avez cerné le problème. Trop de dépendances = problème d’intégrité, si une dépendance n’est plus maintenant ou retirée de NPM, toutes les autres librairies dépendantes de ce paquets sont impactées et par conséquent, inutilisables. On a récemment vu ce problème avec le « NPM is Broken« ),

 

Qu’est-ce que Yarn et pourquoi l’utiliser ?

Yarn Logo

Yarn est une alternative à NPM et son système de gestion de dépendances/paquets.

Si vous êtes développeur JavaScript vous avez surement entendu parler de Yarn.

Développé par les ingénieurs de Facebook Exponent, Google, et Tilde ayant travaillés ensemble afin de construire une alternative au fameux package manager de Node.js. — Annonce officielle de Yarn par l’équipe Facebook

A l’origine, Yarn à été développé dans le but de résoudre des problèmes fondamentaux et inhérents à NPM en apportant 3 solutions:

 

1. Ultra Rapidité

Yarn est 2 à 7X plus rapide que NPM. Et c’est notamment grâce à son système de cache (Warm Cache/Cold Cache) très performant.

Le principe est simple: dès que Yarn installe un paquet, il le met automatiquement en cache.

Ce qui fait que la prochaine fois que Yarn repère l’installation de cette librairie dans un de nos projet futur, Yarn va tout d’abord regarder dans son cache avant d’aller éventuellement regarder sur Internet pour récupérer la librairie en question. Tout est là.

D’un point de vue plus technique, il ne faut pas oublier de signaler que Yarn permet un téléchargement en parallèles des librairies, ce qui favorise une meilleure utilisation des ressources système (téléchargement multi-thread).

2. Sécurité

A chaque fois qu’un paquet est installé et sur le point d’être exécuté, Yarn vérifie l’intégrité de ce dernier grâce à un checksum. Il l’utilise notamment pour vérifier que le paquet à bien été mis convenablement en cache.

En cas de checksum invalide, Yarn re-télécharge le paquet depuis la source d’origine.

3. Fiabilité

Yarn utilise un algorythme déterministe couplé à un Lockfile ( yarn.lock) qui va garder en mémoire la version exact du paquet installé dans le dossier « node_modules » ) afin de garantir qu’une installation de dépendances sur un système fonctionnera exactement de la même manière sur un autre système.

Bonus — Téléchargement de librairies hors ligne

Yarn crée une copie en cache de manière automatique, ce qui permet de pouvoir récupérer des librairies pour un projet, y compris si vous n’êtes pas connecté à Internet !

Cependant cette librairie devra au moins être téléchargé pour un projet précédent.

 

Dernier point important

Yarn comprend les instructions fournis dans le fichier package.json généré par NPM. Pas de panique donc si vous souhaiter le tester sur un de vos projet en cours !

Yarn VS NPM

Cliquez sur l’image pour consulter le benchmarking officiel.

Yarn NPM benchamark

 

Installation

Étrangement, nous allons installer Yarn … grâce à NPM (ce sera peut être votre dernière installation via NPM).

npm install -g yarn

Quelques commandes Yarn utiles:

Pour chaque commande Yarn, je vous ai mis son équivalent NPM.

Installer React

npm install react --save
yarn add react

Supprimer React

npm uninstall react
yarn remove react

 

Installer une dépendance de développement

npm install babel --save-dev
yarn add babel --dev

Mettre à jour les dépendances du projet

npm update --save
yarn upgrade

Installer une dépendance globalement

npm install react --global
yarn global add react

> Retrouvez toutes ces commandes sur le site officiel du projet Yarn.

 

 


Resources:

Yarn.com

GitHub Yarn Officiel

— Yarn en détails par SitePoint.comen anglais

Partager surShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someonePrint this page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *