Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Spin me a Yarn
Search
Serena Fritsch
May 02, 2017
Programming
1
59
Spin me a Yarn
DublinJS 2017
Serena Fritsch
May 02, 2017
Tweet
Share
More Decks by Serena Fritsch
See All by Serena Fritsch
Let Me Ember this for You
serenaf
0
220
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Crafting the Perfect Computed Property
serenaf
0
53
Other Decks in Programming
See All in Programming
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Kotlin 2.0 and Beyond
antonarhipov
2
150
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
私のEbitengineの第一歩
qt_luigi
0
450
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
500
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
320
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
A Tale of Four Properties
chriscoyier
155
22k
Debugging Ruby Performance
tmm1
72
12k
In The Pink: A Labor of Love
frogandcode
139
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Automating Front-end Workflow
addyosmani
1365
200k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Building Applications with DynamoDB
mza
90
6k
BBQ
matthewcrist
83
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Transcript
Spin me a Yarn Serena Fritsch @serifritsch
[email protected]
DublinJS 2017
None
Once upon a time…
๏ First release in 2010
๏ First release in 2010 ๏ NPM Registry
๏ First release in 2010 ๏ NPM Registry ๏ 347184
published packages https://unpm.nodesource.com/
๏ First release in 2010 ๏ NPM Registry ๏ 347184
published packages ๏ 11,164 packages per week https://unpm.nodesource.com/
None
None
xkdc.com and reddit
๏ Non-Determinism
๏ Non-Determinism ๏ Performance
๏ Uses npm registry
๏ Uses npm registry ๏ Consistent and reliable dependency resolution
๏ Uses npm registry ๏ Consistent and reliable dependency resolution
๏ Improved performance
Dependency Resolution? Non-Determinism? Performance?
None
In the beginning…
Disclaimer ✓ You use a package manager ✓ You are
familiar with the npm eco system
What are packages?
Piece of software that can be downloaded
May depend on other packages
What are dependencies? a^1.0.0 b^1.0.0 App
Specified inside the package.json a^1.0.0 b^1.0.0 App
a^1.0.0 b^1.0.0 App Follow semantic versioning
https://xkcd.com/1172/
Multiple levels of dependencies a^1.0.0 s^1.0.0 App b^1.0.0 s^2.0.0
a^1.0.0 s^1.0.0 App b^1.0.0 s^2.0.0 No dependency conflicts
Under the hood
Project Code
Project Code Manifest +
Project Code Manifest + Dependency Code
goo.gl/LJSNmP
None
Disclaimer ✓ First-time installation ✓ Empty node_modules folder ✓ No
pre-cached packages
Install Phases 1. Dependency Resolution Make requests to the registry
and look up dependencies recursively
Install Phases 2. Fetching Packages Fetch package tarballs and place
in global cache
Install Phases 3. Linking Packages Copying files from global cache
to local node_modules folder
https://github.com/ashleygwilliams/npm-sandbox package.json
https://github.com/ashleygwilliams/npm-sandbox package.json Dependency Graph a^1.0.0 b^1.0.0 App s^1.0.0 s^2.0.0
. . node_modules folder a^1.0.0 b^1.0.0 App s^1.0.0 s^2.0.0
. node_modules folder a1 b1 App s1 s2
. . a1 s1 b1 s2 a1 b1 App s1
s2
. Dependency Resolution 1. Load the existing node_modules tree from
disc a1 b1 App s1 s2
. Dependency Resolution 2. Clone the current tree a1 b1
App s1 s2
. Dependency Resolution 3.Build the ideal tree a1 b1 App
s1 s2
. Dependency Resolution a1 b1 App s1 s2
. Dependency Resolution a1 a1 b1 App s1 s2
. Dependency Resolution a1 a1 b1 App s1 s2
a1 s1 . Dependency Resolution a1 b1 App s1 s2
a1 s1 . Dependency Resolution a1 b1 App s1 s2
a1 s1 b1 . . Dependency Resolution a1 b1 App
s1 s2
a1 s1 b1 . Dependency Resolution a1 b1 App s1
s2
. a1 s1 b1 s2 Dependency Resolution a1 b1 App
s1 s2
. Dependency Resolution 4.Generate Actions to take add
[email protected]
add
[email protected]
add
[email protected]
add
[email protected]
a1 s1 b1 s2 a1 b1 App s1 s2
. Package Fetching and Linking a1 s1 b1 a1 s1
b1 s2
. Dependency Resolution 1.Create a list of Package Requests a1
b1 App s1 s2
. Dependency Resolution 2. Find Version on Registry a1 b1
App s1 s2
. Dependency Resolution 3. Check existing dependencies a1 b1 App
s1 s2
. Dependency Resolution 4. Create a new Package Request and
repeat… a1 b1 App s1 s2 a1
. Dependency Resolution a1 b1 App s1 s2 a1
a1 s1 . Dependency Resolution a1 b1 App s1 s2
a1 s1 . Dependency Resolution a1 b1 App s1 s2
a1 s1 b1 . . Dependency Resolution a1 b1 App
s1 s2
a1 s1 b1 . . Dependency Resolution a1 b1 App
s1 s2
a1 s1 b1 . Dependency Resolution a1 b1 App s1
s2 a1 s1 b1 s2
. Package Fetching and Linking a1 s1 b1 a1 s1
b1 s2
. . Save Lockfile a1 s1 b1 a1 s1 b1
s2
“To make it more clear, your package.json states “what i
want” for the project whereas your lock file says “what I had” in terms of dependencies” -Dan Abramov . . Save Lockfile
.
Differences
None
a1 b1 App s1 s2 c1 s1 a1 b1 s2
s1 c1 https://docs.npmjs.com/how-npm-works/npm3-nondet
Upgrade of Package A a2 b1 App s2 s2 c1
s1
a1 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1
a1 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 s2 s1 c1 a2 b1 App s2 s2
c1 s1 s2
a2 b1 App s2 s2 c1 s1 a2 b1 s2
s1 c1 s2
a2 b1 App s2 s2 c1 s1
a2 b1 App s2 s2 c1 s1
a2 b1 App s2 s2 c1 s1 a2
a2 b1 App s2 s2 c1 s1 a2
a2 s2 a2 b1 App s2 s2 c1 s1
a2 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1 s1
a2 b1 s2 c1 s1 a2 b1 s2 s1 c1
s2
Anything I can do? When in doubt, clear node_modules out
Save Lockfile npm shrinkwrap
Save Lockfile By default turned off
Upgrade of Package A a2 b1 App s2 s2 c1
s1
a2 b1 App s2 s2 c1 s1
a2 b1 App s2 s2 c1 s1 a2
a2 b1 App s2 s2 c1 s1 a2
a2 s2 a2 b1 App s2 s2 c1 s1
a2 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 s2 a2 b1 App s2 s2 c1 s1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1
a2 b1 App s2 s2 c1 s1 a2 b1 s2
c1 s1
a2 b1 s2 c1 s1
a2 b1 s2 c1 s1
Project Code package.json + + Lockfile
Performance
Issue opened by Sam Saccone November 2015 https://github.com/npm/npm/issues/10380
GET a1 GET b1 GET s1 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s Multi-Stage Installation
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s1 GET s2 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 Timeline start 1.0s 1.5s
2.0s 2.5s Built-In Parallelism GET s1
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
GET a1 GET b1 GET s2 GET s1 Timeline start
1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
None
Last Chapter
Ember CLI 2.13 onwards is “yarn aware”
Ember CLI 2.13 onwards is “yarn aware” Angular CLI 1.0.0-beta31
onwards is “yarn aware”
Ember CLI 2.13 onwards is “yarn aware” Angular CLI 1.0.0-beta31
onwards is “yarn aware” create-react-app has built-in yarn support since 1.0.2
Community project with governance model taken from Ember and Rust
Contribute https://github.com/yarnpkg/yarn
None
npm 5.0.0 Beta https://github.com/npm/npm/pull/16244
๏ New, standardised Lockfile feature https://github.com/npm/npm/pull/16244
๏ New, standardised Lockfile feature ๏ Cache rewrite https://github.com/npm/npm/pull/16244
๏ New, standardised Lockfile feature ๏ Cache rewrite ๏ Better
summary report https://github.com/npm/npm/pull/16244
http://blog.npmjs.org/
And they lived happily ever after…
Thank You! @serifritsch
[email protected]