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 Slide

  2. Chico UI

    View Slide

  3. Carousel

    View Slide

  4. Modal

    View Slide

  5. View Slide

  6. Chico UI

    View Slide

  7. Why

    View Slide

  8. Why
    •Wrong inheritance pattern

    View Slide

  9. Why
    •Wrong inheritance pattern
    •Non-extensible

    View Slide

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

    View Slide

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

    View Slide

  12. v1.0

    View Slide

  13. Modules

    View Slide

  14. Modules
    •Scalable

    View Slide

  15. Modules
    •Scalable
    •Maintainable

    View Slide

  16. Modules
    •Scalable
    •Maintainable
    •Reusable

    View Slide

  17. Best Practices

    View Slide

  18. JavaScript doesn’t
    provide modules

    View Slide

  19. View Slide

  20. ECMAScript 6
    2015
    ~

    View Slide

  21. The Recipe

    View Slide

  22. Identify

    View Slide

  23. Define

    View Slide

  24. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  25. Code!

    View Slide

  26. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  27. shared/Viewport.js

    View Slide

  28. shared/Viewport.js
    prototype

    View Slide

  29. shared/Viewport.js

    View Slide

  30. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  31. desktop/Viewport.js

    View Slide

  32. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  33. mobile/Viewport.js

    View Slide

  34. Viewport Module

    View Slide

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

    View Slide

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

    View Slide

  37. View Slide

  38. Communication

    View Slide

  39. Callbacks

    View Slide

  40. View Slide

  41. View Slide

  42. Events

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. Fight!

    View Slide

  47. Fight!

    View Slide

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

    View Slide

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

    View Slide

  50. Building

    View Slide

  51. Modules

    View Slide

  52. Package

    View Slide

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

    View Slide

  54. Fin

    View Slide