Presentation from 3Camp Tech meeting I took at 2016/11/15. Asciinema from presentation: * bower: https://asciinema.org/a/92748 * npm: https://asciinema.org/a/92752 * yarn: https://asciinema.org/a/92771

1. Front-end tooling: package managers
bower, npm i nowy dzieciak w sąsiedztwie czyli yarn
Michał Michalczuk
Full-Stack Developer

2. 1.Idea package managerów
2.Historia w JavaScript
3.Bower
4.Npm
5.Yarn
2

3. Punkt wyjścia
3
Jose Aguinaga na medium.com
https://goo.gl/kDVkbY

4. Package manager - co toto?
4
Oprogramowanie które:
• zarządzania programami/bibliotekami
• zmniejsza manualne operacje dla ww.
• śledzi wersje oprogramowania

5. Package manager - co toto?
5
Wikipedia: https://upload.wikimedia.org/wikipedia/commons/2/22/Pms.svg

6. A przynajmniej nie zawsze
package manager
rejestr / repo pakietów
task runner / bundle maker
6

7. Package managers
7
Idea nie jest nowa
Systemowe
• dpkg
• apt
• pacman
• yum
• homebrew
• chocolate

8. Package managers
8
Idea nie jest nowa
Dla IDE
• SublimeText Package Control
• Visual Studio Code Extensions Manager
• R# Extensions Manager
• Intellij/Webstorm itd Plugin Manager
• ...

9. Package managers
9
Problem jest jak widać powszechny
Aplikacje/Dev
pip & pypi
NuGet
anaconda
maven
gradle
gem
ivy
composer itd.

10. Web Development 1.0
10
// biblioteka w źródłach
<script src="vendors/js/jquery-1.11.0.min.js"></script>
// cdn
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

11. Managery pakietów
w światku JavaScript
11

12. Package managery dedykowane/używane do front-endu
12
https://github.com/duojs/duo
https://github.com/componentjs/component
https://github.com/caolan/jam
https://github.com/volojs/volo
https://github.com/ender-js/Ender
https://github.com/jspm/jspm-cli
https://github.com/bower/bower
https://github.com/npm
https://github.com/yarnpkg/yarn

13. Jak to aktualnie wygląda?
13
https://github.com/duojs/duo
https://github.com/componentjs/component
https://github.com/caolan/jam
https://github.com/volojs/volo
https://github.com/ender-js/Ender
https://github.com/jspm/jspm-cli
https://github.com/bower/bower
https://github.com/npm
https://github.com/yarnpkg/yarn

14. Bower
14
• Dedykowany dla front-end-u
• Płaskie zależności (od zawsze)
• bower.json
• zarządzanie zależnościami
• publikowanie pakietów
• wersja stabilna: 1.8

16. Bower - płaskie zależności
16

17. Bower - warto wiedzieć
17
• hostowany na Heroku ($170/month)
• 2points of failure: Heroku & GitHub
• brak wersjonowania rejestru
• migracja rejestru na GitHub - w trakcie
(MVP już dostępne)
• Moving Bower Registry to GitHub
• GitHub.com : bower/components

18. npm
18
• node package manager
• package.json
• pierwotnie tylko pakiety node.js
• do wersji 2 tylko zagnieżdżone zależności
• wersja stabilna: 3.x
• pre-releasae: 4.0.x

20. npm
20
• npm scripts
• ogromne repozytorium
• podział na zależności prod i dev
• npm shrinkwrap
• engines

21. npm - package.json angular-cli
21
{
"scripts": {
"build": "node ./scripts/publish/build.js",
"test:packages": "node scripts/run-packages-spec.js",
"eslint": "eslint ."
...
},
"engines": {
"node": ">= 4.1.0",
"npm": ">= 3.0.0"
},
...
"dependencies": {
"@angular-cli/ast-tools": "^1.0.0",
"@angular/common": "~2.1.0",
...
},
"devDependencies": {
"@types/chai": "^3.4.32",
"@types/chalk": "^0.4.28",
...
"sinon": "^1.17.3",
"walk-sync": "^0.2.6"
}
}

22. npm - package.json angular-cli jako start
22
{
...
"scripts": {
"start": "ng build -w *.*"
},
...
}

23. npm
23
• czas czas czas
• długie ścieżki (not-windows friendly)
• nie deterministyczne instalowanie pakietów

24. npm - do niedawna tylko zagnieżdżone zależności
24

25. 25

