Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.687 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

×