the ag_deck

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, stats
background-image: url(public/img/pbn_ducks.jpg)
background-color: #FFE4C4

# everyday around 1,800,000 install events occur.

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

# each install is around 70 packages.

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

# 1,800,000 * 70

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

# .real-big[126,000,000]

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

# that's a lot of packages

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

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

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

# run scripts are composable!

![score](public/img/score.png)
![score](public/img/score.png)
![score](public/img/score.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: middle, center

# `npm i -D shelljs`

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

---
class: center, middle

# never install something globally again

---
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 --verbose --assert code --timeout 5000",
    "test:frontend": "karma start",
    "...": "..."
  },
  "devDependencies": {
    "...": "...",
    "karma": "^1.1.1",
    "lab": "^13.0.1",
    "standard": "^10.0.2",
    "...": "..."
  }
}
</pre>

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

#### [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)

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

# the registry is immutable

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

# the registry is reliable

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

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

# [http://ping.npmjs.com/](http://ping.npmjs.com/)

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

# the registry is fast

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

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

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

## on an empty cache
# the registry is ~75% faster than git

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

# the registry is HUGE

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

![module counts](public/img/module-counts.png)

.citation[source: http://modulecounts.com, accessed: 29 nov 2016]

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

# npm is the largest package registry IN THE WORLD

---
class: top, left

# npm on-site
## run your own on-premises npm registry
### `npm login`
### ` --registry=http://reg.amazing.com`

![runner](public/img/runner.png)
![office](public/img/office.png)
![runner](public/img/runner.png)

---
class: middle, center

![npme addons](public/img/npme-addon.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)

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

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

## write a registry follower

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

#### [https://github.com/npm/registry/blob/master/docs/follower.md](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

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