Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

npm + browserify

4,460 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×