Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spin me a Yarn

Serena Fritsch
May 02, 2017
Programming
1
59

Spin me a Yarn

DublinJS 2017

Serena Fritsch

May 02, 2017
Tweet

More Decks by Serena Fritsch

See All by Serena Fritsch
Let Me Ember this for You
serenaf
0
230
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Crafting the Perfect Computed Property
serenaf
0
56

Other Decks in Programming

See All in Programming
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
480
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
2
1.2k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.1k
Macとオーディオ再生 2024/11/02
yusukeito
0
300
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
310
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
210
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
CSC509 Lecture 08
javiergs
PRO
0
110
Tauriでネイティブアプリを作りたい
tsucchinoko
0
340

Featured

See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
Being A Developer After 40
akosma
86
590k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Producing Creativity
orderedlist
PRO
341
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building an army of robots
kneath
302
42k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Bash Introduction
62gerente
608
210k

Transcript

  1. Spin me a Yarn Serena Fritsch @serifritsch [email protected] DublinJS 2017

  2. None

  3. Once upon a time…

  4. ๏ First release in 2010

  5. ๏ First release in 2010 ๏ NPM Registry

  6. ๏ First release in 2010 ๏ NPM Registry ๏ 347184

    published packages https://unpm.nodesource.com/

  7. ๏ First release in 2010 ๏ NPM Registry ๏ 347184

    published packages ๏ 11,164 packages per week https://unpm.nodesource.com/
  8. None
  9. None

  10. xkdc.com and reddit

  11. ๏ Non-Determinism

  12. ๏ Non-Determinism ๏ Performance

  13. ๏ Uses npm registry

  14. ๏ Uses npm registry ๏ Consistent and reliable dependency resolution

  15. ๏ Uses npm registry ๏ Consistent and reliable dependency resolution

    ๏ Improved performance

  16. Dependency Resolution? Non-Determinism? Performance?

  17. None

  18. In the beginning…

  19. Disclaimer ✓ You use a package manager ✓ You are

    familiar with the npm eco system

  20. What are packages?

  21. Piece of software that can be downloaded

  22. May depend on other packages

  23. What are dependencies? a^1.0.0 b^1.0.0 App

  24. Specified inside the package.json a^1.0.0 b^1.0.0 App

  25. a^1.0.0 b^1.0.0 App Follow semantic versioning

  26. https://xkcd.com/1172/

  27. Multiple levels of dependencies a^1.0.0 s^1.0.0 App b^1.0.0 s^2.0.0

  28. a^1.0.0 s^1.0.0 App b^1.0.0 s^2.0.0 No dependency conflicts

  29. Under the hood

  30. Project Code

  31. Project Code Manifest +

  32. Project Code Manifest + Dependency Code

  33. goo.gl/LJSNmP

  34. None

  35. Disclaimer ✓ First-time installation ✓ Empty node_modules folder ✓ No

    pre-cached packages

  36. Install Phases 1. Dependency Resolution Make requests to the registry

    and look up dependencies recursively

  37. Install Phases 2. Fetching Packages Fetch package tarballs and place

    in global cache

  38. Install Phases 3. Linking Packages Copying files from global cache

    to local node_modules folder

  39. https://github.com/ashleygwilliams/npm-sandbox package.json

  40. 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

  41. . . node_modules folder a^1.0.0 b^1.0.0 App s^1.0.0 s^2.0.0

  42. . node_modules folder a1 b1 App s1 s2

  43. . . a1 s1 b1 s2 a1 b1 App s1

    s2

  44. . Dependency Resolution 1. Load the existing node_modules tree from

    disc a1 b1 App s1 s2

  45. . Dependency Resolution 2. Clone the current tree a1 b1

    App s1 s2

  46. . Dependency Resolution 3.Build the ideal tree a1 b1 App

    s1 s2

  47. . Dependency Resolution a1 b1 App s1 s2

  48. . Dependency Resolution a1 a1 b1 App s1 s2

  49. . Dependency Resolution a1 a1 b1 App s1 s2

  50. a1 s1 . Dependency Resolution a1 b1 App s1 s2

  51. a1 s1 . Dependency Resolution a1 b1 App s1 s2

  52. a1 s1 b1 . . Dependency Resolution a1 b1 App

    s1 s2

  53. a1 s1 b1 . Dependency Resolution a1 b1 App s1

    s2

  54. . a1 s1 b1 s2 Dependency Resolution a1 b1 App

    s1 s2

  55. . 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

  56. . Package Fetching and Linking a1 s1 b1 a1 s1

    b1 s2

  57. . Dependency Resolution 1.Create a list of Package Requests a1

    b1 App s1 s2

  58. . Dependency Resolution 2. Find Version on Registry a1 b1

    App s1 s2

  59. . Dependency Resolution 3. Check existing dependencies a1 b1 App

    s1 s2

  60. . Dependency Resolution 4. Create a new Package Request and

    repeat… a1 b1 App s1 s2 a1

  61. . Dependency Resolution a1 b1 App s1 s2 a1

  62. a1 s1 . Dependency Resolution a1 b1 App s1 s2

  63. a1 s1 . Dependency Resolution a1 b1 App s1 s2

  64. a1 s1 b1 . . Dependency Resolution a1 b1 App

    s1 s2

  65. a1 s1 b1 . . Dependency Resolution a1 b1 App

    s1 s2

  66. a1 s1 b1 . Dependency Resolution a1 b1 App s1

    s2 a1 s1 b1 s2

  67. . Package Fetching and Linking a1 s1 b1 a1 s1

    b1 s2

  68. . . Save Lockfile a1 s1 b1 a1 s1 b1

    s2

  69. “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

  70. .

  71. Differences

  72. None

  73. a1 b1 App s1 s2 c1 s1 a1 b1 s2

    s1 c1 https://docs.npmjs.com/how-npm-works/npm3-nondet

  74. Upgrade of Package A a2 b1 App s2 s2 c1

    s1

  75. a1 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1

  76. a1 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1

  77. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1

  78. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1

  79. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  80. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  81. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  82. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  83. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  84. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  85. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  86. a2 b1 s2 s1 c1 a2 b1 App s2 s2

    c1 s1 s2

  87. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    s1 c1 s2

  88. a2 b1 App s2 s2 c1 s1

  89. a2 b1 App s2 s2 c1 s1

  90. a2 b1 App s2 s2 c1 s1 a2

  91. a2 b1 App s2 s2 c1 s1 a2

  92. a2 s2 a2 b1 App s2 s2 c1 s1

  93. a2 s2 a2 b1 App s2 s2 c1 s1

  94. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  95. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  96. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  97. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  98. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1

  99. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1

  100. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1 s1

  101. a2 b1 s2 c1 s1 a2 b1 s2 s1 c1

    s2

  102. Anything I can do? When in doubt, clear node_modules out

  103. Save Lockfile npm shrinkwrap

  104. Save Lockfile By default turned off

  105. Upgrade of Package A a2 b1 App s2 s2 c1

    s1

  106. a2 b1 App s2 s2 c1 s1

  107. a2 b1 App s2 s2 c1 s1 a2

  108. a2 b1 App s2 s2 c1 s1 a2

  109. a2 s2 a2 b1 App s2 s2 c1 s1

  110. a2 s2 a2 b1 App s2 s2 c1 s1

  111. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  112. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  113. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  114. a2 b1 s2 a2 b1 App s2 s2 c1 s1

  115. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1

  116. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1

  117. a2 b1 App s2 s2 c1 s1 a2 b1 s2

    c1 s1

  118. a2 b1 s2 c1 s1

  119. a2 b1 s2 c1 s1

  120. Project Code package.json + + Lockfile

  121. Performance

  122. Issue opened by Sam Saccone November 2015 https://github.com/npm/npm/issues/10380

  123. GET a1 GET b1 GET s1 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s Multi-Stage Installation

  124. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  125. GET a1 GET b1 GET s1 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  126. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  127. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  128. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  129. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  130. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  131. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  132. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  133. GET a1 GET b1 GET s1 GET s2 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  134. GET a1 GET b1 GET s2 Timeline start 1.0s 1.5s

    2.0s 2.5s Built-In Parallelism GET s1

  135. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  136. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  137. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  138. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  139. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2

  140. GET a1 GET b1 GET s2 GET s1 Timeline start

    1.0s 1.5s 2.0s 2.5s a1 s1 b1 s2
  141. None

  142. Last Chapter

  143. Ember CLI 2.13 onwards is “yarn aware”

  144. Ember CLI 2.13 onwards is “yarn aware” Angular CLI 1.0.0-beta31

    onwards is “yarn aware”

  145. 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

  146. Community project with governance model taken from Ember and Rust

    Contribute https://github.com/yarnpkg/yarn
  147. None

  148. npm 5.0.0 Beta https://github.com/npm/npm/pull/16244

  149. ๏ New, standardised Lockfile feature https://github.com/npm/npm/pull/16244

  150. ๏ New, standardised Lockfile feature ๏ Cache rewrite https://github.com/npm/npm/pull/16244

  151. ๏ New, standardised Lockfile feature ๏ Cache rewrite ๏ Better

    summary report https://github.com/npm/npm/pull/16244

  152. http://blog.npmjs.org/

  153. And they lived happily ever after…

  154. Thank You! @serifritsch [email protected]