npm past, present and future

Abstractions, 2016-08-20

WHO AM I

Laurie Voss

COO,           

@seldo

WHO ARE YOU?

WHAT ARE WE TALKING ABOUT

npm past

...answers such questions as...

PART 1:

"What is this npm thing?"

"...and why should I care?"

npm present

...answers such questions as...

PART 2:

"What do people use npm to do?"

"What can I do besides npm install?"

npm future

...answers such questions as...

PART 3:

"What is npm going to do next?"

"I want to hear somebody incorrectly predict the future of JavaScript"

"HOW DOES NPM MAKE MONEY?"

NPM IS A COMPANY THAT SELLS GOODS AND SERVICES

You may find them useful!

True story: I am literally in charge of marketing at npm.

PART 1:

npm past

SHARING CODE

SHARING CODE IS SURPRISINGLY COMPLICATED

CODE CAN BE LOTS OF THINGS

NPM HELPS YOU

  • share code
  • find code
  • install code
  • build applications
  • share workflow

GROWTH, YOU SAY?

SHARING JAVASCRIPT BEFORE NPM

NPM IS DIFFERENT FROM OTHER PACKAGE MANAGERS

  1. No dependency hell
  2. Semantic versioning

NPM PREVENTS DEPENDENCY HELL

A AND C REQUIRE B AT DIFFERENT VERSIONS

YOUR APP REQUIRES BOTH A AND C

THIS DOESN'T WORK

DAMMIT

NPM FIXES IT MAGICALLY

THE NODE MODULE LOADER IS MAGICAL

NPM AND THE MODULE LOADER = BFFs

NO MORE DEPENDENCY HELL

RUNTIME

vs

LANGUAGE

SEMANTIC VERSIONING

2.15.58

SEMVER BASICS

Breaking

Feature

Fix

major
minor
patch

SEMVER REDUCES RISK

LOWER RISK

=

LOWER FRICTION

SEMVER REQUIRES TRUST

SMALL MODULES NEED SEMVER

NPM ENABLED PENT-UP DEMAND FOR SMALL MODULES

PEOPLE LOVE SMALL MODULES

NPM ENABLES SMALL MODULES

PEOPLE ALWAYS WANTED SMALL MODULES

ECONOMIC CHANGES ENABLED SMALL MODULES

EFFICIENT PROGRAMMERS >

EFFICIENT CODE

THE BEST LINE OF CODE IS THE ONE YOU DON'T HAVE TO WRITE

NPM SAVES MILLIONS OF HOURS OF DEVELOPER TIME

SMALL MODULES HAVE PROBLEMS

https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/

BUT WAIT THERE'S MORE

THE REGISTRY

THE REGISTRY STORES THE PACKAGES

WHY DOES NPM HOST A REGISTRY?

IF YOU DON'T HOST IT, SOMEBODY ELSE DOES

BUT... DISTRIBUTED FILE SYSTEMS!

THESE REASONS ARE DEPRESSING

A REGISTRY ENABLES DISCOVERY

A REGISTRY

IS FASTER

a lot faster

GIT IS FOR DEVELOPING

NPM IS FOR DISTRIBUTING

PART 2:

npm present

THIS IS NOT A TUTORIAL

UPDATE YOUR NPM

npm install -g npm

NPM INIT

npm init

npm init --yes

SCOPES

npm init --scope=myusername

npm install @myusername/mypackage

var x = require('@myusername/mypackage')

.npm-init AND PromZard

NPM INIT CAN BE

RE-RUN

NPM INSTALL

npm install --save 
npm install -S 
npm install --save-dev 
npm install -D

SKIP devDependencies IN PRODUCTION

npm install --production

bundledDependencies

MAKE INSTALLS FASTER

NPM CACHES EVERYTHING LOCALLY

TRY A HIGHER cache-min

npm config set cache-min 60

OFFLINE INSTALLS

npm install --cache-min 999999

RUN SCRIPTS

npm start
npm stop
npm restart
npm test

AUTOMATE AWAY COMMON TASKS

RUN SCRIPTS

GET YOUR devDependencies FOR FREE

NOW YOU PUBLISH

npm publish
npm publish --access=public
npm publish --access=restricted

.npmignore

YOU HAVE TO SET A VERSION

LET NPM SET YOUR VERSION

npm version major
npm version minor
npm version patch
npm version major -m "bump to version %s"

SEMVER IS A PROMISE

NOT A GUARANTEE

SHRINKWRAP

SHARE WITH YOUR TEAM

NPM ORGANIZATIONS

npm team
npm access

NPM TEAM

npm team create
npm team destroy
npm team add
npm team rm
npm team ls

NPM ACCESS

