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
110
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.5k
Why you should consider Ember.js for your next project
Avatar for Balint Erdi balint
4
360
Data Loading Patterns in Ember
Avatar for Balint Erdi balint
1
250
Auth* in Ember apps with Torii
Avatar for Balint Erdi balint
1
330
Complex Component Design in Ember
Avatar for Balint Erdi balint
0
410
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
540
Unit testing in Ember.js
Avatar for Balint Erdi balint
0
120
Introduction to ember-data
Avatar for Balint Erdi balint
0
190

Other Decks in Technology

See All in Technology
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.7k
Model Studio CLI × Token Plan
Avatar for 尾関将樹 | めい maigo999
0
190
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
280
ブラウザ研修 2026
Avatar for Recruit recruitengineers
PRO
7
1.2k
FPGAが実現する遠方宇宙の高空間分解能天体撮影 -大型地上望遠鏡の視力を補正する「補償光学」とは？-
Avatar for 高橋光明 / Mitsuaki Takahashi komei_mt
0
490
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
3
1k
QAエンジニア起点で進める、SmartHRにおける信頼性向上について
Avatar for kaomi kaomi_wombat
1
150
小粒でもパワフルなJS Runtime Antjsについて
Avatar for Comamoca comamoca
0
100
今こそ聞きたいソフトウェア設計　ドメイン駆動設計再入門
Avatar for 増田 亨 masuda220
PRO
17
7.6k
Bits AI を制するものは Datadog を制す / The player that controls  Bits AI, controls Datadog
Avatar for 株式会社カミナシ kaminashi
0
130
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
290
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
270

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
490
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
370
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
800
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
470
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
650
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
870
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
350
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
530
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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.