Modularizing your JavaScript development
Ruy Adorno | @ruyadorno
Slide 2
Slide 2 text
• Huge unmaintainable chunks of code
• Anti-pattern
Monolithic applications
Slide 3
Slide 3 text
Modularizing
• Identify reusable blocks
• Create small modules
• Smaller modules are easier to
maintain and can be reused later!
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Why npm?
• Recently got a $2.6M funding
• Announced they want to be a part of the
Front-end ecosystem
Slide 6
Slide 6 text
Differences between
Slide 7
Slide 7 text
Module definitions
• Make code reusable
• ES6 modules are still not there yet
• npm supports any module format
Slide 8
Slide 8 text
Global namespaces
Slide 9
Slide 9 text
CommonJS
Slide 10
Slide 10 text
AMD
Slide 11
Slide 11 text
UMD
Slide 12
Slide 12 text
Frameworks
• Have their own modules definitions
• Directives and Services are great for reuse
when working with AngularJS
Slide 13
Slide 13 text
New technologies
web components
Slide 14
Slide 14 text
MODULARIZE
ALL THE THINGS
Slide 15
Slide 15 text
npm install
Slide 16
Slide 16 text
npm init
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Automating tasks
• Yeoman is great for starting any new structure
• Grunt is the most popular JavaScript task runner
Slide 19
Slide 19 text
Reusing
third-party
modules
Slide 20
Slide 20 text
Share your
Modules!
Slide 21
Slide 21 text
Merci!
@ruyadorno
http://ruyadorno.com
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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/