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

Transcript

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
14. MODULARIZE ALL THE THINGS
15. npm install
16. npm init
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/