the ag_deck

class: center, middle

![title slide](public/img/title-slide.jpg)

---
class: center, middle

# you don't know
![npm logo](public/img/npm.png)

---
class: center, middle

## http://bit.ly/fwdays-2017
### (gh-pages: ashleygwilliams/fwdays-2017)

---
class: center, middle

# hi my name is @ag_dubs
![space invader](public/img/spaceinvader.png)
![ghost](public/img/ghost.png)
![dolphin](public/img/dolphin.png)

---
class: center, middle

![real-eyes](public/img/realeyes.jpg)

---
class: center, middle

# if you have some 💸 you can give it to us

# we'll use it to keep the registry running 🏃🏿

---
class: center, middle

![wombat](public/img/wombat.gif)

# 23 humans work at npm

---
class: center, middle

![wdu](public/img/wdu.png)

.citation[https://twitter.com/sofianguy/status/626260419716317185]

---
class: center, middle

# CLI
# Registry
# Website

---
class: center, middle

# CLI
# .real-big[✨Registry✨]
# Website

---
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: center, middle

# `npm isntall`

![sweatsmile](public/img/sweat-smile.png)
![sweatsmile](public/img/sweat-smile.png)
![sweatsmile](public/img/sweat-smile.png)

---
class: top, left

## add deps from the CLI
# `npm i --save`
# `npm i --save-dev`

![disk](public/img/disk.png)
![disk](public/img/disk.png)
![disk](public/img/disk.png)

---
class: top, left

## add deps from the CLI
# `npm i -S`
# `npm i -D`

![disk](public/img/disk.png)
![disk](public/img/haircut.png)
![disk](public/img/disk.png)

---
class: middle, left

## show the dep tree
# `npm ls`

![list](public/img/clipboard.png)
![tree](public/img/tree.png)
![list](public/img/clipboard.png)

---
class: middle, left

## show just primary deps
# `npm ls --depth=0`

![list](public/img/clipboard.png)
![list](public/img/seedling.png)
![list](public/img/clipboard.png)

---
class: middle, center

![npm prune](public/img/npm-prune.png)

---
class: top, left

## npm... global cache?
# `.npm/`
## modules are stored in the home directory

### ... but you can't use this offline because it still hits the network

---
class: top, left

## npm install offline
### `npm install --cache-min 999999`

### we should probably just alias this to:
### `npm install --offline`

![money](public/img/cash.png)
![money](public/img/cash.png)
![money](public/img/cash.png)

---
class: top, left

## npm install offline
# `npm pack`
## `npm install my-pkg.tgz`
### create a tarball out of any package and then use install directly on the tarball

![shirt](public/img/shirt.png)
![soon](public/img/soon.png)
![suitcase](public/img/suitcase.png)

---
class: top, left

## pack your deps!
# `bundledDependencies`
### pack doesn't add your pkg's deps BUT
### bundled deps are added to the tarball!

![suitcase](public/img/suitcase.png)
![soon](public/img/soon.png)
![suitcase](public/img/suitcase.png)

---
class: middle, left, dependencies

- ## `dependencies` ![juggling](public/img/juggling.png)
- ## `devDependencies` ![hammer wrench](public/img/hammer_wrench.png)
- ## `optionalDependencies` ![ghost](public/img/shrug.png)
- ## `peerDependencies` ![plug](public/img/plug.png)

---
class: top, left

## lock down your deps
# `npm shrinkwrap`

![shrinkwrap](public/img/shrinkwrap.gif)

---
class: top, left

## update your shrinkwrap
# `--save` and `--save-dev`

### - don't need to shrinkwrap everytime
### - new with npm3!

![lock-pen](public/img/lock-pen.png)
![new](public/img/new.png)
![lock-pen](public/img/lock-pen.png)

---
class: center, middle

# why not a default feature?

---
class: middle, center

# we believe in semver

![want to believe](public/img/wanttobelieve.jpg)

---
class: middle, center

# semver.npmjs.com
![semverdotnpmjs](public/img/semverdotnpmjs.png)

---
class: top, left

## semver made easy
# `npm version <type>`
### `types: major, minor, patch`

- ### major: breaking changes
- ### minor: feature add
- ### patch: bug fix, docs

---
class: center, middle

# npm wants to make your life easy

![nerd](public/img/nerd.png)
![sunglasses](public/img/sunglasses.png)
![nerd](public/img/nerd.png)

---
class: top, left

## automate all the things
# `npm run $anything`

### - `test`, `start`
### - customize!
![theater](public/img/theater.png)
![runner](public/img/runner.png)
![theater](public/img/theater.png)

---
class: middle, center

# lifecycle events

![lifecycle events](public/img/lifecycleevents.png)

![seedling](public/img/seedling.png)
![plant](public/img/plant.png)
![tree](public/img/tree.png)

---
class: middle, center

## `npm i --save-dev husky`

![husky](public/img/husky.png)
![husky](public/img/husky2.png)

---
class: middle, center

# `npm i -D shelljs`

![shelljs](public/img/shelljs.png)

---
class: middle, center

# get stuff for free

# `npm run env`

### `config` and `package.json` as variables

![sparkles](public/img/sparkles.png)
![free](public/img/free.png)
![sparkles](public/img/sparkles.png)

---
class: center, middle

# never install something globally again

![no](public/img/no.png)
![global](public/img/global.png)
![no](public/img/no.png)

#### ok fine, maybe *sometimes*

---
class: middle, center

# why run scripts?

# because they are **versioned**

---
class: top, left

# let's look at an example

<pre>
{
  "...": "...",
  "scripts": {
    "test": "npm run test:backend && npm run test:frontend",
    "posttest": "standard",
    "test:backend": "lab --assert code --timeout 5000",
    "test:frontend": "karma start",
    "...": "..."
  },
  "devDependencies": {
    "...": "...",
    "karma": "^1.1.1",
    "lab": "^13.0.1",
    "standard": "^10.0.2",
    "...": "..."
  }
}
</pre>

---
class: middle, left

## don't hardcode node_modules

<pre>
{
  "...": "...",
  "scripts": {
    "start": "./node_modules/mocha/bin/mocha"
  },
  "...": "..."
}
</pre>

---
class: middle, left

## don't hardcode node_modules

<pre>
{
  "...": "...",
  "scripts": {
    "start": "mocha"
  },
  "...": "..."
}
</pre>

---
class: center, middle

# cute dog break!

![](public/img/confused.gif)

---
class: center, middle

![how to publish](public/img/howpublish.jpg)

---
class: center, middle
background-image: url(public/img/pbn_barn.jpg)
background-color: #FFE4C4

![publishes](public/img/publishes.png)

---
class: center, middle
background-image: url(public/img/pbn_barn.jpg)
background-color: #FFE4C4

# 39,692 publishes/week

---
class: center, middle
background-image: url(public/img/pbn_barn.jpg)
background-color: #FFE4C4

![new packages](public/img/new_pkgs.png)

---
class: center, middle
background-image: url(public/img/pbn_barn.jpg)
background-color: #FFE4C4

# 4,685 new packages last week

---
class: center, middle
background-image: url(public/img/pbn_horses.jpg)
background-color: #FFE4C4

# ~160 people publish their first package every week

---
class: center, middle
background-image: url(public/img/pbn_horses.jpg)
background-color: #FFE4C4

# 102,460 publishers

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

# `.npmignore`

### - will match your .gitignore if no .npmignore
### - an empty .npmignore will override a .gitignore
### - you can't ignore some things, like package.json or a README

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

# `np` by sindresorhus

![np](public/img/np.gif)

.citation[https://github.com/sindresorhus/np]

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

# unpublishes

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

# left-pad

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

![left-pad](public/img/left-pad.png)

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

![policy](public/img/policy.png)

.citation[[http://blog.npmjs.org/post/141905368000/changes-to-npms-unpublish-policy](http://blog.npmjs.org/post/141905368000/changes-to-npms-unpublish-policy)]

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

# you can only unpublish within 24hrs

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

![meta issue](public/img/metaissue.png)

---
class: center, middle
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

# dissociate and deprecate

---
class: middle, center
background-image: url(public/img/pbn_swans.jpg)
background-color: #FFE4C4

![npm deprecate](public/img/npm-deprecate.png)

---
class: middle, center

# scoped packages
## (fancy way of saying namespaced packages!)

---
class: top, left

## scoped packages
# `npm i @scope/name`

![telescope](public/img/telescope.png)

### scoped packages are private by default but you can make them public:
### `npm publish --access=public`

---
class: center, middle

# we now have search and download stat support for scopes!

![](public/img/sparkles.png)
![](public/img/new.png)
![](public/img/sparkles.png)

---
class: center, middle

![old bug](public/img/oldbug.png)

---
class: center, middle

# you *already* have a scope!
## (hint: it's your user name!)
---
class: top, left

## private packages
## `npm init --scope=<usrname>`

### Use your private modules side by side with modules from the public registry

![lock](public/img/lock.png)
![dancers](public/img/dancers.png)
![lock](public/img/lock.png)

---
class: top, left

## npm organizations
# `npm team`

- ### create teams and add members
- ### grant and revoke access to packages via teams

![team](public/img/team.png)
![team](public/img/team.png)
![team](public/img/team.png)

---
class: middle, center

# npm orgs are free for public packages!

![tada](public/img/tada.png)
![tada](public/img/tada.png)
![tada](public/img/tada.png)

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

.wombat[# `npm i wombat -g`]
.wombat[# `wombat hook add <pkg> <url> <secret>`]

---
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: left, middle

# npm 5 is coming soon!

- ### complete cache rewrite
- ### `--prefer-offline` and `--offline` install flags
- ### shrinkwrap `integrity` field
- ### it's fast as heck ;)

.citation[WIP changelog: https://github.com/npm/npm/pull/16244]

---
class: center, middle

<blockquote align=center class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">tbh I didn't even expect this much of a difference but there ya have it? <a href="https://twitter.com/hashtag/npm5?src=hash">#npm5</a> <a href="https://t.co/c3NkrlkI0m">pic.twitter.com/c3NkrlkI0m</a></p>— ✨ Kat! ✨ (@maybekatz) <a href="https://twitter.com/maybekatz/status/855362606713851904">April 21, 2017</a></blockquote>

---
class: center, middle
background-image: url(public/img/pbn_ship.jpg)
background-color: #FFE4C4

![npm](public/img/npm.png)

---
class: center, middle

# thanks!
## `me => @ag_dubs`

## bit.ly/fwdays-2017

![space invader](public/img/spaceinvader.png)
![ghost](public/img/ghost.png)
![dolphin](public/img/dolphin.png)