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
87
(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.3k
Why you should consider Ember.js for your next project
balint
4
250
Data Loading Patterns in Ember
balint
1
180
Auth* in Ember apps with Torii
balint
1
290
Complex Component Design in Ember
balint
0
360
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
67
Introduction to ember-data
balint
0
150
Other Decks in Technology
See All in Technology
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
190
非機能品質を作り込むための実践アーキテクチャ
knih
3
1.1k
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
150
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
280
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
190
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Agile that works and the tools we love
rasmusluckow
328
21k
Fireside Chat
paigeccino
34
3.1k
The Invisible Side of Design
smashingmag
298
50k
4 Signs Your Business is Dying
shpigford
181
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
It's Worth the Effort
3n
183
28k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Cult of Friendly URLs
andyhume
78
6.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Why Our Code Smells
bkeepers
PRO
335
57k
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.