An introduction to npm and browserify i gave at basel.js

2. First presented in 2009

3. Ryan Dahl, Joyent

4. Isaac Schlueter, Joyent

6. +
Node v0.6.3 (2011-11-25)

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

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

9. http://www.modulecounts.com/

10. http://www.modulecounts.com/

11. Scaling issues?

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

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

19. Technical details

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

39. Widget
images
CSS
JavaScript

40. Example #4

41. The „scripts“ field

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

47. Thanks!
@mgfeller