JavaScript package managers (2026)

By Xah Lee. Date: .

bower from twitter (2012 to 2017)

bower.io 2026-06-26 31f44 ll
bower.io 2026-06-26 31f44 ll

ai answer

when bower.io created and popular

Bower was originally released in 2012 as part of Twitter’s open source effort. It became a popular front-end package manager during the early to mid-2010s, serving as a primary tool for managing client-side dependencies before its deprecation in 2017.

Key Timeline and Status:

  • Creation: Launched in 2012 by Twitter developers (@fat and @maccman).
  • Peak Popularity: Widely adopted for front-end dependency management before the rise of npm and Yarn.
  • Deprecation: Officially deprecated in 2017, though the site remains maintained for legacy users.
  • Current Status: The Bower team now recommends using Yarn and Webpack or Parcel for new projects.

ai answer

why is bower created when there was npm

Bower was created to solve client-side performance issues and dependency management specifically for web browsers, which npm (originally designed for server-side Node.js) handled poorly.

Flat vs. Nested Trees: npm used a nested dependency tree, which could install multiple conflicting versions of the same library (e.g., three copies of jQuery). Bower enforced a flat dependency tree, ensuring only one version of a package was installed, which reduced file size and load times for front-end users.

Front-End Optimization: Bower was optimized for browser assets like CSS, HTML, fonts, and images, whereas npm focused on Node.js modules. Bower allowed developers to easily include plain JavaScript files directly in HTML via script tags.

Developer Control: Bower put the burden of dependency resolution on the developer, allowing for a "snappy" interface by avoiding the "hefty libraries" and bloat associated with npm's automatic inclusion of all sub-dependencies.

Despite these advantages, Bower is deprecated as of 2016. Modern development has consolidated on npm (or Yarn) combined with bundlers like webpack, which now offer flat dependency resolution, caching, and security features that supersede Bower’s original value proposition. AI-generated answer. Please verify critical facts.

npm (2010)

npmjs.com 2026-06-26 31de0 ll
npmjs.com 2026-06-26 31de0 ll

yarn (2016-06) by Facebook (coded by Sebastian McKenzie)

classic.yarnpkg.com 2026-06-26 32013 ll
classic.yarnpkg.com 2026-06-26 32013 ll

ai answer

How's yarn different than npm

Yarn and npm are both package managers for JavaScript/Node.js projects, handling dependency installation, version management, and scripting. npm comes bundled with Node.js and is the default/standard. Yarn was originally created by Facebook (Meta) in 2016 to address npm's limitations at the time (e.g., speed, reliability, and non-deterministic installs).

Today (2026), the landscape has evolved: npm has closed many gaps, while Yarn Berry (v2/v4+) represents a more radical redesign compared to the older "Yarn Classic" (v1.x, now in maintenance).

Core Similarities

  • Both use a package.json for project metadata.
  • Both support lockfiles for reproducible installs (package-lock.json for npm, yarn.lock for Yarn).
  • Both handle dependencies, devDependencies, workspaces/monorepos, scripts (npm run / yarn), and commands like add, remove, upgrade.
  • Full compatibility with the npm registry.
  • Features like audits, overrides/resolutions, and dynamic execution (npx / yarn dlx).

Key Differences

Aspect npm Yarn (especially Berry v4+)
Default/Setup Bundled with Node.js; zero install needed Must install separately (or via Corepack)
Install Speed Improved but often slower in benchmarks (baseline) Generally faster, especially with PnP mode (can be dramatically quicker for cached/zero-installs)
node_modules Traditional flat/hoisted structure (copies files) Flexible: Classic uses node_modules; Berry defaults to Plug'n'Play (PnP) — no node_modules folder, uses a .pnp.cjs loader for faster, lighter installs
Disk Usage Higher (duplicates packages across projects) Better efficiency; PnP + cache shines; supports content-addressable modes
Determinism Strong with package-lock.json and npm ci Excellent from the start (yarn.lock); Berry emphasizes consistency
Monorepos/Workspaces Good support (since v7+) Very strong, especially in Berry (constraints, better tooling)
Security Defaults Improved (v12+ turns install scripts off by default) Strong, with options like enableScripts: false; checksums
Unique Features Simplicity, universal compatibility, npm ci for CI Zero-Installs (commit cache to git for instant CI/offline), plugins, advanced workspace constraints, PnP for ghost dependency prevention
Compatibility Highest (everything "just works") Excellent, but PnP can require tweaks for some tools/IDEs (or switch to nodeLinker: node-modules)

