for front-end development

RetailMeNot, 2017-05-09

Who is this dude with the blue hair?

Laurie Voss

COO of               Inc.


What is npm?

The package manager

for JavaScript.

npm is evolving

The thing you use to build web apps

People use npm to build a lot of stuff

  • Command line apps
  • Server side apps

But also laser robots

And space suits


And actual satellites

But mostly web apps

80% of npm users use it to build web apps

npm is absurdly popular

  • 7.5 million developers


  • 475,000 packages


  • 2.1 billion downloads every 7 days

55% of people who use JavaScript use npm

Why use npm?

npm reduces friction.

Part 1

Automate all the things

Part 1:

Automate all the things

Automation saves enormous amounts of time

So automate already

Run scripts

  "name": "@seldo/some-package",
  "version": "1.0.0",
  "scripts": {
    "test": "mocha ./test/*.js",
    "start": "node ./index.js"
    "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/ --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 code. Just remember "it was complicated."

Lots of run scripts

Why run scripts?

Because they are versioned

Run scripts get stuff for free

npm run env


to get a list of the variables available

Dependencies are in $PATH for run scripts

This sounds like a lot of effort and I'm lazy

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 events


npm install --save-dev husky

Git hooks as lifecycle events!

Grunt and Gulp

Why write bash when you can write more JavaScript?


npm install --save shelljs

Run scripts: major 🔑

The magic of npm accumulates over time

Best practices

What are those, exactly?

Let's talk about modules

Small modules enable bigger software

Modules can be


What should a module look like?

'use strict'

module.exports = doThing

function doThing() {
  // things happen

Modules on the web


A module bundler

Webpack plugins


Webpack example

module.exports = {
  entry: './index.js',
  output: {
    filename: './dist/bundle.js'


"scripts": {
    "build": "webpack"
"devDependencies": {
    "webpack": "^2.2.1"


Coding with webpack

var foo = require('./lib/foo')

document.getElementById('bar').innerHTML = foo
module.exports = "Hello, world"



Webpack dev server

Get started faster

Webpack dev server example

var path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: './dist/bundle.js'
  devServer: {
    contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "static")],
    port: 9000


"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --open"
"devDependencies": {
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.4.1"



Tomorrow's JavaScript, today

ES2015 features

Babel plugins

1300+ on npm


  • eslint
  • standard
  • sass-lint

CSS preprocessors

  • postcss
  • sass
  • less
  • stylus

Image optimization

npm install --save imagemin


  • mocha
  • chai
  • karma
  • tap
  • istanbul
  • nock

Part 2:

the npm Registry

Kitchen sink frameworks

  • angular
  • ember
  • vue


A really great sink, build your own kitchen

The React ecosystem


  • Redux
  • Relay
  • MobX
  • Jumpsuit



npm install --save lodash

npm install --save async

More utilities

npm install --save jquery

npm is the official registry of jQuery plugins

Yet more utilities

npm install --save moment

And more utilities

  • cheerio
  • d3
  • tappy-js
  • meyda
  • pouchdb
  • regl

Language features

People keep trying to turn JavaScript into other languages



Other language features

  • rxjs - reactive programming
  • ramda - functional programming
  • immutable - datastructures
  • bluebird - faster promises

Pre-written components

Why not just get somebody else to do it?

Component libraries

  • pivotal-ui
  • Cloudflare components (cf-*)
  • material-ui
  • @blueprintjs
  • semantic-ui

Your own components

Part 3:

Internal collaboration

Private code on npm

Why private modules?

npm Organizations

  • For small to medium teams
  • $7/month/user
  • Unlimited modules
  • Your own @scope
  • Granular permission management

npm Enterprise

  • For big companies
  • Run on your own hardware
  • Integrate with internal auth
  • Starts at $16/user/month

RetailMeNot makes 2.4 million requests to the registry every month!

npm Enterprise plugins

  • Whitelists and blacklists
  • Vulnerability scanning
  • License compliance

npm works

at every scale

Summary: part 1

  • Tooling
  • A framework for tooling
  • Automate your build chain
  • Automate best practices
  • Go faster

Summary: part 2

  • So
  • Many
  • Libraries
  • OMG

Summary: part 3

npm solves the same problem inside your company as it solved in the rest of the world.

Thank you

npm ❤️ you

npm for front-end development: RetailMeNot

By seldo

npm for front-end development: RetailMeNot

  • 6,263