3camp tech 2016/11/15 - front-end tooling: package managers

Front-end tooling: package managersbower, npm i nowy dzieciak w sąsiedztwie czyli yarn

Michał MichalczukFull-Stack Developer

1.Idea package managerów2.Historia w JavaScript3.Bower4.Npm5.Yarn

2

Punkt wyjścia

3

Jose Aguinaga na medium.comhttps://goo.gl/kDVkbY

Package manager - co toto?

4

Oprogramowanie które:• zarządzania programami/bibliotekami• zmniejsza manualne operacje dla ww.• śledzi wersje oprogramowania

Package manager - co toto?

5

Wikipedia: https://upload.wikimedia.org/wikipedia/commons/2/22/Pms.svg

A przynajmniej nie zawsze

package manager

rejestr / repo pakietów

task runner / bundle maker

6

Package managers

7

Idea nie jest nowa

Systemowe• dpkg• apt• pacman• yum• homebrew• chocolate

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• ...

Package managers

9

Problem jest jak widać powszechny

Aplikacje/Devpip & pypi

NuGetanaconda

maven

gradle gem

ivy

composer itd.

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>

Managery pakietów

w światku JavaScript

11

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

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

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

Bower - płaskie zależności

16

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

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

npm

20

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

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" }}

npm - package.json angular-cli jako start

22

{ ... "scripts": {

"start": "ng build -w *.*" }, ...}

npm

23

• czas czas czas• długie ścieżki (not-windows friendly)• nie deterministyczne instalowanie

pakietów

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

24

25

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

Niespodziewane zmiany zależności - rozwiązania

Bower

natywnie:

zewnętrzne biblioteki:https://github.com/shyiko/bower-shrinkwrap-resolver

npm

natywnie: npm shrinkwrap

27

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

npm - shrinkwrap

29

$ npm shrinkwrap$ # commit npm-shrinkwrap.json

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

npm-shrinkwrap.json

$ 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

11.10.2016 - Facebook wypuszcza yarn-a

31

Moja pierwsza reakcja

32

xkcd: https://xkcd.com/927/

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

yarn / yarnpkg - nowy dzieciak w sąsiedztwie

34

• opcja pracy offline• globalny cache (tak, działa lepiej niż w

npm)• kolejnowanie requestów http

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

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

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}’

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

Dziękuję za uwagę

michalczukm michalczukm@gmail.com

prezentacja:goo.gl/foo

Pytania?

michalczukm michalczukm@gmail.com

prezentacja:goo.gl/foo