Upgrade to Pro — share decks privately, control downloads, hide ads and more …

npm: Modularizing your JavaScript development

Ruy Adorno
November 22, 2014

npm: Modularizing your JavaScript development

npm is a great platform for sharing JavaScript packages. This talk was focused on showing people how easy it is to create their own npm packages and reuse them later across different applications.

Presented at Full Stack Toronto 2014 #fstoco

Ruy Adorno

November 22, 2014

More Decks by Ruy Adorno

Other Decks in Programming


  1. Modularizing • Identify reusable blocks • Create small modules •

    Smaller modules are easier to maintain and can be reused later!
  2. Package Managers • Tool that automates the process of installing,

    uninstalling and updating software packages • Provides a standard way of managing dependencies • Managing files manually is an extremely error- prone task
  3. Why npm? • Recently got a $2.6M funding • Announced

    they want to be a part of the Front-end ecosystem
  4. Module definitions • Make code reusable • ES6 modules are

    still not there yet • npm supports any module format
  5. AMD

  6. UMD

  7. Frameworks • Have their own modules definitions • Directives and

    Services are great for reuse when working with AngularJS
  8. Automating tasks • Yeoman is great for starting any new

    structure • Grunt is the most popular JavaScript task runner
  9. Image Credits - Paint all the memes by Sam Spratt:

    http://samspratt.com/ - Monolith III by Tim Jarvis: http://www.magnasoma.co.uk/#/monolith-3 - Lego Color Bricks by Alan Chia: http://commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg - Go Gopher packages photo by Nathan Youngman: http://nathany.com/go-packages/ - Pattern tiles by Toni F: https://www.flickr.com/photos/st-lite/2660966951 - Pile of Kittens by Peter Hasselbom: https://www.flickr.com/photos/peter_hasselbom/3072326220 - Kitten k3 by Kubilay Ozvardar: https://www.flickr.com/photos/mrkubi/1222735107
  10. References - npm Official Website: http://npmjs.org/ - npm Official Blog:

    http://blog.npmjs.org/ - Package management system: http://en.wikipedia.org/wiki/Package_management_system - Not Invented here: http://en.wikipedia.org/wiki/Not_invented_here - npm Install: https://www.npmjs.org/doc/cli/npm-install.html - npm Publish: https://www.npmjs.org/doc/cli/npm-publish.html - Bower API: http://bower.io/docs/api/ - CommonJS: http://www.commonjs.org/ - Browserify: http://browserify.org/ - Node.js modules Doc: http://nodejs.org/api/modules.html - AMD: https://github.com/amdjs/amdjs-api - RequireJS: http://requirejs.org/ - UMD: https://github.com/umdjs/umd - Bower.json spec: https://github.com/bower/bower.json-spec - npm package.json spec: https://www.npmjs.org/doc/files/package.json.html - AngularJS: https://angularjs.org/ - Web components: http://webcomponents.org/ - Mout and modularity: http://blog.millermedeiros.com/mout-and-modularity/ - Substack opinions on modules: http://substack.net/how_I_write_modules - Death to monolithic libraries by Cedric Dugas: http://www.position-absolute.com/articles/death-to-monolithic-libraries/