[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. 1.

    Front-end tooling: package managers bower, npm i nowy dzieciak w

    sąsiedztwie czyli yarn Michał Michalczuk Full-Stack Software Developer
  2. 4.

    Package manager - co toto? 4 Oprogramowanie które: • zarządzania

    programami/bibliotekami • zmniejsza manualne operacje dla ww. • śledzi wersje oprogramowania
  3. 7.

    Package managers 7 Idea nie jest nowa Systemowe • dpkg

    • apt • pacman • yum • homebrew • chocolate
  4. 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 • ...
  5. 9.

    Package managers 9 Problem jest jak widać powszechny Aplikacje/Dev pip

    & pypi NuGet anaconda maven gradle gem ivy composer itd.
  6. 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>
  7. 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
  8. 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
  9. 15.
  10. 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
  11. 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
  12. 19.
  13. 20.

    npm 20 • npm scripts • ogromne repozytorium • podział

    na zależności prod i dev • npm shrinkwrap • engines
  14. 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" } }
  15. 22.
  16. 23.

    npm 23 • czas czas czas • długie ścieżki (not-windows

    friendly) • nie deterministyczne instalowanie pakietów
  17. 25.

    25

  18. 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
  19. 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
  20. 29.

    npm - shrinkwrap 29 $ npm shrinkwrap $ # commit

    npm-shrinkwrap.json $ npm install jquery --save $ # npm-shrinkwrap.json updated npm-shrinkwrap.json
  21. 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
  22. 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
  23. 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
  24. 35.
  25. 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
  26. 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
  27. 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}’
  28. 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