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