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

Decoupling your JavaScript

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Guille Paz Guille Paz
October 03, 2013
Programming
0
190

Decoupling your JavaScript

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

Avatar for Guille Paz

Guille Paz

October 03, 2013
Tweet

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
Avatar for Guille Paz pazguille
0
260
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
270
User First
Avatar for Guille Paz pazguille
1
210
#OfflineFirst
Avatar for Guille Paz pazguille
3
6k
ES6 in Production
Avatar for Guille Paz pazguille
10
3.2k
No me hagas esperar!
Avatar for Guille Paz pazguille
1
200
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
450
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
280
Progressive Enhancement - Is it still important?
Avatar for Guille Paz pazguille
0
140

Other Decks in Programming

See All in Programming
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
Avatar for 西尾義英 symy2co
0
160
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
140
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
ロボットのための工場に灯りは要らない
Avatar for watany watany
11
3k
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
140
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
420
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
460
へんな働き方
Avatar for Yusuke Wada yusukebe
5
2.7k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.4k
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
1.1k

Featured

See All Featured
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
230
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
980
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
380
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
260
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
980

Transcript

  1. Breaking large JavaScript into small pieces Decoupling your JavaScript

  2. Chico UI

  3. Carousel

  4. Modal

  5. None

  6. Chico UI

  7. Why

  8. Why •Wrong inheritance pattern

  9. Why •Wrong inheritance pattern •Non-extensible

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

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

  12. v1.0

  13. Modules

  14. Modules •Scalable

  15. Modules •Scalable •Maintainable

  16. Modules •Scalable •Maintainable •Reusable

  17. Best Practices

  18. JavaScript doesn’t provide modules

  19. None

  20. ECMAScript 6 2015 ~

  21. The Recipe

  22. Identify

  23. Define

  24. Viewport Desktop JS Shared JS Mobile JS

  25. Code!

  26. Viewport Desktop JS Shared JS Mobile JS

  27. shared/Viewport.js

  28. shared/Viewport.js prototype

  29. shared/Viewport.js

  30. Viewport Desktop JS Shared JS Mobile JS

  31. desktop/Viewport.js

  32. Viewport Desktop JS Shared JS Mobile JS

  33. mobile/Viewport.js

  34. Viewport Module

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

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

  37. None

  38. Communication

  39. Callbacks

  40. None
  41. None

  42. Events

  43. None
  44. None
  45. None

  46. Fight!

  47. Fight!

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

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

  50. Building

  51. Modules

  52. Package

  53. Takeaway •Chico v1.0 •Modules •Extend with prototype •Reuse: Mobile +

    Desktop •Communicate via events

  54. Fin