Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
(Somewhat) Complex Component Design – Ember.BP,...
Search
Balint Erdi
February 11, 2016
Technology
120
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
370
Data Loading Patterns in Ember
balint
1
270
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
550
Unit testing in Ember.js
balint
0
130
Introduction to ember-data
balint
0
200
Other Decks in Technology
See All in Technology
LLM-as-a-Judgeは本当に信頼できるのか――評価器を評価する話
taka_aki
3
1k
Refining Active Record
shugo
0
190
Claude for Google Workspaces ポン出し/claude-for-google-workspace-slide-conversion
emiki
0
230
From Developer Experience to Agentic Experience: The Next Evolution of APIs
benjagm
0
110
AI駆動で「他アプリの音を加工できる」アプリを作った
satomasahiro2005
0
190
FinOps Agentが生んだ技術負債:コスト自動調査の落とし穴と解消までの道のり
oasis1994liveforever
3
250
野蛮なアジャイル [サイボウズ発!]組織の常識を覆した反骨のスクラム実践記 / Barbaric Agile - Enterprise Agile Study Group
ama_ch
0
120
Metadata - Section 2: Simple Metadata & Meta Tags
mohab1
0
120
「エーアイ」をバズワードにしないために RPA 導入経験と Kiro 上での Claude モデル利用経験から
kazzpapa3
0
120
How to Design Configuration for Rails Applications
willnet
1
1.1k
トークン化預金DCJPYの取り組みと活用ユースケース
finengine
0
230
『SAR衛星データ解析入門』のご紹介とその応用
syuchimu
0
140
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
460
The agentic SEO stack - context over prompts
schlessera
0
970
Accessibility Awareness
sabderemane
1
250
A Modern Web Designer's Workflow
chriscoyier
699
190k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
630
The Curious Case for Waylosing
cassininazir
1
570
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
480
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
5
840
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
330
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
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.