47

npm + browserify

Embed Size (px)

Citation preview

Page 1: npm + browserify
Page 2: npm + browserify

First presented in 2009

Page 3: npm + browserify

Ryan Dahl, Joyent

Page 4: npm + browserify

Isaac Schlueter, Joyent

Page 5: npm + browserify
Page 6: npm + browserify

+

Node v0.6.3 (2011-11-25)

Page 7: npm + browserify

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

Page 8: npm + browserify

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

Page 9: npm + browserify

http://www.modulecounts.com/

Page 10: npm + browserify

http://www.modulecounts.com/

Page 11: npm + browserify

Scaling issues?

Page 12: npm + browserify

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

Page 13: npm + browserify

#scalenpm

Page 14: npm + browserify

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

Page 15: npm + browserify

• npm.strongloop.com

• registry.nodejitsu.com

• registry.npmjs.org.au

• …

Page 16: npm + browserify

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

Page 17: npm + browserify
Page 18: npm + browserify

npm, Inc. 2013

Page 19: npm + browserify

Technical details

Page 20: npm + browserify

• CommonJS Modules/1.0

• ~58’000 Modules

• Just a manager / downloader

• Not restricted to node.js / JavaScript

• Anarchic

• Only needs package.json

Page 21: npm + browserify

{ "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 <[email protected]>", "license": "BSD", "dependencies": { "xml2js": "~0.2.8" } }

Page 22: npm + browserify

npm publish

Page 23: npm + browserify
Page 24: npm + browserify

Advantages of small packages

• No overhead

• Easier to replace

• Easier to create

• Easier to contribute

• Independent versioning

• Easier to break things

• Discoverability

• Demarcation

Page 25: npm + browserify

On the frontend side

Page 26: npm + browserify
Page 27: npm + browserify
Page 28: npm + browserify
Page 29: npm + browserify

@substack

Page 30: npm + browserify

browser-side require() the node.js way

Page 31: npm + browserify

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

Page 32: npm + browserify

Example #1

Page 33: npm + browserify

browser versions of node core libs

• events

• streams

• path

• url

• assert

• buffer

• util

• querystring

• http

• vm

• crypto

Page 34: npm + browserify

Example #2

Page 35: npm + browserify

Transforms

Page 36: npm + browserify
Page 37: npm + browserify

Example #3

Page 38: npm + browserify

brfsbrowserify fs.readFileSync() static asset inliner

Page 39: npm + browserify

Widget

images

CSS

JavaScript

Page 40: npm + browserify

Example #4

Page 41: npm + browserify

The „scripts“ field

Page 42: npm + browserify

{ […] "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

Page 43: npm + browserify

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

Page 44: npm + browserify

Example #5

Page 45: npm + browserify
Page 46: npm + browserify

Additional resources

• http://browserify.org

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

• http://substack.net

• https://twitter.com/browserify

Page 47: npm + browserify

Thanks! @mgfeller