![{
"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"
}
}](https://image.slidesharecdn.com/browserify-140321072236-phpapp02/85/npm-browserify-21-320.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](https://image.slidesharecdn.com/browserify-140321072236-phpapp02/85/npm-browserify-42-320.jpg)
npm + browserify
- 2. First presented in 2009
- 11. Scaling issues?
- 13. #scalenpm
- 14. npmjs.eu Hosted by Maciej Małecki at Hetzner, Germany
- 15. • npm.strongloop.com • registry.nodejitsu.com • registry.npmjs.org.au • …
- 16. $ npm config set registry http://registry.npmjs.org $ npm install --registry http://registry.npmjs.org
- 18. npm, Inc. 2013
- 20. • CommonJS Modules/1.0 • ~58’000 Modules • Just a manager / downloader • Not restricted to node.js / JavaScript • Anarchic • Only needs package.json
- 21. { "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" } }
- 22. npm publish
- 24. Advantages of small packages • No overhead • Easier to replace • Easier to create • Easier to contribute • Independent versioning • Easier to break things • Discoverability • Demarcation
- 25. On the frontend side
- 29. @substack
- 30. browser-side require() the node.js way
- 31. var foo = require('./foo'); var gamma = require('gamma'); ! var n = gamma(foo(5) * 3); var txt = document.createTextNode(n); document.body.appendChild(txt);
- 32. Example #1
- 33. browser versions of node core libs • events • streams • path • url • assert • buffer • util • querystring • http • vm • crypto
- 34. Example #2
- 35. Transforms
- 37. Example #3
- 38. brfs browserify fs.readFileSync() static asset inliner
- 40. Example #4
- 42. { […] "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
- 43. { "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" } }
- 44. Example #5
- 46. Additional resources • http://browserify.org • https://github.com/substack/node-browserify • http://substack.net • https://twitter.com/browserify