Tech Talk - Comparing JS package managers

Slide 1

Slide 1 text

Comparing JS package managers

Slide 2

Slide 2 text

In modern application development we prefer to use existing open-source packages

Slide 3

Slide 3 text

Faster development, access to new, regular updates, and better security than custom-created script

Slide 4

Slide 4 text

Package often depends on many other packages to work correctly

Slide 5

Slide 5 text

Nested dependencies can become complex that they are unable to handle dependency management manually

Slide 6

Slide 6 text

Package managers

Slide 7

Slide 7 text

Package managers are tools that automatically handle the dependencies of a project

Slide 8

Slide 8 text

Package manager can install new — or update existing — packages with a single command

Slide 9

Slide 9 text

As JavaScript developers, we have access to several package managers today

Slide 10

Slide 10 text

Package Managers Overview

Slide 11

Slide 11 text

● npm was the ﬁrst package manager to introduce the concepts ● released back in 2010 and ofﬁcially adopted by the Node.js ● online registry for JavaScript packages as well as a command-line tool

Slide 12

Slide 12 text

● npm is signiﬁcantly slower than its counterparts ● history of serious security vulnerabilities

Slide 13

Slide 13 text

Companies like Facebook and Google joined efforts to develop a better version of npm and call it Yarn Ukrainian developer Zoltan developed pnpm

Slide 14

Slide 14 text

All of these package managers are open-source, meaning you have full access to check the inner workings of each one

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

● Automatically generates a package-lock.json ● Manage local or global dependencies ● can handle multiple versions of dependencies ● Ofﬁcial registry Beneﬁts

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

● Yarn fixes many issues that appear in a Monorepo ● Use of an offline cache mechanism (~/.yarn-cache) ● Use of a lock file called - yarn.lock ● Built-in license checker ● Uses an approach called parallel downloads ● Automatically retry the HTTP request in case of failure Benefits

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

● Offers signiﬁcantly better disk space usage and speed ● installs all packages on a single location and then uses symlinks to reference them ● introduces a new Yarn-bash-like setting called shell-emulator, a cross-platform shell environment ● has a strict access control mechanism Beneﬁts

Slide 21

Slide 21 text

Package manager comparison

Slide 22

Slide 22 text

npm, Yarn, and pnpm offer almost identical commands for their various operations, and they are all easy to use

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Speed There’s no match to pnpm when it comes to the speed and performance of these package managers Benchmark

Slide 25

Slide 25 text

The speeds of Yarn and npm are comparable if we perform an install operation by just using node_modules and skip cache and lock ﬁle functionality, then npm could offer 5x better speed if we use all three functionalities, then Yarn could boost its performance and becomes 11x faster than npm

Slide 26

Slide 26 text

Security The major advantage of Yarn over npm is that it veriﬁes the integrity of each package using checksums npm is a bit more forgiving when it comes to working with bad packages.

Slide 27

Slide 27 text

Stability Over time, their codebase has matured because they’ve received tons of contributions from the open-source community.

Slide 28

Slide 28 text

Monorepos But both Yarn and pnpm have complete support for monorepos, thanks to their concept of workspaces.

Slide 29

Slide 29 text

If you are searching for a solution that gives you better speed and efﬁcient memory usage, you should strongly consider using pnpm

Slide 30

Slide 30 text

If you are handling monorepos, you can use pnpm or Yarn to do so. However, keep in mind that Yarn sends usage data to Facebook, which may not make Yarn a suitable choice in some scenarios.

Slide 31

Slide 31 text

Q & A

Slide 32

Slide 32 text

HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev

Slide 33

Slide 33 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 34

Slide 34 text

[email protected]