Performance note: Benchmarks (e.g., from pnpm site) show Yarn PnP and alternatives often outperforming classic npm installs, especially on clean or large projects. npm has narrowed the gap significantly over the years.

When to Choose Which

  • Use npm if:

    • You want the simplest, most universal setup (no extra tools).
    • Maximum compatibility with every tool/CI/environment.
    • Small-to-medium projects where defaults are fine.
  • Use Yarn (Berry) if:

    • You want maximum speed and efficiency (PnP + Zero-Installs shine in large/monorepo/CI setups).
    • Your team values determinism, plugins, or strict dependency control.
    • You're already in the Yarn ecosystem or need advanced monorepo features.

Migration tip: Both are easy to switch between. Run yarn or npm install in a project with the corresponding lockfile. Tools like Corepack make managing versions straightforward.

Honorable mention: Many teams now prefer pnpm for its excellent balance of speed, strictness (prevents phantom dependencies), and disk savings via content-addressable storage. It's often the "best of both" in modern comparisons.

In short, npm is the reliable standard; Yarn (especially modern Berry) is the innovative alternative focused on performance, developer experience, and scalability for complex projects. Try both on a test project to see what fits your workflow!

pnpm (2017-06)

Pnpm logo
Pnpm logo
pnpm.io 2026-06-27 1eb70 ll
pnpm.io 2026-06-27 1eb70 ll

originally developed in 2016 by Rico Sta Cruz for the Node.js JavaScript runtime environment. It focuses on being a disk space-efficient alternative to npm.

Diff npm vs pnpm

ai answer

npm (Node Package Manager) is the default, built-in package manager for Node.js. pnpm ("performant npm") is an alternative package manager that uses the same npm registry but with a fundamentally different approach to storage and dependency handling.

Key Technical Differences

  1. Storage Model (Biggest Difference)

    • npm: Copies every package into each project's node_modules. With multiple projects, you get many duplicate copies of the same package versions.
    • pnpm: Uses a global content-addressable store (one copy of each package version on disk). It then uses hard links (or symlinks/reflinks) to reference them in each project's node_modules. This leads to massive disk savings across projects.
  2. Dependency Resolution & Strictness

    • npm's flat node_modules (since v3) allows phantom dependencies — code can import packages that aren't directly listed in your package.json (but are transitive deps of something else). This can cause "works on my machine" issues.
    • pnpm uses a strict, non-flat structure by default. Packages can only access what they explicitly declare. This leads to more reliable, reproducible builds.
  3. Performance

    • pnpm is consistently faster, especially on warm caches and in monorepos, due to linking instead of copying and better caching. Real-world gains are often 2-3x (sometimes more on large projects).
  4. Other Features

    • Both support workspaces, overrides/resolutions, patching, etc.
    • pnpm has stronger built-in monorepo tools, side-effects cache, better patching, and can even manage Node.js versions (pnpm runtime).
    • npm has broader ecosystem familiarity and zero-setup.

Commands Comparison (Mostly 1:1)

  • npm installpnpm install
  • npm add <pkg>pnpm add <pkg>
  • npm cipnpm install --frozen-lockfile
  • npx <pkg>pnpm dlx <pkg>

Most workflows transfer directly.

When to Use Which?

  • Use npm if:

    • You're a beginner or following tutorials.
    • Maximum compatibility is critical (some older tools/scripts assume npm).
    • Working on small/single projects where disk/speed isn't a pain point.
  • Use pnpm if:

    • You work on multiple projects or monorepos.
    • Disk space or install speed matters (very common for developers).
    • You want stricter dependency management for reliability.
    • Teams at companies like Microsoft (Rush) and many major OSS projects (Vue, Vite, etc.) use it.

Migration Tip

Switching is easy:

  1. Install pnpm (corepack enable pnpm is recommended).
  2. Delete node_modules and package-lock.json.
  3. Run pnpm install.
  4. Update scripts/CI as needed.

Overall in 2026: pnpm is widely considered the better choice for most modern development due to its efficiency and strictness, while npm remains the safe default. Many teams adopt pnpm for new projects.

modern web dev history. 2010 to 2026