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

Spin me a Yarn

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Serena Fritsch Serena Fritsch
May 02, 2017
Programming
1
73

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
170
Crafting the Perfect Computed Property
Avatar for Serena Fritsch serenaf
0
64

Other Decks in Programming

See All in Programming
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
270
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
280
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
570
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
200
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
230
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
120

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
1
380
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
It's Worth the Effort
Avatar for 3n 3n
188
29k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
180
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k

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]