Spin me a Yarn

DublinJS 2017

Transcript

1. Spin me a Yarn Serena Fritsch @serifritsch serena@intercom.io DublinJS 2017
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/
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?
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
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 a@1.0.0 add b@1.0.0 add s@2.0.0 add s@1.0.0 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
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
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
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 serena@intercom.io