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.eu
Hosted 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...
{
"name": "youtube-search",
"version": "0.0.3",
"description": "Search for youtube videos",
"main": "index.js",
"scripts":...
npm publish
Advantages of small
packages
• No overhead
• Easier to replace
• Easier to create
• Easier to contribute
• Independent ver...
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...
Example #1
browser versions of node
core libs
• events
• streams
• path
• url
• assert
• buffer
• util
• querystring
• http
• vm
• cr...
Example #2
Transforms
Example #3
brfs
browserify 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 instal...
{
"scripts": {
"watch-js": "watchify app.js --debug > bundle.js",
"watch-css": "catw styles/*.css > bundle.css",
"watch-de...
Example #5
Additional resources
• http://browserify.org
• https://github.com/substack/node-browserify
• http://substack.net
• https:/...
Thanks!
@mgfeller
npm + browserify
npm + browserify
npm + browserify
npm + browserify
npm + browserify
npm + browserify
npm + browserify
npm + browserify
npm + browserify
Nächste SlideShare
Wird geladen in …5
×

npm + browserify

4.374 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

npm + browserify

  1. 1. First presented in 2009
  2. 2. Ryan Dahl, Joyent
  3. 3. Isaac Schlueter, Joyent
  4. 4. + Node v0.6.3 (2011-11-25)
  5. 5. https://blog.nodejitsu.com/npm-innovation-through-modularity/
  6. 6. https://blog.nodejitsu.com/npm-innovation-through-modularity/
  7. 7. http://www.modulecounts.com/
  8. 8. http://www.modulecounts.com/
  9. 9. Scaling issues?
  10. 10. http://nodejsreactions.tumblr.com/post/74396556262/the-npm-registry
  11. 11. #scalenpm
  12. 12. npmjs.eu Hosted by Maciej Małecki at Hetzner, Germany
  13. 13. • npm.strongloop.com • registry.nodejitsu.com • registry.npmjs.org.au • …
  14. 14. $ npm config set registry http://registry.npmjs.org $ npm install --registry http://registry.npmjs.org
  15. 15. npm, Inc. 2013
  16. 16. Technical details
  17. 17. • CommonJS Modules/1.0 • ~58’000 Modules • Just a manager / downloader • Not restricted to node.js / JavaScript • Anarchic • Only needs package.json
  18. 18. { "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" } }
  19. 19. npm publish
  20. 20. Advantages of small packages • No overhead • Easier to replace • Easier to create • Easier to contribute • Independent versioning • Easier to break things • Discoverability • Demarcation
  21. 21. On the frontend side
  22. 22. @substack
  23. 23. browser-side require() the node.js way
  24. 24. var foo = require('./foo'); var gamma = require('gamma'); ! var n = gamma(foo(5) * 3); var txt = document.createTextNode(n); document.body.appendChild(txt);
  25. 25. Example #1
  26. 26. browser versions of node core libs • events • streams • path • url • assert • buffer • util • querystring • http • vm • crypto
  27. 27. Example #2
  28. 28. Transforms
  29. 29. Example #3
  30. 30. brfs browserify fs.readFileSync() static asset inliner
  31. 31. Widget images CSS JavaScript
  32. 32. Example #4
  33. 33. The „scripts“ field
  34. 34. { […] "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
  35. 35. { "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" } }
  36. 36. Example #5
  37. 37. Additional resources • http://browserify.org • https://github.com/substack/node-browserify • http://substack.net • https://twitter.com/browserify
  38. 38. Thanks! @mgfeller

×