DEV Community: Kirtesh Bansal

🧰 Choosing the Right JavaScript Package Manager in 2025: npm vs Yarn vs pnpm vs Bun

Kirtesh Bansal — Fri, 18 Apr 2025 06:11:48 +0000

When building JavaScript applications, your choice of package manager can have a big impact on development speed, reliability, and even how much space your dependencies take up.

With options like npm, Yarn, pnpm, and the rising star Bun, developers often ask:

“Which one should I use and why?”

In this post, I’ll break down what each package manager offers, where it shines, where it falls short, and when you should (or shouldn’t) use it.

📦 1. npm — The OG (Node Package Manager)

✅ Pros:

Comes bundled with Node.js, so it’s always available out of the box.
Huge community support and ecosystem.
Familiar to almost every JavaScript developer.

❌ Cons:

Slower installations compared to newer tools.
Can duplicate a lot of dependencies across projects.
Less efficient use of disk space.
Limited monorepo support (requires external tools like Lerna).

🎯 Ideal For:

Simpler projects or teams already using it.
Projects where compatibility and stability matter more than performance.

🚫 Avoid If:

You want maximum speed and disk efficiency.
You’re managing a large monorepo.

🔧 Example:

Installing React:

npm install react react-dom

Running a script:

npm run build

Creating a package.json:

npm init -y

🧶 2. Yarn — The Deterministic Pioneer

Created by Facebook, Yarn was built to solve npm’s early shortcomings by offering speed, determinism, and better dependency resolution.

✅ Pros:

Faster than npm, especially with caching.
Deterministic installs via yarn.lock.
Built-in support for monorepos (workspaces).
Yarn 2+ (Berry) introduces innovative features like Plug’n’Play (PnP), which removes node_modules.

❌ Cons:

Yarn 2+ is a significant shift from v1 (some breaking changes).
Plug’n’Play can break some older packages that expect node_modules.

🎯 Ideal For:

Projects needing monorepos or strict dependency management.
Teams that want modern tooling with good performance.

🚫 Avoid If:

You rely on legacy packages or tooling that assume traditional node_modules.

🔧 Example:

Installing React:

yarn add react react-dom

Running a script:

yarn build

Then:

yarn install

🌱 3. pnpm — Performance & Efficiency First

pnpm is all about speed and disk efficiency. It introduces a unique way of storing dependencies using hard links to a global store, saving space and avoiding duplication.

✅ Pros:

Blazing fast installs.
Uses up to 70% less disk space than npm/Yarn.
Enforces strict dependency declarations (no more accidental access to undeclared packages).
Excellent built-in support for monorepos.

❌ Cons:

Slight learning curve due to its non-standard node_modules layout.
Some tools (very few nowadays) might expect npm-style layouts.

🎯 Ideal For:

Projects with large dependency trees.
Monorepos and enterprise-scale applications.
Teams that value speed and discipline

🚫 Avoid If:

You’re using very old tooling or dependencies that don’t like non-standard layouts (rare these days).

🔧 Example:

Installing React:

pnpm add react react-dom

Running a script:

pnpm run build

Creating a pnpm workspace:

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'yam

Then:

pnpm install

⚡️ 4. Bun — The All-In-One Newcomer

Bun is more than a package manager — it’s an entire JavaScript runtime, bundler, and test runner, written in Zig. It’s designed from the ground up for speed.

✅ Pros:

Ridiculously fast installs (and everything else).
Bundler, transpiler, test runner, and runtime — all in one.
TypeScript support out of the box.
Modern APIs and first-class ES module support.

❌ Cons:

Still evolving — some features and compatibility can be hit-or-miss.
Not yet widely adopted or battle-tested like Node/npm.
Some Node.js APIs and npm packages may not be fully supported.

🎯 Ideal For:

Side projects, prototypes, and developers chasing the bleeding edge.
Projects where speed matters above all else.

🚫 Avoid If:

You need long-term production stability and full compatibility with the Node/npm ecosystem (for now).

🔧 Example:

Installing React:

bun add react react-dom

Running a script:

bun run build

Creating a new project:

bun i

Running a dev server:

bun dev

🧾 Quick Comparison Table — TL; DR

🧠 Final Thoughts: What Should You Use?

🟢 pnpm — Best all-around for performance, workspaces, and modern development.
🔵 Yarn — Great for monorepos and larger teams (just mind the Yarn 2+ learning curve).
🔴 npm — Reliable and compatible, good for legacy or simple apps.
⚡ Bun — For speed-loving early adopters and greenfield projects.

💬 Have a favorite or horror story with one of these? Let me know in the comments! And if you found this post helpful, give it a clap 👏 or share it with your fellow devs!

Downsize your JavaScript: Mastering Bundler Optimizations

