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
180
No me robes el Scroll!
pazguille
0
170
User First
pazguille
1
140
#OfflineFirst
pazguille
3
5.6k
ES6 in Production
pazguille
10
2.6k
No me hagas esperar!
pazguille
1
86
CSS Sprites vs. Data URIs
pazguille
0
330
Hello, Style Guides!
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
73

Other Decks in Programming

See All in Programming
Automated testing in Ruby 101
okuramasafumi
1
450
SymfonyLive Paris 2023: Scheduler
fabpot
1
740
ChatGPTによるデータ変換がもたらすインパクト
masahiro_nishimi
3
3.1k
一緒にスクラム開発___GPT-4と人間が共創するプロダクトの進化.pdf
itohiro73
5
4.8k
Honoの3+1のルーターとそこにつながるPRがプロジェクトにもたらしたもの
usualoma
1
720
Cloudflare 概論 Cloudflare Meetup Kick Off! #CloudflareUG
maroon1st
0
460
テキストエディタのブラウザ実装 / tokyo_study
oliver_diary
0
160
結合テストの自動化にQAはどうかかわっていったか
nagworld
0
130
いろいろなフレームワークの仕組みを index.php から読み解こう / index.php of each framework
okashoi
0
210
UICollectionViewのAPIを活用してシンプルなコードにリファクタリングする
hicka04
1
550
鹿児島からRubyではじめるスタートアップ
yoshikouki
0
710
AWS移行を通して得られた知見と教訓
mthiroshi00excite
0
270

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
670
Scaling GitHub
holman
453
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
11
1.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Fireside Chat
paigeccino
16
2k
Product Roadmaps are Hard
iamctodd
38
7.9k
Six Lessons from altMBA
skipperchong
15
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
Music & Morning Musume
bryan
37
4.7k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Bootstrapping a Software Product
garrettdimon
299
110k

Transcript

  1. Breaking large JavaScript into small pieces
    Decoupling your JavaScript

    View Slide

  2. Chico UI

    View Slide

  3. Carousel

    View Slide

  4. Modal

    View Slide

  5. View Slide

  6. Chico UI

    View Slide

  7. Why

    View Slide

  8. Why
    •Wrong inheritance pattern

    View Slide

  9. Why
    •Wrong inheritance pattern
    •Non-extensible

    View Slide

  10. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable

    View Slide

  11. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View Slide

  12. v1.0

    View Slide

  13. Modules

    View Slide

  14. Modules
    •Scalable

    View Slide

  15. Modules
    •Scalable
    •Maintainable

    View Slide

  16. Modules
    •Scalable
    •Maintainable
    •Reusable

    View Slide

  17. Best Practices

    View Slide

  18. JavaScript doesn’t
    provide modules

    View Slide

  19. View Slide

  20. ECMAScript 6
    2015
    ~

    View Slide

  21. The Recipe

    View Slide

  22. Identify

    View Slide

  23. Define

    View Slide

  24. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  25. Code!

    View Slide

  26. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  27. shared/Viewport.js

    View Slide

  28. shared/Viewport.js
    prototype

    View Slide

  29. shared/Viewport.js

    View Slide

  30. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  31. desktop/Viewport.js

    View Slide

  32. Viewport
    Desktop
    JS
    Shared
    JS
    Mobile
    JS

    View Slide

  33. mobile/Viewport.js

    View Slide

  34. Viewport Module

    View Slide

  35. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View Slide

  36. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View Slide

  37. View Slide

  38. Communication

    View Slide

  39. Callbacks

    View Slide

  40. View Slide

  41. View Slide

  42. Events

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. Fight!

    View Slide

  47. Fight!

    View Slide

  48. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View Slide

  49. Why
    •Wrong inheritance pattern
    •Non-extensible
    •Non-scalable
    •Miscommunication between widgets

    View Slide

  50. Building

    View Slide

  51. Modules

    View Slide

  52. Package

    View Slide

  53. Takeaway
    •Chico v1.0
    •Modules
    •Extend with prototype
    •Reuse: Mobile + Desktop
    •Communicate via events

    View Slide

  54. Fin

    View Slide