Upload
guille-paz
View
525
Download
0
Embed Size (px)
DESCRIPTION
Decoupling your JavaScript: Breaking large JavaScript into small pieces at MercadoLibre Retreat 2013
Citation preview
Breaking large JavaScript into small pieces
Decoupling your JavaScript
Chico UI
Carousel
Modal
Chico UI
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’t provide modules
ECMAScript 62015~
The Recipe
Identify
Define
Viewport
Desktop
JS
Shared
JS
Mobile
JS
Code!
Viewport
Desktop
JS
Shared
JS
Mobile
JS
shared/Viewport.js
shared/Viewport.js
prototype
shared/Viewport.js
Viewport
Desktop
JS
Shared
JS
Mobile
JS
desktop/Viewport.js
Viewport
Desktop
JS
Shared
JS
Mobile
JS
mobile/Viewport.js
Viewport Module
Why•Wrong inheritance pattern
•Non-extensible
•Non-scalable
•Miscommunication between widgets
Why•Wrong inheritance pattern
•Non-extensible
•Non-scalable
•Miscommunication between widgets
Communication
Callbacks
Events
Fight!
Fight!
Why•Wrong inheritance pattern
•Non-extensible
•Non-scalable
•Miscommunication between widgets
Why•Wrong inheritance pattern
•Non-extensible
•Non-scalable
•Miscommunication between widgets
Building
Modules
Package
Takeaway•Chico v1.0
•Modules
•Extend with prototype
•Reuse: Mobile + Desktop
•Communicate via events
Fin