npm past, present & future

BrazilJS, 2015-08-22

Who is this guy?

He's not @isaacs, you can't fool me.

What are we talking about?

npm

past: what npm was invented to do
present: how you can use it to do that
future: stuff you'll be able to do soon

Featuring your questions!

Warning!

I tend to talk really fast.

Yell at me if I do that.

Part 1

npm past

Problem: distributing code

Solution: reducing friction

Distribution: 3 parts

Friction 1: installation

Before npm

clone this git repo: https://github.com/fs-webdev/asset-manager
run "make"
copy the file into your .node_libraries folder
make sure you name it “asset-manager.js"
make sure to pre-install 
“async.js” https://github.com/caolan/async * + dependencies
“glob.js” https://github.com/isaacs/node-glob * + dependencies
“rimraf.js” https://github.com/isaacs/rimraf * + dependencies
“uglify-js.js” https://github.com/mishoo/UglifyJS2 * + dependencies
“less.js” https://github.com/less/less.js * + dependencies
Confirm that you are using the latest version from Github
Except for “glob.js”, in which case use the previous version 0.4

npm install asset-manager

With npm

npm wasn't the same as other package managers

it eliminated dependency hell
it supported semantic versioning*

* Lots of package managers support SemVer these days!

npm prevents

dependency hell

by making node.js do it

Two modules need B

My app needs both

This is dependency hell

Dependency hell is no fun

This is what npm does

but npm isn't enough

node.js needs to know what to do

node.js knows what to do

the module loader in node was written to work with npm

npm gets us out of dependency hell

That's pretty cool.

Aside:

Node.js vs JavaScript

JavaScript has dependency hell,

but node does not.

Question!

Answer

To avoid dependency hell

Semantic versioning

SemVer basics

major - breaking
minor - new functionality
patch - bug fixes

SemVer

A basic software contract that reduces overhead.

SemVer enables the many small modules pattern

Distribution 2: downloading

Solution: the registry

The registry is where the packages live.

Why host the packages?

GitHub is for developing,

npm is for distributing.

What would you put on npm you don't put on GitHub?

compiled code
minified or transpiled code
binary assets

What would you put on GitHub but not in npm?

All your mistakes!
Docs
Tests

Distribution 3: discovery

npmjs.com

Putting it all together

Part 2: what npm does right now

What things do people use npm to make?

Command line tools

CLI-making tools

npm.im/yargs

(Now with Portuguese support! Thanks, @benjamincoe!)

Web services

Proxies

Web apps

Frameworks

Plugins

Testing

1. Starting your project

npm ping

npm whoami

npm init

makes a lot of smart guesses

dependencies from node_modules
repository from git repo
always adds keys, never deletes

~/.npm-init.js

surprise!

~/.npm-init.js

enforce best practices company-wide

PromZard

module.exports = {
  name: prompt("What should we call your package?", 
                 "bob",
                 function(name) { return name }
  ),
  version: prompt("Version",
                  "1.0.0",
                  function(version) { return version }
  )
}

PromZard

module.exports = {
  name: prompt(...),
  version: prompt(...),
  scripts: {
    test: prompt(...),
    setup: prompt(...)
  }
}

npm install --save

and --save-deps

npm shrinkwrap

Because sometimes SemVer is a lie

npm shrinkwrap

deploy to production exactly what you ran in dev

npm shrinkwrap

locks every version of every package in node_modules

npm shrinkwrap

--save and --save-dev update shrinkwrap in npm 3

Question!

Answer

Because we like SemVer

Question!

"Is there a way to use shrinkwrap to bundle up a package so I can install it offline?"

– some guy

npm pack

allows you to install offline

npm pack @myuser/some-package

npm install myuser-some-package-1.0.1.tgz

bundledDependencies

Package an entire app

Question!

npm global cache

Usually in ~/.npm/

npm install offline?

npm install --cache-min 999999

We should probably call this npm --offline

npm version

makes semantic versioning quick and easy

npm version

npm version prepatch
npm version patch
npm version preminor
npm version minor
npm version premajor

npm version major

node-bin

lets you use any version of node

without installing it globally

Thanks, @aredridel!

node-bin

npm.im/node-bin

Transpilation

Everybody cool is doing it.

2. managing project lifecycle

npm test
npm start
npm restart
npm stop
npm run $anything

basic run scripts

{
  "name": "@seldo/some-package",
  "version": "1.0.0",
  ...
  "scripts": {
    "test": "mocha ./test/*.js",
    "start": "node ./index.js"
  }
}

npm run $anything

"scripts": {
  "dev": "ENVIRONMENT=development ./bin/my-app",
  "setup": "// database setup goes here"
}

allows

> npm run setup
> npm run dev
...
Development server running on port 5000!

run scripts save time

