Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Decoupling your JavaScript
Breaking large JavaScript into small pieces
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 6
2015
~
The Recipe
Identify
Define
Viewport

Desktop

Shared
JS

Mobile
JS

JS
Code!
Viewport

Desktop

Shared
JS

Mobile
JS

JS
shared/Viewport.js
shared/Viewport.js

prototype
shared/Viewport.js
Viewport

Desktop

Shared
JS

Mobile
JS

JS
desktop/Viewport.js
Viewport

Desktop

Shared
JS

Mobile
JS

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
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Decoupling your JavaScript
Upcoming SlideShare
Loading in …5
×

Decoupling your JavaScript

846 views

Published on

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

Published in: Technology
  • Be the first to comment

Decoupling your JavaScript

  1. 1. Decoupling your JavaScript Breaking large JavaScript into small pieces
  2. 2. Chico UI
  3. 3. Carousel
  4. 4. Modal
  5. 5. Chico UI
  6. 6. Why
  7. 7. Why •Wrong inheritance pattern
  8. 8. Why •Wrong inheritance pattern •Non-extensible
  9. 9. Why •Wrong inheritance pattern •Non-extensible •Non-scalable
  10. 10. Why •Wrong inheritance pattern •Non-extensible •Non-scalable •Miscommunication between widgets
  11. 11. v1.0
  12. 12. Modules
  13. 13. Modules •Scalable
  14. 14. Modules •Scalable •Maintainable
  15. 15. Modules •Scalable •Maintainable •Reusable
  16. 16. Best Practices
  17. 17. JavaScript doesn’t provide modules
  18. 18. ECMAScript 6 2015 ~
  19. 19. The Recipe
  20. 20. Identify
  21. 21. Define
  22. 22. Viewport Desktop Shared JS Mobile JS JS
  23. 23. Code!
  24. 24. Viewport Desktop Shared JS Mobile JS JS
  25. 25. shared/Viewport.js
  26. 26. shared/Viewport.js prototype
  27. 27. shared/Viewport.js
  28. 28. Viewport Desktop Shared JS Mobile JS JS
  29. 29. desktop/Viewport.js
  30. 30. Viewport Desktop Shared JS Mobile JS JS
  31. 31. mobile/Viewport.js
  32. 32. Viewport Module
  33. 33. Why •Wrong inheritance pattern •Non-extensible •Non-scalable •Miscommunication between widgets
  34. 34. Why •Wrong inheritance pattern •Non-extensible •Non-scalable •Miscommunication between widgets
  35. 35. Communication
  36. 36. Callbacks
  37. 37. Events
  38. 38. Fight!
  39. 39. Fight!
  40. 40. Why •Wrong inheritance pattern •Non-extensible •Non-scalable •Miscommunication between widgets
  41. 41. Why •Wrong inheritance pattern •Non-extensible •Non-scalable •Miscommunication between widgets
  42. 42. Building
  43. 43. Modules
  44. 44. Package
  45. 45. Takeaway •Chico v1.0 •Modules •Extend with prototype •Reuse: Mobile + Desktop •Communicate via events
  46. 46. Fin

×