Download - Decoupling your JavaScript
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