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

Spin me a Yarn

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
SourceGeneratorのススメ
Avatar for tkym htkym
0
670
今、アーキテクトとして 品質保証にどう関わるか
Avatar for Nealle nealle
0
180
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
2k
DSPy入門 Pythonで実現する自動プロンプト最適化 〜人手によるプロンプト調整からの卒業〜
Avatar for sea-turt1e seaturt1e
1
200
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
430
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
390
ぼくの開発環境2026
Avatar for yuzneri yuzneri
1
290
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
250
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
110
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
2
850
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
440
iOSアプリでフロントエンドと仲良くする
Avatar for Ryu-nakayama ryunakayama
0
120

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
130
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
400
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
620
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
560
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
920
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
130

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]