npm access grant
npm access revoke
npm access ls-packages
npm access ls-collaborators

WORK WITH MULTIPLE PACKAGES

npm link

NPM LINK

Inside foo:

npm link

Inside bar:

npm link foo

PARALLEL VERSIONS WITH DIST-TAGS

npm publish --tag
npm dist-tag

PUBLISH TO A DIST-TAG

npm publish --tag <tag>
npm install <pkg>@<tag>

e.g. npm install npm@next

CHANGE A

DIST-TAG

npm dist-tag add 
npm dist-tag rm
npm dist-tag ls

INSTALL AT

A DIST-TAG

npm install --tag

UNPUBLISH

npm unpublish <pkg>@<version>

(duhn-duhn-duuuuuuuuuhn)

SO, ABOUT LEFT-PAD...

DEPRECATE

npm deprecate <pkg>@<version>

the kinder, gentler unpublish

KEEP YOUR PACKAGES UP TO DATE 

Package     Current  Wanted  Latest  Location
domutils      1.3.0   1.3.0   1.5.1  @npm/testnpm
handlebars    1.3.0   1.3.0   4.0.5  @npm/testnpm
hbsfy         1.3.2   1.3.2   2.7.0  @npm/testnpm

RUN SCRIPTS CAN DO ANYTHING

"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"prebuild": "npm run test && npm run build:clean",
"build:clean": "rimraf ./build/*",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p",
"analyze": "node ./internals/scripts/analyze.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"pagespeed": "node ./internals/scripts/pagespeed.js",
"presetup": "npm i chalk",
"setup": "node ./internals/scripts/setup.js",
"clean": "shjs ./internals/scripts/clean.js",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint . --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:css": "stylelint ./app/**/*.css",
"lint:staged": "lint-staged",
"pretest": "npm run lint",

Don't read this. Just remember "there were lots of examples."

RUN SCRIPTS GET USEFUL VARIABLES

npm_package_name
npm_package_version
npm_package_dependencies_request
npm_package_dependencies_express
npm_config_node_version
npm_config_registry

PACKAGE CONFIG VARIABLES

{
  "name": "foo",
  "config": {
    "port": "80"
  }
}
npm config set foo:port 8080

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

LIFECYCLE HOOKS

per-project:   /path/to/my/project/.npmrc
per-user:       ~/.npmrc

.npmrc

THE WOMBAT CLI

npm install wombat -g

WEBHOOKS

Fired on:

  • publish
  • star
  • tag

CREATE A WEBHOOK

wombat hook add @me/foo https://my.co/myhook some-secret

TYPES OF WEBHOOKS

  • Package (@me/foo)
  • Scope (@me)
  • User (~bob)

OTHER HOOK COMMANDS

wombat hook ls
wombat hook update
wombat hook rm

USE WEBHOOKS TO AUTOMATE DEPLOYMENT

https://www.npmjs.com/package/npm-hook-receiver

NPM-CLONE

WILL HELP

https://www.npmjs.com/package/npm-clone

MORE THIRD PARTY TOOLS

BABEL

WEBPACK AND BROWSERIFY

PART 3:

npm future

WHAT IS NPM?

THE PACKAGE MANAGER FOR JAVASCRIPT

THE PACKAGE MANAGER FOR

FRONT-END

node
jQuery
Grunt
Gulp
Ionic
Cordova
Nodebots

Babel
Electron
TypeScript 2
Angular
Ember
React
Pebble

THE PACKAGE MANAGER FOR EVERY DAMN THING

NPM IS FOR FRONT-END

1. DISCOVERY + TRUST = INSIGHT

2. ES6 MODULES 

DISCOVERY

Try npms.io, it's great!

TRUST

  • in quality
  • in security
  • in reliability
  • in legality
  • in efficiency

TRUST

MUST BE ONGOING

SECURITY

Node Security Project

npm install nsp -g
nsp check

RELIABILITY

Greenkeeper.io

EFFICIENCY

SLOW-DEPS

https://www.npmjs.com/package/slow-deps

COMING SOON TO A REGISTRY NEAR YOU

ES6 MODULES

THE GOOD NEWS

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}

import square from 'mylibrary'

THE OTHER NEWS

exports.sqrt = Math.sqrt;
exports.square = function(x) {
	return x * x;
}

var square = require('mylibrary').square

THE BAD NEWS

JAVASCRIPT NEEDS YOU

FRONT-END JAVASCRIPT NEEDS MODULES

RECAP

lgbtq.technology

That's really a domain!

NPM WORKS FOR YOU

NPM

 

YOU

Slides are here:

https://slides.com/seldo/abstractions-npm

Good hallway questions get shirts & socks!