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

Decoupling your JavaScript

Avatar for Guille Paz Guille Paz
October 03, 2013
Programming
0
150

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
220
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
210
User First
Avatar for Guille Paz pazguille
1
170
#OfflineFirst
Avatar for Guille Paz pazguille
3
5.8k
ES6 in Production
Avatar for Guille Paz pazguille
10
3k
No me hagas esperar!
Avatar for Guille Paz pazguille
1
130
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
400
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
240
Progressive Enhancement - Is it still important?
Avatar for Guille Paz pazguille
0
100

Other Decks in Programming

See All in Programming
By the way Google Cloud Next 2025に行ってみてどうだった
Avatar for Kento.Yamada ymd65536
0
120
Global Azure 2025 @ Kansai / Hyperlight
Avatar for kosmosebi kosmosebi
0
140
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
960
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.2k
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
45
10k
Носок на сок
Avatar for Bo0oM bo0om
0
1.2k
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
Avatar for ChengHao Yang tico88612
0
170
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
1
290
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
Avatar for r-kagaya rkaga
1
710
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
1.9k
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
630
generative-ai-use-cases(GenU)の推しポイント ～2025年4月版～
Avatar for Hideyuki Nagata hideg
1
390

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
540
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k

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