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
61
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
260
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Crafting the Perfect Computed Property
serenaf
0
62
Other Decks in Programming
See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
SODA - FACT BOOK
sodainc
1
1.1k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
230
XP, Testing and ninja testing
m_seki
2
140
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
330
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
290
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
150
XSLTで作るBrainfuck処理系
makki_d
0
210
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
770
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
480
Featured
See All Featured
A designer walks into a library…
pauljervisheath
206
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
337
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Documentation Writing (for coders)
carmenintech
71
4.9k
Navigating Team Friction
lara
187
15k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Facilitating Awesome Meetings
lara
54
6.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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]