class: center, middle # you don't know ![npm logo](public/img/npm.png) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ## http://bit.ly/berlinjs-2017 ### (gh-pages: ashleygwilliams/berlinjs-2017) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # hi my name is @ag_dubs --- class: center, middle background-image: url(public/img/pbn_forest.jpg) background-color: #FFE4C4 # over the last year # .real-big[70 billion] # package downloads occured .citation[https://twitter.com/seldo/status/845094537752014852. 23 March 2017.] --- class: center, middle background-image: url(public/img/pbn_forest.jpg) background-color: #FFE4C4 ![rolling-weekly-download](public/img/rolling-downloads.jpg) .citation[https://twitter.com/seldo/status/845094537752014852. 23 March 2017.] --- class: center, middle ## stuff everybody knows # `npm install` --- class: center, middle ## stuff not everyone knows ![i dont know](public/img/idontknow.gif) --- class: top, left ## create a package.json # `npm init` - ### knows your deps from node_modules - ### knows your repository from git repo - ### always adds keys, never deletes ![chick](public/img/chick.png) --- class: top, left ## create a package.json with defaults # `npm init --yes` ![yes](public/img/yes.gif) --- class: top, left ## customize npm init questions # `~/.npm-init.js` ### enforce license and best practices ![question](public/img/question.png) ![art](public/img/art.png) ![question](public/img/question.png) --- class: center, middle # check your package before you publish! # `npm pack` # `tar xvzf pkg.tar.gz` --- class: left, middle # `"files": [...]` ### - add as an array to your package.json ### - list the files that should be included ### - some things are included even if they aren't listed like package.json or a README --- class: center, middle background-image: url(public/img/pbn_fast.jpg) ![npm5](public/img/npm5.svg) --- class: center, middle background-image: url(public/img/pbn_fast.jpg) .cli[![kat](public/img/kat.jpg)] .cli[![rebecca](public/img/rebecca.jpg)] --- class: center, middle background-image: url(public/img/pbn_path.jpg) .code-heading[`npm install --save`] # by default --- class: center, middle background-image: url(public/img/pbn_path.jpg) .code-heading[`npm install --no-save`] .code-heading[`npm install --save-dev`] --- class: center, middle background-image: url(public/img/pbn_path.jpg) # semver ranges for git deps! .code-heading2[`git@github.com:npm/marky-markdown.git#semver:^9`] .citation[https://github.com/npm/npm/pull/15308] --- class: center, middle background-image: url(public/img/pbn_swans.jpg) # post install summary! ![summary](public/img/summary.png) .citation[https://github.com/npm/npm/pull/15914] --- class: center, middle background-image: url(public/img/pbn_deer.JPG) # offline-enabled by default --- class: center, middle background-image: url(public/img/pbn_deer.JPG) .code-heading[`--prefer-offline`] ### skip any conditional requests (304 checks) for stale cache data, and only hit the network if something is missing from the cache --- class: center, middle background-image: url(public/img/pbn_deer.JPG) .code-heading[`--offline`] ### force npm to use the cache or exit, will error with an ENOTCACHED code if anything it tries to install isn't already in the cache. --- class: center, middle background-image: url(public/img/pbn_deer.JPG) .code-heading[`npm cache verify`] ### garbage collect your cache, reducing disk usage for things you don't need (-handwave-), and will do full integrity verification on both the index and the content --- class: center, middle background-image: url(public/img/pbn_fast.jpg) # npm5 is FAST ![fast](public/img/fast.png) --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) # shrinkwraps and lockfiles ### https://github.com/npm/npm/pull/16441 --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) # automatic lockfile .code-heading[`package-lock.json`] ## never publishable to the registry. --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) .code-heading[`npm-shrinkwrap.json`] ## if you want to publish it so that users of your module will consume it. --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) # libraries and applications have different dependency needs --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) # libraries => benefit from flexibility of semver ranges # applications => need precision for reproducibility --- class: center, middle background-image: url(public/img/pbn_ocean.jpg) ![](public/img/pr.png) --- class: center, middle background-image: url(public/img/pbn_shore.jpg) .shattered[![shattered](public/img/shattered.png)] .shattered2[![](public/img/shattered2.png)] .citation[https://shattered.io/. Accessed 4 May 2017.] --- class: center, middle background-image: url(public/img/pbn_shore.jpg) .code-heading[`package-integrity`] ### a hash of the package.json that was in use when the lock/shrinkwrap was created ![integrity](public/img/integrity.png) .citation[https://github.com/npm/npm/blob/7646f5f078963f67320cab13078168a686b718be/spec/shrinkwrap-and-lock.md#integrity-new] --- class: center, middle background-image: url(public/img/pbn_setter.jpg) # end to end cache recovery --- class: left, middle background-image: url(public/img/pbn_fast.jpg) # install the beta! .code-heading[`npm i npm5 -g`] .code-heading[`npm5 i allthepkgs`] --- class: center, middle background-image: url(public/img/pbn_fast.jpg) # there will be bugs ### https://github.com/npm/npm/issues/16510 --- class: center, middle background-image: url(public/img/pbn_fast.jpg) # official tracking issue ### https://github.com/npm/npm/issues/16510 --- class: center, middle background-image: url(public/img/pbn_cat.jpg) # dev with us --- class: center, middle background-image: url(public/img/pbn_cat.jpg) # pacote ## programmatic npm package and metadata downloader ### https://github.com/zkat/pacote --- class: center, middle background-image: url(public/img/pbn_cat.jpg) # cacache ## local key and content address cache mgmt ### https://github.com/zkat/cacache --- class: center, middle background-image: url(public/img/pbn_cat.jpg) # make-fetch-happen ## node-fetch plus cache support, request pooling, and more ### https://github.com/zkat/make-fetch-happen --- class: center middle background-image: url(public/img/pbn_cat.jpg) # ssri ## standard subresource integrity ### https://github.com/zkat/ssri --- class: center, middle background-image: url(public/img/pbn_field.jpg) background-color: #FFE4C4 # npm is being used for a lot of things we never expected --- class: center, middle background-image: url(public/img/pbn_field.jpg) background-color: #FFE4C4 ![greenkeeper](public/img/greenkeeper.png) --- class: center, middle background-image: url(public/img/pbn_field.jpg) background-color: #FFE4C4 ![npms](public/img/npms.png) --- class: center, middle background-image: url(public/img/pbn_field.jpg) background-color: #FFE4C4 ![yarn](public/img/yarn.jpg) --- class: center, middle background-image: url(public/img/pbn_field.jpg) background-color: #FFE4C4 ![cnpm](public/img/cnpm.png) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # and so can you! --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # public APIs --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # downloads API ![blog downloads](public/img/blogdownloads.png)] .citation[http://blog.npmjs.org/post/92574016600/numeric-precision-matters-how-npm-download-counts] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ![](public/img/downloadsapi1.png) ![](public/img/downloadsapi2.png) ![](public/img/downloadsapi3.png) .citation[https://github.com/npm/registry/blob/master/docs/download-counts.md] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # search API ![search api](public/img/searchapi.png) .citation[https://github.com/npm/registry/blob/master/docs/REGISTRY-API.md#get-v1search] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # registry changes-stream # [https://replicate.npmjs.com](https://replicate.npmjs.com) .citation[https://github.com/jcrugzz/changes-stream] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ## write a registry follower ![follower](public/img/follower.png) .citation[https://github.com/npm/registry/blob/master/docs/follower.md] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # webhooks ![priate wombat](public/img/piratewombat.png) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ![hook events](public/img/hookevents.png) .citation[https://github.com/npm/registry/tree/master/docs/hooks] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # notifications in slack ![captain hook](public/img/captainhook.png) .citation[https://github.com/npm/captain-hook] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ![wombat cli](public/img/wombatcli.png) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 .code-heading[`npm i wombat -g`] .code-heading[`wombat hook add
`] --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 ## [https://github.com/npm/registry/](https://github.com/npm/registry/) ![registry repo](public/img/registry-repo.png) --- class: center, middle background-image: url(public/img/pbn_ship.jpg) background-color: #FFE4C4 # we are so excited to see what you build --- class: center, middle # update your npm! # `npm i npm@latest -g` --- class: center, middle # you can use any npm with any node version -- # so you should always use the most up to date version --- class: center, middle background-image: url(public/img/pbn_fast.jpg) background-color: #FFE4C4 ![npm](public/img/npm5.svg) .code-heading[`npm install npm5 -g`] --- class: center, middle background-image: url(public/img/pbn_fast.jpg) # thanks! # i'm @ag_dubs ## bit.ly/berlinjs-2017