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

npm: Modularizing your JavaScript development

B1f68959f14f39a7cba2bc9fd4b926e9?s=47 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


  1. Modularizing your JavaScript development Ruy Adorno | @ruyadorno

  2. • Huge unmaintainable chunks of code • Anti-pattern Monolithic applications

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

    Smaller modules are easier to maintain and can be reused later!
  4. 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
  5. Why npm? • Recently got a $2.6M funding • Announced

    they want to be a part of the Front-end ecosystem
  6. Differences between

  7. Module definitions • Make code reusable • ES6 modules are

    still not there yet • npm supports any module format
  8. Global namespaces

  9. CommonJS

  10. AMD

  11. UMD

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

    Services are great for reuse when working with AngularJS
  13. New technologies web components


  15. npm install

  16. npm init

  17. None
  18. Automating tasks • Yeoman is great for starting any new

    structure • Grunt is the most popular JavaScript task runner
  19. Reusing third-party modules

  20. Share your Modules!

  21. Merci! @ruyadorno http://ruyadorno.com

  22. 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
  23. 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/