Decoupling your JavaScript: Breaking large JavaScript into small pieces at MercadoLibre Retreat 2013
Breaking large JavaScript into small piecesDecoupling your JavaScript
View Slide
Chico UI
Carousel
Modal
Why
Why•Wrong inheritance pattern
Why•Wrong inheritance pattern•Non-extensible
Why•Wrong inheritance pattern•Non-extensible•Non-scalable
Why•Wrong inheritance pattern•Non-extensible•Non-scalable•Miscommunication between widgets
v1.0
Modules
Modules•Scalable
Modules•Scalable•Maintainable
Modules•Scalable•Maintainable•Reusable
Best Practices
JavaScript doesn’tprovide modules
ECMAScript 62015~
The Recipe
Identify
Define
ViewportDesktopJSSharedJSMobileJS
Code!
shared/Viewport.js
shared/Viewport.jsprototype
desktop/Viewport.js
mobile/Viewport.js
Viewport Module
Communication
Callbacks
Events
Fight!
Building
Package
Takeaway•Chico v1.0•Modules•Extend with prototype•Reuse: Mobile + Desktop•Communicate via events
Fin