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
Ember ATX: Components
Search
timgthomas
May 29, 2015
Programming
0
82
Ember ATX: Components
An introduction to Ember's Components
timgthomas
May 29, 2015
Tweet
Share
More Decks by timgthomas
See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
190
Icons and the Web: Symbols of the Modern Age
timgthomas
0
150
Constructing Modern UIs with SVG
timgthomas
0
170
Browser Invasion: Desktop Apps and the Web
timgthomas
0
140
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
110
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
140
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
120
Ember ATX: Ember.Evented
timgthomas
0
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
360
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
150
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
890
What's new in AppKit on macOS 26
1024jp
0
130
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
830
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
96
33k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
940
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
Porting a visionOS App to Android XR
akkeylab
0
640
PipeCDのプラグイン化で目指すところ
warashi
1
290
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Writing Fast Ruby
sferik
628
62k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Practical Orchestrator
shlominoach
189
11k
The Language of Interfaces
destraynor
158
25k
Become a Pro
speakerdeck
PRO
29
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
116
6.3k
Automating Front-end Workflow
addyosmani
1370
200k
Agile that works and the tools we love
rasmusluckow
329
21k
Embracing the Ebb and Flow
colly
86
4.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
Components
Tim G. Thomas @timgthomas timgthomas.com
Components
{{ember-atx}}
Controller + View (+ Template) Route-less
Why?
Using Components
{{ember-atx}}
/* ember-atx.hbs */ <h1>‚</h1> /* elsewhere... */ {{ember-atx}}
/* ember-atx.hbs */ <h1>‚</h1> /* In 1.13... */ <ember-atx>
export default Ember.Component.extend({ });
export default Ember.Component.extend({ didInsertElement() { // I'm a view! }
});
export default Ember.Component.extend({ didInsertElement() { this.$().fadeOut(); } });
export default Ember.Component.extend({ itemCount: function() { // No, wait...I'm a
Controller! }.property() });
export default Ember.Component.extend({ itemCount: function() { return this.get('items'); }.property('items') });
{{ember-atx items=model}}
export default Ember.Component.extend({ items: function() { return Ember.$ .getJSON('/dont/tell/anyone'); }.property()
});
<ember-atx foo={{action 'attend'}}> foo: 'bar', actions: { somethingHappened() { this.attrs.foo.call({});
} }
<ember-atx attend={{action 'attend'}}>
<p>{{yield}}</p> {{#ember-atx}} I'm a lumberjack and I'm okay... {{/ember-atx}}
{{component 'component-name'}}
guides.emberjs.com ember-components.com timgthomas.com Don't go here!
Thanks! @timgthomas