modularize all the things
DESCRIPTION
Publishing and reusing Javascript modules doesn't need to be hard. This talk shows some tips on how to use Package managers, use a module definition to share your work and finally how to publish it; so the world (including yourself) can reuse it later! Presented at JS Montreal in 12 august 2014TRANSCRIPT
MODULARIZE
ALL THE THINGS
Building the case forModularization
Real world examples:Monolithic applications
The 2013 website
The 2013 website
sticky header
parallaxcontact form
carousel
The elephantin the room
Reinventing the wheel
Reinventing the wheelNot invented here syndrome
Reinventing the wheelNot invented here syndrome
Learning curve
You could haveit so much better
Modularizing
Identifyingreusableblocks
What if reusing an elementcould be as simple as:
What if reusing an elementcould be as simple as:
Leaving thecomfort zone
Time for a new
workflow
PackageManagers
npm:
default Node.js package managercomes with new Node.js installations
most popular front-end package manager
must be installed using npm
Differences between npm and Bower
package.json bower.json
Moduledefinition
window.namespace
window.namespace
CommonJS
AMD
UMD
UMD
Frameworks
AngularJS
Angular has its own module definitions.Directives and Services are great!
New technologies
Web components
Automating
Tasks
Yeoman
Yeoman is not only great for starting big projects.
Run a generator and get your modulestructure ready in a matter of seconds!
generator-nodegenerator-amdgenerator-angular
Grunt
Your Yeoman generator will certainly bring youa Gruntfile with many useful Grunt tasks by default.
Improve it with tasks to speed up module releases:
grunt-bumpgrunt-sg-release
Publishing
It doesn’t HAVE to be open-source. Both npm and Bowersupports many endpoints such as Git, SVN, zip, local folder, etc.
npm publish / bower register
Once our package is published we can just install and use it.
Just as we wanted:
Reusingthird-partymodules
Cedric Dugas
“Can I code it myself easily?Do I have time?What browsers is this supporting?Number of open issues?What’s the code size?Do I trust this guy (or team)?”
Share yourmodules!
Merci!
@ruyadorno
http://ruyadorno.com
- Paint all the memes by Sam Spratt: http://samspratt.com/- Monolith III by Tim Jarvis: http://www.magnasoma.co.uk/#/monolith-3- Elephant in the room photo: “Barely Legal” exhibition, September 15, 2006. (REUTERS/Fred Prouser)- Lego Color Bricks by Alan Chia: http://commons.wikimedia.org/wiki/File:Lego_Color_Bricks.jpg- Franz Ferdinand - You Could Have It So Much Better album cover- 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
Image Credits
- Package management system: http://en.wikipedia.org/wiki/Package_management_system- Not Invented here: http://en.wikipedia.org/wiki/Not_invented_here- 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/- Nod- 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-mono-lithic-libraries/
List of Javascript Package managers:
- npm: https://www.npmjs.org/- Bower: http://bower.io/- Volo: http://volojs.org/- Jam: http://jamjs.org/- Component: https://github.com/component/component
References