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

  1. past: what npm was invented to do
  2. present: how you can use it to do that
  3. 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

  1. it eliminated dependency hell
  2. 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

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

or

npm run format

run scripts get stuff for free

  1. 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 =

more problems

So many race conditions!

A totally new installer

Smarter, consistent, more reliable.

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

  • 3,756
Loading comments...

More from seldo