Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupling your JavaScript

Guille Paz
October 03, 2013

Decoupling your JavaScript

Decoupling your JavaScript: Breaking large JavaScript into small pieces at MercadoLibre Retreat 2013

Guille Paz

October 03, 2013
Tweet

More Decks by Guille Paz

Other Decks in Programming

Transcript

  1. Breaking large JavaScript into small pieces
    Decoupling your JavaScript

    View full-size slide

  2. Why
    •Wrong inheritance pattern

    View full-size slide

  3. Why
    •Wrong inheritance pattern
    •Non-extensible

    View full-size slide

  4. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable

    View full-size slide

  5. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View full-size slide

  6. Modules
    •Scalable

    View full-size slide

  7. Modules
    •Scalable
    •Maintainable

    View full-size slide

  8. Modules
    •Scalable
    •Maintainable
    •Reusable

    View full-size slide

  9. Best Practices

    View full-size slide

  10. JavaScript doesn’t
    provide modules

    View full-size slide

  11. ECMAScript 6
    2015
    ~

    View full-size slide

  12. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View full-size slide

  13. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View full-size slide

  14. shared/Viewport.js

    View full-size slide

  15. shared/Viewport.js
    prototype

    View full-size slide

  16. shared/Viewport.js

    View full-size slide

  17. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View full-size slide

  18. desktop/Viewport.js

    View full-size slide

  19. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View full-size slide

  20. mobile/Viewport.js

    View full-size slide

  21. Viewport Module

    View full-size slide

  22. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View full-size slide

  23. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View full-size slide

  24. Communication

    View full-size slide

  25. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View full-size slide

  26. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View full-size slide

  27. Takeaway
    •Chico v1.0
    •Modules
    •Extend with prototype
    •Reuse: Mobile + Desktop
    •Communicate via events

    View full-size slide