Migros.ch - Modularizing Magnolia for Switzerland's Largest Retailer
npm: Modularizing your JavaScript development
-
Upload
ruy-adorno -
Category
Technology
-
view
367 -
download
3
description
Transcript of npm: Modularizing your JavaScript development
![Page 1: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/1.jpg)
Modularizing your JavaScript development
Ruy Adorno | @ruyadorno
![Page 2: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/2.jpg)
• Huge unmaintainable chunks of code
• Anti-pattern
Monolithic applications
![Page 3: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/3.jpg)
Modularizing• Identify reusable blocks
• Create small modules
• Smaller modules are easier to maintain and can be reused later!
![Page 4: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/4.jpg)
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
![Page 5: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/5.jpg)
Why npm?
• Recently got a $2.6M funding
• Announced they want to be a part of the Front-end ecosystem
![Page 6: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/6.jpg)
Differences between
![Page 7: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/7.jpg)
Module definitions• Make code reusable
• ES6 modules are still not there yet
• npm supports any module format
![Page 8: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/8.jpg)
Global namespaces
![Page 9: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/9.jpg)
CommonJS
![Page 10: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/10.jpg)
AMD
![Page 11: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/11.jpg)
UMD
![Page 12: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/12.jpg)
Frameworks
• Have their own modules definitions
• Directives and Services are great for reuse when working with AngularJS
![Page 13: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/13.jpg)
New technologies
web components
![Page 14: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/14.jpg)
MODULARIZE
ALL THE THINGS
![Page 15: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/15.jpg)
npm install
![Page 16: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/16.jpg)
npm init
![Page 17: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/17.jpg)
![Page 18: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/18.jpg)
Automating tasks
• Yeoman is great for starting any new structure
• Grunt is the most popular JavaScript task runner
![Page 19: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/19.jpg)
Reusingthird-partymodules
![Page 20: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/20.jpg)
Share yourModules!
![Page 21: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/21.jpg)
Merci!
@ruyadorno
http://ruyadorno.com
![Page 22: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/22.jpg)
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
![Page 23: npm: Modularizing your JavaScript development](https://reader033.fdocuments.us/reader033/viewer/2022052908/559444be1a28ab0c308b47d8/html5/thumbnails/23.jpg)
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/