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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Balint Erdi Balint Erdi
February 11, 2016
Technology
1
98

(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
330
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
230
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
310
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
390
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
530
Unit testing in Ember.js
Avatar for Balint Erdi balint
0
100
Introduction to ember-data
Avatar for Balint Erdi balint
0
170

Other Decks in Technology

See All in Technology
ブログの作成に音声AIツールを使って音声入力しようとした話
Avatar for Makky12 smt7174
1
190
Claude Codeと駆け抜ける 情報収集と実践録
Avatar for sontixyou sontixyou
1
1.1k
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
「データとの対話」の現在地と未来
Avatar for kobakou kobakou
0
620
AWSが推進する AI駆動開発ライフサイクル入門 〜 AI駆動開発時代に必要な人材とは 〜 / introduction_to_aidlc_and_skills
Avatar for Atsushi Fukui fatsushi
7
4.9k
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2026年2月20日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
110
LY Tableauでの Tableau x AIの実践 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
610
生成AI素人でも玄人でもない私がｾｲｾｲAIﾁｮｯﾄﾜｶﾙために勉強したこと
Avatar for wkm2 wkm2
2
320
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
10
19k
Lookerの最新バージョンv26.2がやばい話
Avatar for Yuta Ozaki waiwai2111
1
110
Agent Payments Protocolで実装するAIエージェント間取引
Avatar for Hakamada-DentsuSoken tokio007
0
160
【Developers Summit 2026】Memory Is All You Need:コンテキストの「最適化」から「継続性」へ ～RAGを進化させるメモリエンジニアリングの最前線～
Avatar for KoheiOgawa shisyu_gaku
5
760

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.3k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
460
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
110
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
180
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
210
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
180
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
360

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.