Kirtesh Bansal — Mon, 03 Mar 2025 10:12:23 +0000

Javascript call(), apply(), bind() methods & their polyfills

Kirtesh Bansal — Sun, 30 Jan 2022 11:11:41 +0000

In this article, I'll be explaining the call, apply & bind methods & how to write their polyfills. These three polyfills are very commonly asked questions in a javascript interview.

Let's get started with an example to understand the need of these methods & then we'll jump on their implementations.

Look at the below code, we have a person object & a printName method.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

As you see the person object is very generic object & we can have multiple object of same type with different values. Here, I'm using this keyword in printName method. If you are not familiar with it. Don't worry. we'll cover it later.

Now, we want to perform a printName method for each person object.

How can we do that?

First option is that, we add the printName method to each object & call it as shown below.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal",
  printName : function (country) {
             console.log(this.firstname + " " + this.lastname 
             + " from " + country);
             }    
}

person.printName("India");

Output: 
"Kirtesh bansal from India"

If you see the above code. you will realise that we are duplicating the printName method for each object. It doesn't seem to be a good practise. That is the reason, I've defined printName method as a seperate method in the first code block.

Now, What?

Javascript provides us three methods to handle such cases without duplicating code.

1. call(object, arguments) - invokes the function on passed object along with passed arguments if there
2. apply(object, [arguments]) - invokes the function on passed object along with passed array of arguments if there
3. bind(object, arguments) - returns a new function with referencing passed object and arguments

Let's start with first the method.

1. call method

call method invokes the function by taking the object on which the method has to be executed as first argument and accepts arguments which can be passed in that method like country in printName method.

It becomes equal to person.printName("India"). Where in the printName method this keyword refers to the person object. As this always refers to left side of the . on which method is being called. You can check this link to know more about this keyword.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

printName.call(person, "India");

Output: 
"Kirtesh bansal from India"

Here, We've attached call method to printName function where the printName method is called for person object therefore it takes the value of firstname & lastname from it & take "India" as parameter for country argument and results the above output.

2. apply method

apply method is very simillar to the call method but the only difference is that call method takes the argumetns as comma seperated values where as apply method takes an array of arguments. If we write the apply method implemetation of the above code. It'll be like this.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

printName.apply(person, ["India"]);

Output: 
"Kirtesh bansal from India"

Here, we replaced call with apply method & passed the argument in an array.

let's move to last method.

3. bind method

bind method is simillar to the call method but the only difference is that call method invokes the function but incase of bind it returns a new function which can be invoked later. let's implement bind method.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

let newPrintName = printName.bind(person, "India");
newPrintName();

Output: 
"Kirtesh bansal from India"

If you see the above code we have attached the bind method to printName & stored it into a new variable called newPrintName.

Now, we can call the newPrintName any time later in code & it will result in the same output.

Now, let's write the polyfills for all the three methods.

I'll be using Javascript prototype inheritance to write the pollyfills. To make the pollyfills available to all functions.

If you look at the all three methods. They are applied on a function so we will add our polyfill method to Function prototype.

You can read about prototype here.

let's start with call method polyfill.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

Function.prototype.mycall = function(obj,...args){ 
    let sym = Symbol();                                     
    obj[sym] = this;
    let res = obj[sym](...args)
    delete obj[sym];
    return res;
}

/*
Note: Applying mycall method to printName function so this
will be equal to printName inside mycall function as 
printName is on the left side of the '.' 
*/

printName.mycall(person, "India");

Output: 
"Kirtesh bansal from India"

Here, I've user Function.prototype to make mycall method to be available for all the functions & assign it a new function.

Same as call method mycall method takes object on which the method has to be invoked as first argument followed by rest of the arguments need to be passed to the function.

Now, let's understand the inner implemetation of the function.

Inside the mycall function we've created a symbol sym to create a unique property on the passed object to prevent existing property overwritten.

Now, On passed object added sym property & assigned the this keyword to it. which is refering to the printName function.

In the next line, We call the function by passing the remaining arguments & store it's response in a new variable res. After this, we delete the newly created property sym from the passed object as it do not exist on the object outside this function and then we return the response of the object.

So, finally we have created our first polyfill and it results the same.

Let's jump on the apply method polyfill.

As we have seen thay apply is very simillar to the call method just it takes array of arguments instead of take comma seperated list of arguments. Therefore, the implementation for apply remains same as call method with a minor change.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

Function.prototype.myapply = function(obj,...args){
  let sym = Symbol();                                     
  obj[sym] = this;
  let res = obj[sym](...args[0]); 
  delete obj[sym];
  return res;
}

printName.myapply(person, ["India"]);

Output: 
"Kirtesh bansal from India"

