Modularizing your JavaScript development

Ruy Adorno | @ruyadorno

• Huge unmaintainable chunks of code

• Anti-pattern

Monolithic applications

Modularizing• Identify reusable blocks

• Create small modules

• Smaller modules are easier to maintain and can be reused later!

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

Why npm?

• Recently got a $2.6M funding

• Announced they want to be a part of the Front-end ecosystem

Differences between

Module definitions• Make code reusable

• ES6 modules are still not there yet

• npm supports any module format

Global namespaces

CommonJS

AMD

UMD

Frameworks

• Have their own modules definitions

• Directives and Services are great for reuse when working with AngularJS

New technologies

web components

MODULARIZE

ALL THE THINGS

npm install

npm init

Automating tasks

• Yeoman is great for starting any new structure

• Grunt is the most popular JavaScript task runner

Reusingthird-partymodules

Share yourModules!

Merci!

@ruyadorno

http://ruyadorno.com

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

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/