Decoupling your JavaScript

  • 393 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
393
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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