Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
(Somewhat) Complex Component Design – Ember.BP,...
Search
Balint Erdi
February 11, 2016
Technology
1
91
(Somewhat) Complex Component Design – Ember.BP, 2015/02/11
Balint Erdi
February 11, 2016
Tweet
Share
More Decks by Balint Erdi
See All by Balint Erdi
Data Loading Patterns with JSON API
balint
5
1.4k
Why you should consider Ember.js for your next project
balint
4
290
Data Loading Patterns in Ember
balint
1
200
Auth* in Ember apps with Torii
balint
1
300
Complex Component Design in Ember
balint
0
380
Don't call me back - How Ember uses promises and how you can, too
balint
5
10k
Acceptance testing in Ember.js
balint
1
520
Unit testing in Ember.js
balint
0
78
Introduction to ember-data
balint
0
160
Other Decks in Technology
See All in Technology
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.8k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
三視点LLMによる複数観点レビュー
mhlyc
0
230
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
300
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
Digitization部 紹介資料
sansan33
PRO
1
4.5k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Balancing Empowerment & Direction
lara
1
450
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Code Review Best Practice
trishagee
69
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Complex Component Design Ember.BP – 2015/02/11
Best of the month
None
None
Song of the month
http://frontside.io/blog/2016/01/22/functional-templating-in- ember.html
https://github.com/samselikoff/ember-cli-mirage
Survey results
(Somewhat) Complex Component Design
Basic component concepts
None
Non-block form (no hash)
Non-block form (no hash) Block form (with hash)
Non-block form (no hash) Block form (with hash) Yields parameters
to the block form (function call)
Non-block form (no hash) Block form (with hash) Yields parameters
to the block form (function call) Block params (function params)
Closure (vs. element) actions
Element actions (iact “string” actions)
None
None
None
Closure actions
None
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)
Component design guidelines
Short & sweet non-block form
Don’t assume too much
Allow customization
Data down, actions up (Use actions)
Data down, actions up (Use actions) Don’t do that.
Advanced concepts • Keep your component layers decoupled • Find
ways to prevent registering • Replace observers with (DOM) actions
Advanced concepts http://balinterdi.com/2015/09/10/complex-component-design- in-ember-intro.html
Thank you.