NPM AND
BROWSERIFY

NPM

  • a JavaScript package manager
  • holds "modules"
    • some chunk of re-usable code
    • may be a command-line tool
  • dependency management
  • version management

BROWSERIFY

  • a build tool for the browser
  • we can use NPM for front-end code
  • lots of cool features, like source transforms

LOOK FAMILIAR?


don't forget that config...

this is how i feel


In Browserify...

some goodies...

  • cleaner syntax
  • shimming is easy
  • no config files
  • don't need to manually maintain paths
  • source transforms (domify, brfs, etc)
  • parity with Node APIs: buffers, events, url, etc
  • code shared between front- and back-end

but the best features...




NPM and Unix Philosophy

SEMANTIC VERSIONING

unix philosophy





“... write programs that do one thing
and do it well ...

example


We are working on a library/website that needs 
to parse CSS color strings.


step 1

does it already exist?


step 2

if it doesn't exist or isn't suitable


Time to write a module!

overview


npm init
npm install
browserify
beefy




semantic versioning




2.0.1

  • major - breaking API change
  • minor - non-breaking new feature
  • patch - non-breaking bugfix

patching our module....

Simple bug fix

adding new features?

Best to keep things backward-compatible


npm version minor 

major changes

Sometimes you just gotta break it...


npm version major 

moar knowledge



umd build

good for AMD and non-Node environments

browserify index.js -o colorstring.js -s colorstring 



watchify

faster build times
same parameters as browserify
gulp and grunt integration


watchify index.js -o colorstring.js

brfs

source transform for 'fs' (Node API)





glslify

  • modular GLSL code
  • e.g. npm install glsl-noise
  • useful for non-JS environments
  • publishing GLSL snippets in NPM
  • making changes to the language!



npm ruN



npm run build 

and everything else...



NPM &BROWSERIFY

By Matt DesLauriers

NPM &BROWSERIFY

  • 1,779