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
110
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
(Somewhat) Complex Component Design – Ember.BP, 2015/02/11
Balint Erdi
February 11, 2016
More Decks by Balint Erdi
See All by Balint Erdi
Data Loading Patterns with JSON API
balint
5
1.5k
Why you should consider Ember.js for your next project
balint
4
360
Data Loading Patterns in Ember
balint
1
250
Auth* in Ember apps with Torii
balint
1
330
Complex Component Design in Ember
balint
0
410
Don't call me back - How Ember uses promises and how you can, too
balint
5
11k
Acceptance testing in Ember.js
balint
1
540
Unit testing in Ember.js
balint
0
120
Introduction to ember-data
balint
0
190
Other Decks in Technology
See All in Technology
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
masahirokawahara
1
300
bet_ai_day_2026_session02
agenticsec
1
980
PdMをやめて、 "プロダクトビルダー"という 働き方に変えました / PdM to Product Builder
shikichee
2
710
AI時代におけるプロダクト横断勉強会の設計
zozotech
PRO
0
150
どんな手を使っても絶対間に合わせるスケジューラ
asari194617
0
1.6k
Bet AI Day 2026丨How We Bet AI: AIとともに働く場をつくる
layerx
PRO
2
2.2k
Backstageでつくるセルフサービスな社内開発基盤
kikunosuke75
1
290
DMMブックスのNext.js化を加速させるAI活用 / Migrating DMM Books to Next.js with AI
kentarom
1
330
設計の世代交代を乗り越える、14年続くAndroidアプリの開発戦略
sansantech
PRO
1
120
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
falken
PRO
0
240
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
shigeruoda
0
380
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
masaruogura
0
230
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
990
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
410
Speed Design
sergeychernyshev
33
2.1k
AI: The stuff that nobody shows you
jnunemaker
PRO
9
970
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
500
Large-scale JavaScript Application Architecture
addyosmani
515
110k
What's in a price? How to price your products and services
michaelherold
247
13k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
67
58k
How to train your dragon (web standard)
notwaldorf
97
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
The Limits of Empathy - UXLibs8
cassininazir
1
640
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.