Yarn and Angular-CLI

-

Background

I have been thinking of a faster package management tool ever since I started using NPM (Node Package Manager). Please don’t mistake me having anything against NPM. I still love this package manager and I very much love the rich command-line that it came with. When it was created, it was really the leader and because of this NPM the whole JS world has seen a revolution. NPM surly was the spark to the revolution in the JS (Java Script) world.
To make it clear for everyone why we needed a new package manager is because of the following challenges that we had with NPM,
1.     The Nested dependencies that was sometimes going in infinity loops. At times, it was impossible to delete files on the PC as the paths were too nested.
2.     Everything on the world had to depend on only one registry. https://www.npmjs.com/
3.     Single threaded installation. The installation of the dependencies are single threaded.
4.     You are always expected to be online even if you require the same package multiple times.
In my opinion, Yarn has made its attempts to address the above issues. I have seen some of the improvements right through my eyes and it has really made the package management a really cool thing. Kudos, to Yarn team to have built such a wonderful package management.

Prerequisite

Install the Yarn package manager. Go to https://yarnpkg.com/en/docs/install and choose the way you are comfortable with to install Yarn. It has many ways to install and I sure you will be able to install.

Install Angular CLI

Hope you were able to successfully install the Yarn package manager on your machine. Now, let us install the angular-cli globally. Issue the below command to install the angular cli using yarn package manager.
$ yarn global add angular-cli

That’s it! You just installed the angular-cli globally on your system. You should have noticed a significant improvement in the time taken to install. You should have noticed the clutter free messaging on the prompt. These really excite me as it is clean on the prompt and does a neat job.

Upgrading to latest Angular CLI

If you have already installed an older version of Angular CLI and wish to upgrade to the latest here it is.
$ yarn global remove angular-cli

$ yarn cache clean

$ yarn global add angular-cli@latest




Running script Tasks

Let’s assume you have added “scripts” inside your package.json and wish to run tasks
{

  "name": "sample",

  "version": "0.0.0",

  "license": "MIT",

  "angular-cli": {},

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },



…



}

You can run them like below:
$ yarn run ng

$ yarn start

$ yarn run test

If you notice the commands are very similar to that of what was done in npm.

Conclusion

After I adapted to Yarn I started seeing the world with Yarn and see considerable improvement on the build pipelines on Jenkins and my local. This might be because of me being biased towards Yarn. If you have any experience with Yarn please comment.

Comments

Post a Comment

Popular posts from this blog

Java SSL/TLS Testing Tool: Cipher Suite

-
Image
Recently I was reading about the TLS/SSL and Ciphers. I was also interested to read about the Ciphers that are provided out of the box with JDK. This looked to me like this is something we take it for granted and do not do our due diligence when talking about the Ciphers. We often times leave those topic to our organization's network and security team. From my experience, it is a topic that all the developers leave it to the Sr. Developers and then the Sr. Developers pass it on to the Management. Guess what? It is not a sweet topic to discussion. To break this kind of symptom, I have choose to make it simple and want everyone to understand the complexity and importance of knowing this. Lets get started Before we wet our hands here is some basic information that you will require to know, Word Meaning Protocol A defined set of rules and regulations that determine how data is transmitted in telecommunications and computer networking SSL ...
Read more

PWA: Building and publishing a PWA in 15ish minutes using Angular 5 and Service Worker

-
Image
Introduction Here is an express start to your first PWA with service workers and a 100% score from lighthouse. I have taken it as a challenge to be able to present it to you so that you may be able to put your first pwa "hello world" app in 15ish minutes. What is PWA? Progressive web apps (PWAs) take traditional web sites/applications — with all of the advantages the web brings — and add a number of features that give them many of the user experience advantages of native apps. This set of docs tells you all you need to know. - Source: https://developer.mozilla.org/en-US/Apps/Progressive If the above definition sounds interesting, then this is to get you kickstarted with PWA using Angular 5 and inspire you to build more PWAs. End of this post you should be able to build, host and publish a PWA and get motivated to read more about it. Ever since I read about PWAs It has intrested me like crazy. Before, you get excited about PWA, please look into the supported brow...
Read more