npm + browserify
-
Upload
maxgfeller -
Category
Technology
-
view
2.131 -
download
5
Transcript of npm + browserify
![Page 1: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/1.jpg)
![Page 2: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/2.jpg)
First presented in 2009
![Page 3: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/3.jpg)
Ryan Dahl, Joyent
![Page 4: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/4.jpg)
Isaac Schlueter, Joyent
![Page 5: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/5.jpg)
![Page 6: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/6.jpg)
+
Node v0.6.3 (2011-11-25)
![Page 7: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/7.jpg)
https://blog.nodejitsu.com/npm-innovation-through-modularity/
![Page 8: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/8.jpg)
https://blog.nodejitsu.com/npm-innovation-through-modularity/
![Page 11: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/11.jpg)
Scaling issues?
![Page 12: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/12.jpg)
http://nodejsreactions.tumblr.com/post/74396556262/the-npm-registry
![Page 13: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/13.jpg)
#scalenpm
![Page 15: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/15.jpg)
• npm.strongloop.com
• registry.nodejitsu.com
• registry.npmjs.org.au
• …
![Page 16: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/16.jpg)
$ npm config set registry http://registry.npmjs.org $ npm install --registry http://registry.npmjs.org
![Page 17: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/17.jpg)
![Page 18: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/18.jpg)
npm, Inc. 2013
![Page 19: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/19.jpg)
Technical details
![Page 20: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/20.jpg)
• 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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/21.jpg)
{ "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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/22.jpg)
npm publish
![Page 23: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/23.jpg)
![Page 24: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/25.jpg)
On the frontend side
![Page 26: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/26.jpg)
![Page 27: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/27.jpg)
![Page 28: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/28.jpg)
![Page 29: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/29.jpg)
@substack
![Page 30: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/30.jpg)
browser-side require() the node.js way
![Page 31: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/31.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/32.jpg)
Example #1
![Page 33: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/33.jpg)
browser versions of node core libs
• events
• streams
• path
• url
• assert
• buffer
• util
• querystring
• http
• vm
• crypto
![Page 34: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/34.jpg)
Example #2
![Page 35: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/35.jpg)
Transforms
![Page 36: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/36.jpg)
![Page 37: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/37.jpg)
Example #3
![Page 38: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/38.jpg)
brfsbrowserify fs.readFileSync() static asset inliner
![Page 39: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/39.jpg)
Widget
images
CSS
JavaScript
![Page 40: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/40.jpg)
Example #4
![Page 41: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/41.jpg)
The „scripts“ field
![Page 42: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/42.jpg)
{ […] "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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/43.jpg)
{ "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](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/44.jpg)
Example #5
![Page 45: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/45.jpg)
![Page 46: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/46.jpg)
Additional resources
• http://browserify.org
• https://github.com/substack/node-browserify
• http://substack.net
• https://twitter.com/browserify
![Page 47: npm + browserify](https://reader034.fdocuments.us/reader034/viewer/2022042817/55a2b9251a28abfc498b4675/html5/thumbnails/47.jpg)
Thanks! @mgfeller