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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Balint Erdi Balint Erdi
February 11, 2016
Technology
100
1

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

Avatar for Balint Erdi

Balint Erdi

February 11, 2016

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
340
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
240
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
320
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
400
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
110
Introduction to ember-data
Avatar for Balint Erdi balint
0
180

Other Decks in Technology

See All in Technology
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
210
小さいVue.jsを30分で作る
Avatar for Hal hal_spidernight
0
160
なぜ、私がCommunity Builderに?〜活動期間1か月半でも選出されたワケ〜
Avatar for Yuuki Yamashita yama3133
0
130
「QA＝テスト」「シフトレフト＝スクラムイベントの参加者の一員」の呪縛を解く。アジャイルな開発を止めないために、10Xで挑んだ「右側のしわ寄せ」解消記 #scrumniigata
Avatar for nihonbuson nihonbuson
PRO
5
1.4k
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
100k
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
Avatar for butatamasoba / Shota Kusaba / 草場翔太 shota_kusaba
0
240
10サービス以上のメール到達率改善を地道に継続的に進めている話 / Continue to improve email delivery rates across multiple services
Avatar for Takashi Yamaguchi yamaguchitk333
6
1.8k
バイブコーディング、仕様駆動、その先へ - 「不確実性に対する検査‧適応のサイクル」を設計する
Avatar for Koichiro Matsuoka littlehands
1
210
O'Reilly Infrastructure & Ops Superstream: Platform Engineering for Developers, Architects & the Rest of Us
Avatar for Syntasso syntasso
0
150
Claude Code / Codex / Kiro に AWS 権限を 渡すとき、何を設計すべきか
Avatar for Kazuki Adachi k_adachi_01
5
1.4k
Agent の「自由」と「安全」〜未来に向けて今できること〜
Avatar for katayan katayan
0
360
カオナビに Suspenseを導入するまで / The Road to Suspense at kaonavi
Avatar for 株式会社カオナビ kaonavi
1
450

Featured

See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
280
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
460
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
780
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
360
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
240
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k

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.