[3Camp] Front-end tooling - package managers

How to survive and not get confused in the world of JavaScript tooling - package managers in this case.
npm, bower, yarn and a lot .. a lot of other solutions.

3Camp meetup; Gdańsk, Poland

Transcript

1. Front-end tooling: package managers bower, npm i nowy dzieciak w sąsiedztwie czyli yarn Michał Michalczuk Full-Stack Software 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
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#.3r20pxkz 1 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#.o qbv7v8g9 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-fo r-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/aFc4ys
41. Pytania? michalczukm michalczukm@gmail.com prezentacja: goo.gl/aFc4ys