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

Decoupling your JavaScript

Guille Paz
October 03, 2013
Programming
0
140

Decoupling your JavaScript

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

Guille Paz

October 03, 2013
Tweet

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
pazguille
0
210
No me robes el Scroll!
pazguille
0
190
User First
pazguille
1
170
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
2.9k
No me hagas esperar!
pazguille
1
120
CSS Sprites vs. Data URIs
pazguille
0
380
Hello, Style Guides!
pazguille
0
210
Progressive Enhancement - Is it still important?
pazguille
0
91

Other Decks in Programming

See All in Programming
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
150
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.4k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
110
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
最新TCAキャッチアップ
0si43
0
140
Realtime API 入門
riofujimon
0
150
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.8k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
310
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220

Featured

See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Fireside Chat
paigeccino
34
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Making Projects Easy
brettharned
115
5.9k
Building Applications with DynamoDB
mza
90
6.1k
Thoughts on Productivity
jonyablonski
67
4.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k

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