[3Camp] Front-end tooling - package managers

[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

Bb0a01a2311e4828a7e6dc721142ce0b?s=128

Michał Michalczuk

November 15, 2016
Tweet

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
  15. None
  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
  19. None
  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
  35. None
  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