if you're writing any application, most problems you'll need to solve have already been solved, by someone

think of your application as a remix of existing solutions. what existing solutions is your application made of? How do they fit together?

recently my friend told me he was implementing elementwise addition in his webapp. you should never have to implement elementwise addition. there is a module for this, which someone has already tested

"but npm modules are for node!", you say

nonesense, npm modules are for the front-end, too

this tutorial is expanded from a conversation with my friend ben, where i tried to convince him that npm was worth his time. ben, like myself, and like many readers here, is not a professional software developer. but we all need to develop for the web sometimes. how can we stay productive?

npm is for lazy people, for whom software is a means, not an end. this tutorial is for us.

all code for this tutorial is available here, on github

using require in front-end code

make sure you have node and npm

make a new directory, cd into it, and

npm init

press enter through the wizard.

okay, now let's install this package

npm install compute-add 

write a very simple script that requires this package, element-wise adds 2 simple arrays, and console.logs the result

var add = require('compute-add')
var out = add( [1,2,3,4,5],  [1,2,3,4,5] )
console.log(out)

once you've written your script, make a file index.html with this content

<!doctype html>
<script src="bundle.js"></script>

bundle.js doesn't exist yet, we're about to generate it

do:

npm install -g browserify

then,

browserify my-cool-script.js -o bundle.js

open that index.html file to see if it worked.

now open bundle.js to see what happened.

that extra code up top exposes those names you're requiring, making the namespace and scope work the way you'd expect

ben: so browserify makes a bundle for you
ben: basically, it is "compiling" your code
ben: by just dumping the requirements into the main file

exactly

it is "bundling" (but not interpreting)

watch for changes

now, let's see how this can get really nice

npm install -g watchify

and, like before,

watchify my-cool-script.js -o bundle.js

now you can change my-cool-script.js, and it will automatically compile into bundle.js

it will also throw syntax errors, which is nice

try editing your js script, and refreshing the browser to assure that this works

ok, now open up package.json. find the part that looks like:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },

see that this bit runs some bash command?

change this line to

"scripts": {
   "watch": "watchify my-cool-script.js -o bundle.js"
 },

now you can

npm run watch

and edit your js file freely, npm installing packages and requireing them in your script. it'll all compile for you on the fly.

save your dependencies

finally, one last, very important tip

when you install a package:

npm install --save [package]

that --save will list the dependency in package.json.

with your dependencies listed in that package.json file, you can start with your project on a fresh machine, and just npm install to setup your environment.

conclusion

  • npmjs.com is an amazing resource full of excellent code. building your webapps from that stuff will save you a ton of time.

  • you can use require in your front-end scripts! just use browserify watchify.

  • automate your workflow through npm scripts! (like npm run watch, above).

  • npm --save your dependencies for projects that are easy to distribute and setup.

so much good software is on npm. packages tend to be UNIX-y -- of the "one thing well" variety. the idea is that simple components interact with obvious interfaces. this way, you can glue stuff together to build more complicated applications.

so, think: what npm modules is your application built out of? search npm, write stuff down, try to piece together existing solutions on a whiteboard. you can save yourself a lot of development time with this stuff.