for front-end development

RetailMeNot, 2017-05-09

Who is this dude with the blue hair?

Laurie Voss

COO of               Inc.

@seldo

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

at NASA

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

use

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

Husky

npm install --save-dev husky

Git hooks as lifecycle events!

Grunt and Gulp

Why write bash when you can write more JavaScript?

ShellJS

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

re-used

What should a module look like?

'use strict'

module.exports = doThing

function doThing() {
  // things happen
}

Modules on the web

Webpack

A module bundler

Webpack plugins

https://github.com/webpack-contrib/awesome-webpack

 

Webpack example

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

webpack.config.js:

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

package.json:

Coding with webpack

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

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

index.js:

lib/foo.js:

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

webpack.config.js:

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

package.json:

Babel

Tomorrow's JavaScript, today

ES2015 features

http://slides.com/dpogue/es6-intro

Babel plugins

1300+ on npm

Linters

  • eslint
  • standard
  • sass-lint

CSS preprocessors

  • postcss
  • sass
  • less
  • stylus

Image optimization

npm install --save imagemin

Testing

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

Part 2:

the npm Registry

Kitchen sink frameworks

  • angular
  • ember
  • vue

React

A really great sink, build your own kitchen

The React ecosystem

 

  • Redux
  • Relay
  • MobX
  • Jumpsuit

Next.js

Utilities

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

npm.im/fecha

And more utilities

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

Language features

People keep trying to turn JavaScript into other languages

TypeScript

Flow

https://flow.org/

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

  • 3,122
Loading comments...

More from seldo