npm + browserify

Post on 13-Jul-2015

2.131 views 5 download

Transcript of npm + browserify

First presented in 2009

Ryan Dahl, Joyent

Isaac Schlueter, Joyent

+

Node v0.6.3 (2011-11-25)

https://blog.nodejitsu.com/npm-innovation-through-modularity/

https://blog.nodejitsu.com/npm-innovation-through-modularity/

http://www.modulecounts.com/

http://www.modulecounts.com/

Scaling issues?

http://nodejsreactions.tumblr.com/post/74396556262/the-npm-registry

#scalenpm

npmjs.euHosted by Maciej Małecki at Hetzner, Germany

• npm.strongloop.com

• registry.nodejitsu.com

• registry.npmjs.org.au

• …

$ npm config set registry http://registry.npmjs.org $ npm install --registry http://registry.npmjs.org

npm, Inc. 2013

Technical details

• CommonJS Modules/1.0

• ~58’000 Modules

• Just a manager / downloader

• Not restricted to node.js / JavaScript

• Anarchic

• Only needs package.json

{ "name": "youtube-search", "version": "0.0.3", "description": "Search for youtube videos", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://github.com/MaxGfeller/youtube-search" }, "keywords": [ "youtube", "search", "api" ], "author": "Max Gfeller <max.gfeller@gmail.com>", "license": "BSD", "dependencies": { "xml2js": "~0.2.8" } }

npm publish

Advantages of small packages

• No overhead

• Easier to replace

• Easier to create

• Easier to contribute

• Independent versioning

• Easier to break things

• Discoverability

• Demarcation

On the frontend side

@substack

browser-side require() the node.js way

var foo = require('./foo'); var gamma = require('gamma'); !var n = gamma(foo(5) * 3); var txt = document.createTextNode(n); document.body.appendChild(txt);

Example #1

browser versions of node core libs

• events

• streams

• path

• url

• assert

• buffer

• util

• querystring

• http

• vm

• crypto

Example #2

Transforms

Example #3

brfsbrowserify fs.readFileSync() static asset inliner

Widget

images

CSS

JavaScript

Example #4

The „scripts“ field

{ […] "scripts": { "prepublish": "git status", "publish": "echo \"Package published!\"", "install": "echo \"Thanks for installing!\"", "test": "tap tests/test-*.js", "start": "node app.js" } }

$ npm run publish $ npm test $npm start

{ "scripts": { "watch-js": "watchify app.js --debug > bundle.js", "watch-css": "catw styles/*.css > bundle.css", "watch-dev": "npm run watch-js & npm run watch-css", "build-js": "browserify app.js | uglifyjs -mc > bundle.js", "build-css": "cat styles/*.css > bundle.css", "start": "node app.js", "start-dev": "npm run watch-dev & npm start" } }

Example #5

Additional resources

• http://browserify.org

• https://github.com/substack/node-browserify

• http://substack.net

• https://twitter.com/browserify

Thanks! @mgfeller