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