find . -name .git \
  -prune -o -name node_modules \
  -prune -o -name '*.min.js' \
  -prune -o -name '*.js' \
  -print0 | xargs -0 esformatter -i

npm run format

run scripts get stuff for free

devDependencies in path

run scripts get stuff for free

install gulp as a devDependency,

no need to tell devs to install it

run scripts get stuff for free

2. config and package.json available as variables

npm lifecycle events

publish:   prepublish, publish, postpublish
install: preinstall, install, postinstall
uninstall: preuninstall, uninstall, postuninstall
version:   preversion, version, postversion
test: pretest, test, posttest
stop:       prestop, stop, poststop
start:       prestart, start, poststart
restart:   prerestart, restart, postrestart

prepublish

never publish a broken version!

compose your run scripts

Don't repeat yourself

composite example

"prepublish": "npm test && npm build-css && npm format"

One important thing

about prepublish

It also runs on install!

(Only if you run npm install with no arguments in the package directory)

Why prepublish on install?

History, mostly.

I don't want

to run on install!

Use preversion instead

"postversion": "git push origin master --tags && npm publish"

Bonus tip: keep npm and git in sync automatically:

Use-cases for run scripts

environment setup/teardown
transpilation
code cleanup
enforce best practices
automatically run tests
security checks
more!

CSS via npm

sethvincent.com/css-via-npm/

semantic-release

write your changelog automatically!

Thanks, @boennemann

semantic-release

automatically detect breaking changes!

semantic-release

npm.im/semantic-release

3. managing teams

featuring brand-new npm commands!

npm access
npm team

Orgs & Teams

Like `owners`, but better!

Teams

manage access to multiple packages
read-only and read-write permission
permission is per-team, per-package

Teams example

web team:

core: read-write
www: read-write
api: read-only

api team:

core: read-write
www: read-only
api: read-write

QA team:

core: read-only
www: read-only
api: read-only

Sorry for the sales pitch

Orgs and Teams is a new, paid feature of npm

Scopes

(user-level scopes are available for free)

@myuser/mypackage
@mycompany/mypackage2

creating a team

npm team create mycompany:web
npm team destroy mycompany:web

putting users in teams

npm team add mycompany:web user1
npm team rm mycompany:web user1
npm team ls mycompany:web
npm team ls mycompany

add packages to teams

npm access grant read-only mycompany:web mypackage
npm access grant read-write mycompany:api mypackage
npm access revoke mycompany:web mypackage

list users with access

npm access ls-collaborators @mycompany/mypackage

list packages they can use

npm access ls-packages mycompany:team
npm access ls-packages mycompany
npm access ls-packages myuser

Want Orgs and Teams?

npm.me/grupos

Recap

npm ping
npm whoami
npm init
npm shrinkwrap
npm pack
npm version
npm run
node-bin
semantic-release
npm team
npm access

Part 3: where npm is going next

npm 3 is in beta!

npm install npm@beta -g

A progress bar!

1995's technology, today!

More speed =

Dedupe by default

npm 2

npm 3

node_modules is (mostly) flat

Windows users, rejoice!

In npm 3, everything is beautiful

and nothing hurts

Okay, one little thing

It might be slower sometimes

Test the beta!

npm install npm@beta -g

Back to the future

(do you see what I did there?)

a package manager for JavaScript

the package manager for JavaScript?

Getting out of your way

Front-end developers already

started using npm

Where jQuery goes...

npm hosts all jQuery plugins

Why stop at JavaScript?

HTML and CSS need a package manager

Make npm the way you build websites

whether or not you use node.js

Tools to use for front-end npm

browserify
webpack

<script> method

As popularized by bower

browserDependencies

npm install --save-browser?

But beware!

Browser JavaScript has dependency hell

CSS in npm

parcelify
sheetify
npm.im/dr-frankenstyle

Babel is your new bicycle

And it's next!

Webhooks

Integrate npm into your automation

Deploy from npm

Deployment is just

another type of distribution

Better git support

npm ❤️ git

git is first-class citizen of npm

we are here to reduce friction,

not to lock you in

Now entering a period of wild speculation

npm Security

(Thanks for the question, @codepo8!)

Better package quality metrics

It is surprisingly tricky to come up with the definition of a "good" package

npm GUI

Because not everybody likes the command line.

npmtorrent?

What problem does this solve?

The future, recap:

loading bar
new installer
dedupe by default
npm 3 is faster/slower
npm is for JavaScript
and HTML
and CSS
babel is awesome
webhooks are coming
git is a first class citizen
security
package quality
GUI

npm loves you

...one more thing...

http://lgbtq.technology

A Slack group for gay, lesbian, bisexual, transgender and queer people in tech

Thank you

@seldo

laurie@npmjs.com

npm past, present and future

By seldo

npm past, present and future

8,124