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

Spin me a Yarn

Serena Fritsch
May 02, 2017
Programming
1
60

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
260
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Crafting the Perfect Computed Property
serenaf
0
61

Other Decks in Programming

See All in Programming
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
320
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
200
State of Namespace
tagomoris
4
750
Going Structural with Named Tuples
bishabosha
0
200
Making TCPSocket.new "Happy"!
coe401_
1
130
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
230
Vibe Codingをせずに Clineを使っている
watany
17
6.1k
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
730
技術選定を未来に繋いで活用していく
sakito
3
100
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.2k

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
40
7.2k
Agile that works and the tools we love
rasmusluckow
328
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Faster Mobile Websites
deanohume
306
31k
GraphQLとの向き合い方2022年版
quramy
46
14k
How to train your dragon (web standard)
notwaldorf
91
6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k

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]