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

Decoupling your JavaScript

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Guille Paz Guille Paz
October 03, 2013
Programming
0
180

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

Other Decks in Programming

See All in Programming
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
590
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
4
330
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
250
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
170
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
150
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
160
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
320
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
310

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