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
200
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
150
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
120
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
370
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
120
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
130
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.8k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
340
Vibe coding コードレビュー
kinopeee
0
390
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
410
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.2k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
リッチエディターを安全に開発・運用するために
unachang113
1
340
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Embracing the Ebb and Flow
colly
86
4.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Navigating Team Friction
lara
188
15k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GitHub's CSS Performance
jonrohan
1031
460k
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