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
200
No me robes el Scroll!
pazguille
0
180
User First
pazguille
1
160
#OfflineFirst
pazguille
3
5.7k
ES6 in Production
pazguille
10
2.8k
No me hagas esperar!
pazguille
1
110
CSS Sprites vs. Data URIs
pazguille
0
360
Hello, Style Guides!
pazguille
0
170
Progressive Enhancement - Is it still important?
pazguille
0
81

Other Decks in Programming

See All in Programming
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
Ruby GitHub Packages
bkuhlmann
0
640
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
980
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
250
Elm 0.19.0 Changes
bkuhlmann
0
510
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
600
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Site Reliability Engineering for GMO
pyama86
8
1.1k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.2k

Featured

See All Featured
How to name files
jennybc
65
93k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Writing Fast Ruby
sferik
622
60k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Practical Orchestrator
shlominoach
183
9.7k
Bash Introduction
62gerente
605
210k
Making Projects Easy
brettharned
109
5.5k
4 Signs Your Business is Dying
shpigford
176
21k
How to Ace a Technical Interview
jacobian
273
22k

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