3camp tech 2016/11/15 - front-end tooling: package managers
TRANSCRIPT
![Page 1: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/1.jpg)
Front-end tooling: package managersbower, npm i nowy dzieciak w sąsiedztwie czyli yarn
Michał MichalczukFull-Stack Developer
![Page 2: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/2.jpg)
1.Idea package managerów2.Historia w JavaScript3.Bower4.Npm5.Yarn
2
![Page 4: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/4.jpg)
Package manager - co toto?
4
Oprogramowanie które:• zarządzania programami/bibliotekami• zmniejsza manualne operacje dla ww.• śledzi wersje oprogramowania
![Page 5: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/5.jpg)
Package manager - co toto?
5
Wikipedia: https://upload.wikimedia.org/wikipedia/commons/2/22/Pms.svg
![Page 6: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/6.jpg)
A przynajmniej nie zawsze
package manager
rejestr / repo pakietów
task runner / bundle maker
6
![Page 7: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/7.jpg)
Package managers
7
Idea nie jest nowa
Systemowe• dpkg• apt• pacman• yum• homebrew• chocolate
![Page 8: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/8.jpg)
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• ...
![Page 9: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/9.jpg)
Package managers
9
Problem jest jak widać powszechny
Aplikacje/Devpip & pypi
NuGetanaconda
maven
gradle gem
ivy
composer itd.
![Page 10: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/10.jpg)
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>
![Page 11: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/11.jpg)
Managery pakietów
w światku JavaScript
11
![Page 12: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/12.jpg)
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
![Page 13: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/13.jpg)
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
![Page 14: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/14.jpg)
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
![Page 15: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/15.jpg)
![Page 16: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/16.jpg)
Bower - płaskie zależności
16
![Page 17: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/17.jpg)
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
![Page 18: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/18.jpg)
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
![Page 19: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/19.jpg)
![Page 20: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/20.jpg)
npm
20
• npm scripts• ogromne repozytorium• podział na zależności prod i dev• npm shrinkwrap• engines
![Page 21: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/21.jpg)
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" }}
![Page 22: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/22.jpg)
npm - package.json angular-cli jako start
22
{ ... "scripts": {
"start": "ng build -w *.*" }, ...}
![Page 23: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/23.jpg)
npm
23
• czas czas czas• długie ścieżki (not-windows friendly)• nie deterministyczne instalowanie
pakietów
![Page 24: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/24.jpg)
npm - do niedawna tylko zagnieżdżone zależności
24
![Page 25: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/25.jpg)
25
![Page 26: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/26.jpg)
Niespodziewane zmiany zależności - choroba npm & bowerBower
{ "name": "3camp-bower", ... "dependencies": { "moment": "momentjs#^2.16.0" }}
npm
{ "name": "3camp-npm", ... "dependencies": { "moment": "^2.16.0" }}
26
pułapka semver
![Page 27: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/27.jpg)
Niespodziewane zmiany zależności - rozwiązania
Bower
natywnie:
zewnętrzne biblioteki:https://github.com/shyiko/bower-shrinkwrap-resolver
npm
natywnie: npm shrinkwrap
27
![Page 28: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/28.jpg)
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
![Page 29: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/29.jpg)
npm - shrinkwrap
29
$ npm shrinkwrap$ # commit npm-shrinkwrap.json
$ npm install jquery --save$ # npm-shrinkwrap.json updated
npm-shrinkwrap.json
![Page 30: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/30.jpg)
$ 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
![Page 31: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/31.jpg)
11.10.2016 - Facebook wypuszcza yarn-a
31
![Page 33: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/33.jpg)
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
![Page 34: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/34.jpg)
yarn / yarnpkg - nowy dzieciak w sąsiedztwie
34
• opcja pracy offline• globalny cache (tak, działa lepiej niż w
npm)• kolejnowanie requestów http
![Page 35: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/35.jpg)
![Page 36: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/36.jpg)
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
![Page 37: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/37.jpg)
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
![Page 38: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/38.jpg)
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 multiplatformowyWindows 10: error An unexpected error occurred: "ENOENT: no such file or directory, open ‘{file-
path}’
![Page 39: 3Camp Tech 2016/11/15 - Front-end tooling: package managers](https://reader035.vdocument.in/reader035/viewer/2022081604/5899b4571a28aba11e8b5697/html5/thumbnails/39.jpg)
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