26. Niespodziewane zmiany zależności - choroba npm & bower
Bower
{
"name": "3camp-bower",
...
"dependencies": {
"moment": "momentjs#^2.16.0"
}
}
npm
{
"name": "3camp-npm",
...
"dependencies": {
"moment": "^2.16.0"
}
}
26
pułapka semver

27. Niespodziewane zmiany zależności - rozwiązania
Bower
natywnie:
zewnętrzne biblioteki:
https://github.com/shyiko/bower-shrinkwrap-
resolver
npm
natywnie: npm shrinkwrap
27

28. npm - shrinkwrap
28
{
"name": "3camp-npm",
"version": "1.0.0",
"dependencies": {
"moment": {
"version": "2.16.0",
"from": "moment@*",
"resolved":"http://registry.npmjs.org/moment/-/moment-2.16.0.tgz"
}
}
}
npm-shrinkwrap.json

29. npm - shrinkwrap
29
$ npm shrinkwrap
$ # commit npm-shrinkwrap.json
$ npm install jquery --save
$ # npm-shrinkwrap.json updated
npm-shrinkwrap.json

30. $ npm shrinkwrap -dev
$ # npm-shrinkwrap.json updated
$ npm install tslint --save-dev
$ npm shrinkwrap -dev
$ # run manually :(
npm - shrinkwrap. Zależności dev
30
npm-shrinkwrap.json

31. 11.10.2016 - Facebook wypuszcza yarn-a
31

32. Moja pierwsza reakcja
32
xkcd: https://xkcd.com/927/

33. yarn / yarnpkg - nowy dzieciak w sąsiedztwie
33
• korzysta z repozytoriów npm i bower
• zgodny z package.json
• node_modules
• deterministyczny
• szybki
• automatyczny lock (odpowiednik
shrinkwrap)
• generowanie listy licencji wszystkich
pakietów

34. yarn / yarnpkg - nowy dzieciak w sąsiedztwie
34
• opcja pracy offline
• globalny cache (tak, działa lepiej niż w npm)
• kolejnowanie requestów http

36. yarn / yarnpkg - jak szybki jest?
36
https://medium.freecodecamp.com/npm-vs-yarn-benchmark-9b456de4aa96#.84t483iqv
Czas w [s]
angular2 | ember | react
| npm_with_empty_cache | 15.687 | 56.993 | 93.650
| npm_with_all_cached | 9.380 | 52.380 | 81.213
|yarn_with_empty_cache | 9.477 | 30.757 | 37.497
| yarn_with_all_cached | 4.650 | 15.090 | 17.730

37. yarn / yarnpkg - jak szybki jest na CI?
37
Czas w [s]
angular2 | ember | react
| npm_with_empty_cache | 19.720 | 55.090 | 76.233
| npm_with_all_cached | 14.640 | 40.203 | 56.467
|yarn_with_empty_cache | 13.193 | 34.037 | 43.663
| yarn_with_all_cached | 5.830 | 15.923 | 40.420

38. yarn / yarnpkg - nowy dzieciak w sąsiedztwie
38
• jeszcze nie do końca kompatybilny z npm
(zależności do plików)
dependencies: {
"my-package": "../my-package",
}
dependencies: {
"my-package": "file:../my-package",
}
• jeszcze nie do końca multiplatformowy
Windows 10: error An unexpected error occurred:
"ENOENT: no such file or directory, open ‘{file-path}’

39. yarn benchmark: https://medium.freecodecamp.com/npm-vs-yarn-benchmark-
9b456de4aa96#.3r20pxkz1
NPM vs Yarn Cheat Sheet: https://shift.infinite.red/npm-vs-yarn-cheat-sheet-
8755b092e5cc#.rq6q2e5at
Package managers 101: https://medium.freecodecamp.com/javascript-package-
managers-101-9afd926add0a#.oqbv7v8g9
bower packages repo goes to GitHub:
https://twitter.com/sheerun/status/796046017133211648
Migrate from npm to yarn:
https://yarnpkg.com/en/docs/migrating-from-npm
yarn, facebook blog: https://code.facebook.com/posts/1840075619545360/yarn-a-new-
package-manager-for-javascript/
file issue, yarn:
yarnpkg/yarn: Issue #605
front-end packages (old):
https://github.com/wilmoore/frontend-packagers
npm shrinkwrap:
https://docs.npmjs.com/cli/shrinkwrap
39

40. Dziękuję za uwagę
michalczukm michalczukm@gmail.com
prezentacja:
goo.gl/foo

41. Pytania?
michalczukm michalczukm@gmail.com
prezentacja:
goo.gl/foo