for front-end development
Blue State Digital, 2017-03-30
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 million developers
- 440,000 packages
- 2 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
Modular code is better code
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
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: Blue State Digital
By seldo
