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

Spin me a Yarn

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Serena Fritsch Serena Fritsch
May 02, 2017
Programming
1
74

Spin me a Yarn

DublinJS 2017

Avatar for Serena Fritsch

Serena Fritsch

May 02, 2017
Tweet

More Decks by Serena Fritsch

See All by Serena Fritsch
Let Me Ember this for You
Avatar for Serena Fritsch serenaf
0
270
Emberconf 2017 - Spin me a Yarn
Avatar for Serena Fritsch serenaf
0
180
Crafting the Perfect Computed Property
Avatar for Serena Fritsch serenaf
0
65

Other Decks in Programming

See All in Programming
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
630
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
520
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
350
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
280
2026/02/04 AIキャラクター人格の実装論 口 調の模倣から、コンテキスト制御による 『思想』と『行動』の創発へ
Avatar for Sald ra sr2mg4
0
680
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
190
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
Avatar for JunkiIshida junkiishida
1
350
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
0
150
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
680
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
Avatar for Jun okazaki okajun35
0
520

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
360
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
150
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
130
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
220
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
190
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
270
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

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]