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 2.0 - RFC Recap
Search
Robert Jackson
November 13, 2014
Programming
6
660
Ember 2.0 - RFC Recap
Video:
http://youtu.be/69wMY3CaklY?t=1h8m49s
Robert Jackson
November 13, 2014
Tweet
Share
More Decks by Robert Jackson
See All by Robert Jackson
😂 of TypeScript
rwjblue
0
340
Testing: The Modern Way
rwjblue
0
38
Glimmer ✨ as a Gateway to Ember 🐹
rwjblue
0
56
Testing: The Future... Today?
rwjblue
0
54
Rails Developer's Intro to Ember
rwjblue
1
180
Testing - The Next Frontier
rwjblue
1
63
A tale of two pods
rwjblue
3
830
Ember CLI Addons
rwjblue
7
800
RAILS + EMBER.JS + EMBER-CLI = ❤
rwjblue
10
1.8k
Other Decks in Programming
See All in Programming
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
複数アプリケーションを育てていくための共通化戦略
irof
3
750
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
340
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
イベントストーミングから始めるドメイン駆動設計
jgeem
3
420
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
46
14k
The Cult of Friendly URLs
andyhume
78
6.4k
Side Projects
sachag
454
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Documentation Writing (for coders)
carmenintech
71
4.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
How to Ace a Technical Interview
jacobian
276
23k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Transcript
Ember 2.0
Who the heck is this guy? • DockYarder • Ember
Core Team • General Open Source Addict twitter: rwjblue github: rwjblue
Thank You!!
Ember 2.0? https://github.com/emberjs/rfcs/pull/15
What is planned? • Template Updates • Components • Ember
CLI • Simplify Concepts
Template Updates
Templates • Attribute Bindings • Components • Block Parameters •
Sane Context • One-way Bindings
Templates: Attribute Bindings
Templates: Attribute Bindings Today: <a {{bind-attr href=url}}>Click here</a>
Templates: Attribute Bindings Tomorrow: <a href={{url}}>Click here</a>
Templates: Attribute Bindings Tomorrow (interpolation): <img alt="{{firstName}}'s picture"></img>
Templates: Attribute Bindings Tomorrow (class syntax): <div class="{{if prop "is-truthy"
"is-falsey"}}">
Templates: Components
Templates: Components Today: {{audio-player src=audioSource started="playing" stopped="paused" }}
Tomorrow: <audio-player src={{audioSource}} started={{action "playing"}} stopped={{action "paused"}} > Templates: Components
Templates: Block Parameters
Today: <ul> {{#each todo in todos}} <li>{{todo.title}}</li> {{/each}} </ul> Templates:
Block Parameters
Tomorrow: <ul> {{#each todos as |todo|}} <li>{{todo.title}}</li> {{/each}} </ul> Templates:
Block Parameters
Templates: Block Parameters Tomorrow? <form-for model as |f|> {{f.input model.name}}
{{f.input model.title}} </form-for>
Templates: Sane Context
Today: <ul> {{#each todos}} <li>{{title}}</li> {{/each}} </ul> Templates: Sane Context
Tomorrow: <ul> {{#each todos as |todo|}} <li>{{todo.title}}</li> {{/each}} </ul> Templates:
Sane Context
Templates: One-way Bindings
Templates: One-way Bindings <some-component foo={{bar}}> </some-component> `bar` cannot be changed
by `some-component`
Templates: One-way Bindings <some-component foo={{mut bar}}> </some-component> `bar` can be
changed by `some-component`
Templates: One-way Bindings <some-component foo={{bar}} update={{action "updateBar"}}> </some-component>
Templates: One-way Bindings // app/components/some-component.js export default Component.extend({ keypress: function()
{ this.attrs.update(this.getCurrentValue()); } });
Components
• Attributes • Actions • Routable Components Components
Components: Attributes
Template: <x-foo name={{model.name}} city={{model.city}} > </x-foo> Components: Attributes
Component: XFooComponent.create({ attrs: { name: "Robert", city: "Boston" } });
Components: Attributes
Components: Attributes actions: { doSomething: function() { this.set('attrs.name', 'Max'); }
}
Components: Attributes Assertion: You can’t set `attrs.name`!
Template: <x-foo name={{mut model.name}} city={{model.city}} > </x-foo> Components: Attributes
Components: Actions
Components: Actions Template (today): {{audio-player start="playing" stop="paused"}}
Components: Actions Component (today): AudioPlayerComponent.extend({ play: function() { this.sendAction('start'); }
});
Components: Actions Template (tomorrow): <audio-player start={{action "playing"}} stop={{action "paused"}} >
Components: Actions Component (tomorrow): AudioPlayerComponent.extend({ play: function() { this.attrs.start(); }
});
Components: Routable
Components: Routable // Ember.Route implementation attrs: function() { return {
model: this.model(); } }
Components: Routable // Ember.Route implementation setupComponent: function(Component) { return RSVP.hash(this.attrs())
.then(function(attrs) { return Component.create(attrs); }); }
Components: Routable // Ember.Route implementation setupComponent: function(Component) { return RSVP.hash(this.attrs())
.then(function(attrs) { return Component.create(attrs); }); }
Ember CLI
Ember CLI • Refactor API doc examples • Refactor Guides
• Update emberjs.com
Simplify Concepts
The End