If you see the above code the implementation steps are same but when we invoke the function on object instead of passing ...args directly as argumetns. we'll pass the 0th index of args using rest operator because rest operator '...' represents arguments array & in this array we've our passed arguments array at 0th index so will pick that array & spread that into the function.

Let's write the final bind method polyfill.

If we recall from bind method implementation. we know that it is same as call but instead of invoking the function return new function. Let's see the implementation.

let person = {
  firstname: "Kirtesh",
  lastname: "bansal"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

Function.prototype.mybind = function(object,...args){
  let func = this;
  return function (...args1) {
    return func.apply(object, [...args, ...args1]);
  }
}

let newPrintName = printName.mybind(person, "India");
newPrintName();

Output: 
"Kirtesh bansal from India"

Here, Same as mycall & myapply methods. We've created a mybind method on Function.prototype & assigned a function to it. This function accepts object & arguments simillar to bind method. We already know form the above polyfill implementations that the this keyword referes the function. In case on bind, we'll store the this on a variable called func. since bind returns a new function. we'll also return a anonymous function which will act as closure in mybind function. Now, this returing function can also accepts arguments which will represent the arguments passed during the invocation of new function returned by mybind method. Inside this returning function, we will use apply method on the func variable to invoke it for passed object & arguments. In this apply method, we'll create an array to pass arguments & in this array we'll spread the args & args1 to pass all the arguments to the function & store it in a new variable newPrintName.

Later, when we call this newPrintName. It results the same. If we pass any argument in newPrintName function, args1 represents these arguments in mybind method.

That's all about call, apply, bind & their polyfills.

Do share your comments and feedback about the article.

Happy learing!

Create a Spinner Loader in React using CSS

Kirtesh Bansal — Sun, 10 Oct 2021 09:48:48 +0000

Hi Folks,

In this article, we'll talk about how to create a spinner loader in React using pure CSS.

We will be creating a loader as shown below -

Let's start creating a file called spinner.js in the react project and add some JSX to it for the loader.

File: Spinner.js

const Spinner = () => <div className="loader"></div>;

export default Spinner;

Let's understand the above code -

Here, we have created a functional component called Spinner. Which is returning a div element with a class loader. That's all the JSX required for it.

Now, Let's add css for it.

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

Let's understand the above CSS -

We've added border:10px solid #f3f3f3 property to create the gray circle and border-top: 10px solid #3498db to create the blue colored arc on top of the gray colored circle. After that border-radius: 50% property to make it circular and have given same amount of height & width.

Now, to add the spinning effect we've added animation: spin 1s linear infinite.

It will look like this -

Let's add the final CSS to create the spinning effect-

 @keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Let's understand the final CSS -

Here, we have added keyframes for the spin animation. Where we are rotating the element using transform: rotate() property from 0 degree to 360 degree.

Finally, Our Sinnner loader is ready.

That was it from this article. Do share your comments and feedback about the article.

Find the code below.

Keep learning!

Bouncing dots Loader in React

Kirtesh Bansal — Sun, 26 Sep 2021 17:02:07 +0000

Hi Folks,

Loading component is a very common requirement in react to represent the loading state. In this tutorial, I will explain how you can create bouncing dots loader using CSS.

We will be creating a loader as shown below -

Let's get started -

For this tutorial, I'm assuming you already have a React project setup ready with you.

Now, let's create a BouncingDotsLoader component in React and add JSX to create those three dots.

BouncingDotsLoader.js

import React from "react";

const BouncingDotsLoader = (props) => {
  return (
      <div className="bouncing-loader">
        <div></div>
        <div></div>
        <div></div>
      </div>
  );
};

export default BouncingDotsLoader;

Let's understand the above code-

Here, I have created an outer div container to wrap all the
three identical dots with class bouncing-loader. To create these three dots, I've added three div element inside this container.

Now, Let's add CSS to style the dots-

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3px 6px;
  border-radius: 50%;
  background-color: #a3a1a1;
  opacity: 1;
  animation: bouncing-loader 0.6s infinite alternate;
}

Let's understand the above CSS -

I've added display: flex and justify-content: center to bouncing-loader class to make those dots inline & center. Also, added CSS to bouncing-loader > div to style each dot with an animation shortand property with value bouncing-loader 0.6s infinite alternate representing CSS properties animation-name animation-duration iteration-count animation-direction.

It will look like this -

Let's add the final CSS to create the bouncing effect-

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translateY(-16px);
  }
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

Let's understand the final CSS -

I've added keyframes to the bouncing-loader animation at start point with opacity: 0.1 & transform: translateY(-16px) & delayed the animation for second and third dot with 0.2 & 0.4 seconds respectively.

This way, Our very simple bouncing dots loader is ready.

That was it from this article. Do share your comments and feedback about the article.

Find the code below.

Keep learning!