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

(Somewhat) Complex Component Design – Ember.BP,...

Avatar for Balint Erdi Balint Erdi
February 11, 2016
Technology
1
91

(Somewhat) Complex Component Design – Ember.BP, 2015/02/11

Avatar for Balint Erdi

Balint Erdi

February 11, 2016
Tweet

More Decks by Balint Erdi

See All by Balint Erdi
Data Loading Patterns with JSON API
Avatar for Balint Erdi balint
5
1.4k
Why you should consider Ember.js for your next project
Avatar for Balint Erdi balint
4
300
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
200
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
300
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
380
Don't call me back - How Ember uses promises and how you can, too
Avatar for Balint Erdi balint
5
11k
Acceptance testing in Ember.js
Avatar for Balint Erdi balint
1
520
Unit testing in Ember.js
Avatar for Balint Erdi balint
0
82
Introduction to ember-data
Avatar for Balint Erdi balint
0
160

Other Decks in Technology

See All in Technology
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
120
Access-what? why and how, A11Y for All - Nordic.js 2025
Avatar for Geisy Domiciano gdomiciano
1
120
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
540
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
Avatar for oracle4engineer oracle4engineer
PRO
2
140
スタートアップにおけるこれからの「データ整備」
Avatar for ShoMaekawa/ウィル shomaekawa
1
280
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
1
7.8k
Git in Team
Avatar for Yasunobu Kawaguchi kawaguti
PRO
2
190
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
1.1k
Adapty_東京AI祭ハッカソン2025ピッチスライド
Avatar for shino shinoyamada
0
110
英語は話せません！それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
Avatar for ニイオカ niioka_97
0
130
Where will it converge?
Avatar for Ibukun Adedeji ibknadedeji
0
190

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k

Transcript

  1. Complex Component Design Ember.BP – 2015/02/11

  2. Best of the month

  3. None
  4. None

  5. Song of the month

  6. http://frontside.io/blog/2016/01/22/functional-templating-in- ember.html

  7. https://github.com/samselikoff/ember-cli-mirage

  8. Survey results

  9. (Somewhat) Complex Component Design

  10. Basic component concepts

  11. None

  12. Non-block form (no hash)

  13. Non-block form (no hash) Block form (with hash)

  14. Non-block form (no hash) Block form (with hash) Yields parameters

    to the block form (function call)

  15. Non-block form (no hash) Block form (with hash) Yields parameters

    to the block form (function call) Block params (function params)

  16. Closure (vs. element) actions

  17. Element actions (iact “string” actions)

  18. None
  19. None
  20. None

  21. Closure actions

  22. None

  23. Why closure actions? • They can return values • Enable

    reacting to actions sent from the controller • Better debuggability • They can also bubble (check out ember-route- action-helper)

  24. Component design guidelines

  25. Short & sweet non-block form

  26. Don’t assume too much

  27. Allow customization

  28. Data down, actions up (Use actions)

  29. Data down, actions up (Use actions) Don’t do that.

  30. Advanced concepts • Keep your component layers decoupled • Find

    ways to prevent registering • Replace observers with (DOM) actions

  31. Advanced concepts http://balinterdi.com/2015/09/10/complex-component-design- in-ember-intro.html

  32. Thank you.