Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[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

Michał Michalczuk

November 15, 2016
Tweet

More Decks by Michał Michalczuk

Other Decks in Programming

Transcript

  1. Front-end tooling: package managers
    bower, npm i nowy dzieciak w sąsiedztwie czyli yarn
    Michał Michalczuk
    Full-Stack Software Developer

    View full-size slide

  2. 1.
    Idea package managerów
    2.
    Historia w JavaScript
    3.
    Bower
    4.
    Npm
    5.
    Yarn
    2

    View full-size slide

  3. Punkt wyjścia
    3
    Jose Aguinaga na medium.com
    https://goo.gl/kDVkbY

    View full-size slide

  4. Package manager - co toto?
    4
    Oprogramowanie które:
    ● zarządzania programami/bibliotekami
    ● zmniejsza manualne operacje dla ww.
    ● śledzi wersje oprogramowania

    View full-size slide

  5. Package manager - co toto?
    5
    Wikipedia: https://upload.wikimedia.org/wikipedia/commons/2/22/Pms.svg

    View full-size slide

  6. A przynajmniej nie zawsze
    package manager
    rejestr / repo pakietów
    task runner / bundle maker
    6

    View full-size slide

  7. Package managers
    7
    Idea nie jest nowa
    Systemowe
    ● dpkg
    ● apt
    ● pacman
    ● yum
    ● homebrew
    ● chocolate

    View full-size slide

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

    View full-size slide

  9. Package managers
    9
    Problem jest jak widać powszechny
    Aplikacje/Dev
    pip & pypi NuGet
    anaconda
    maven
    gradle gem
    ivy
    composer itd.

    View full-size slide

  10. Web Development 1.0
    10
    // biblioteka w źródłach

    // cdn
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous">

    View full-size slide

  11. Managery pakietów
    w światku JavaScript
    11

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  15. Bower - płaskie zależności
    16

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  18. npm
    20
    ● npm scripts
    ● ogromne repozytorium
    ● podział na zależności prod i dev
    ● npm shrinkwrap
    ● engines

    View full-size slide

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

    View full-size slide

  20. npm - package.json angular-cli jako start
    22
    {
    ...
    "scripts": {
    "start": "ng build -w *.*"
    },
    ...
    }

    View full-size slide

  21. npm
    23
    ● czas czas czas
    ● długie ścieżki (not-windows friendly)
    ● nie deterministyczne instalowanie pakietów

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Niespodziewane zmiany zależności - rozwiązania
    Bower
    natywnie:
    zewnętrzne biblioteki:
    https://github.com/shyiko/bower-shrinkwrap
    -resolver
    npm
    natywnie: npm shrinkwrap
    27

    View full-size slide

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

    View full-size slide

  26. npm - shrinkwrap
    29
    $ npm shrinkwrap
    $ # commit npm-shrinkwrap.json
    $ npm install jquery --save
    $ # npm-shrinkwrap.json updated
    npm-shrinkwrap.json

    View full-size slide

  27. $ 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

    View full-size slide

  28. 11.10.2016 - Facebook wypuszcza yarn-a
    31

    View full-size slide

  29. Moja pierwsza reakcja
    32
    xkcd: https://xkcd.com/927/

    View full-size slide

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

    View full-size slide

  31. yarn / yarnpkg - nowy dzieciak w sąsiedztwie
    34
    ● opcja pracy offline
    ● globalny cache (tak, działa lepiej niż w npm)
    ● kolejnowanie requestów http

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. Dziękuję za uwagę
    michalczukm [email protected]
    prezentacja:
    goo.gl/aFc4ys

    View full-size slide

  37. Pytania?
    michalczukm [email protected]
    prezentacja:
    goo.gl/aFc4ys

    View full-size slide