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
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
110
SwiftDataのカスタムデータストアを試してみた
Avatar for 1mash0 1mash0
0
150
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
110
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
810
最速Green Tea 🍵 Garbage Collector
Avatar for kuro kuro_kurorrr
1
120
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
Avatar for nrs nrslib
0
270
파급효과: From AI to Android Development
Avatar for HyunWoo Lee l2hyunwoo
0
160
AIコーディングの理想と現実
Avatar for Tomohisa Takaoka tomohisa
37
40k
ビカム・ア・コパイロット
Avatar for Kento.Yamada ymd65536
1
130
iOSアプリで測る！名古屋駅までの 方向と距離
Avatar for Ryu-nakayama ryunakayama
0
160
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
Avatar for Masayuki Izumi izumin5210
6
1.6k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
120

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k

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