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
92

(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
310
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
210
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
83
Introduction to ember-data
Avatar for Balint Erdi balint
0
170

Other Decks in Technology

See All in Technology
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
Avatar for Yuuki Yamashita yama3133
2
230
Giving Tuesday Auctria Set-Up 2025
Avatar for Auctria auctria
PRO
0
100
ピープルウエア x スタートアップ
Avatar for operandoOS operando
2
3.4k
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
Avatar for iwashi iwashi86
9
4.5k
なぜ新機能リリース翌日に モニタリング可能なのか？ 〜リードタイム短縮とリソース問題を「自走」で改善した話〜 / data_summit_findy_Session_2
Avatar for Sansan R&D sansan_randd
1
120
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
950
LLM APIを2年間本番運用して苦労した話
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
10
8.4k
戦えるAIエージェントの作り方
Avatar for Takuya Akiba iwiwi
22
11k
AI時代に必要なデータプラットフォームの要件とは by @Kazaneya_PR / 20251107
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
4
720
20251102 WordCamp Kansai 2025
Avatar for Chiaki Okamoto chiilog
1
550
kotlin-lsp の開発開始に触発されて、Emacs で Kotlin 開発に挑戦した記録 / kotlin‑lsp as a Catalyst: My Journey to Kotlin Development in Emacs
Avatar for nabeo nabeo
2
340
Amazon Q Developer CLIをClaude Codeから使うためのベストプラクティスを考えてみた
Avatar for banquet.kuma dar_kuma_san
0
340

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
192
56k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k

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.