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
Complex Component Design in Ember
Search
Balint Erdi
October 10, 2015
Technology
0
350
Complex Component Design in Ember
The (online) talk I gave at the Global Ember Meetup.
Balint Erdi
October 10, 2015
Tweet
Share
More Decks by Balint Erdi
See All by Balint Erdi
Data Loading Patterns with JSON API
balint
5
1.2k
Why you should consider Ember.js for your next project
balint
4
240
Data Loading Patterns in Ember
balint
1
180
Auth* in Ember apps with Torii
balint
1
280
(Somewhat) Complex Component Design – Ember.BP, 2015/02/11
balint
1
85
Don't call me back - How Ember uses promises and how you can, too
balint
5
10k
Acceptance testing in Ember.js
balint
1
510
Unit testing in Ember.js
balint
0
64
Introduction to ember-data
balint
0
150
Other Decks in Technology
See All in Technology
Road to Single Activity
yurihondo
2
240
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
190
GC24 Recap: Interface Internals
task4233
0
280
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
440
コンポーネントテストの手法と その効果を考える
yotahada3
3
310
フルカイテン株式会社 採用資料
fullkaiten
0
32k
Mocking in Rust Applications
taiki45
2
420
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
200
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
150
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
150
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
3.9k
Making Projects Easy
brettharned
113
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Scaling GitHub
holman
458
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Clear Off the Table
cherdarchuk
91
320k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Transcript
Complex component design Global Ember Meetup 10/10/2015
or Component design is complex
Components are important
Components are even more important in Ember 2
“I thought of objects being like biological cells and/or individual
computers on a network, only able to communicate with messages”
“I thought of objects being like biological cells and/or individual
computers on a network, only able to communicate with messages” Alan Kay
Messages between objects, and how they are sent is more
important than the structure of objects.
Messages between objects, and how they are sent is more
important than the structure of objects. BDDers (mockists, London School TDD)
“Components are the objects of the UI”
“Components are the objects of the UI” Me
Communication between components is key.
Balint Erdi @baaz balinterdi http://balinterdi.com
http://rockandrollwithemberjs.com
Components are hard
(hard as opposed to easy)
We’re figuring this out
We’re figuring this out (I certainly am)
Lot more tools at our disposal (esp. from 1.13+)
Data Down, Actions Up • Pass data down to children
• Children fire actions towards their parent • Uni-directional flow
Controller ~ Routable component auto-complete auto-complete-list auto-complete-option auto-complete-option auto-complete-option
Controller ~ Routable component auto-complete auto-complete-list auto-complete-option auto-complete-option auto-complete-option
Controller ~ Routable component auto-complete auto-complete-list auto-complete-option auto-complete-option auto-complete-option
Enough thought- leadering already
Component design ideas (in Ember) • Break bigger components up
to small pieces • Minimize assumptions about passed-in data • Leverage block params & closure actions • Use block parameters as a public API.
References • “Simple Made Easy” talk by Rich Hickey •
Star-rating component • Autocomplete component • “The x-foo in you” talk by Ryan Florence
Thank you!