Date post: | 02-Jul-2015 |
Category: |
Technology |
Upload: | ruy-adorno |
View: | 366 times |
Download: | 3 times |
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/