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
650
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
330
Testing: The Modern Way
rwjblue
0
30
Glimmer ✨ as a Gateway to Ember 🐹
rwjblue
0
49
Testing: The Future... Today?
rwjblue
0
41
Rails Developer's Intro to Ember
rwjblue
1
160
Testing - The Next Frontier
rwjblue
1
50
A tale of two pods
rwjblue
3
800
Ember CLI Addons
rwjblue
7
780
RAILS + EMBER.JS + EMBER-CLI = ❤
rwjblue
10
1.8k
Other Decks in Programming
See All in Programming
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
260
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
820
What is Parser
yui_knk
9
4.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
670
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Prolog入門
qnighy
4
1k
2024 컴포즈 정원사
jisungbin
0
150
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
810
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
390
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
4
930
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
How GitHub (no longer) Works
holman
310
140k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
A better future with KSS
kneath
235
17k
Web development in the modern age
philhawksworth
205
10k
It's Worth the Effort
3n
182
27k
Practical Orchestrator
shlominoach
185
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Building Your Own Lightsaber
phodgson
101
6k
4 Signs Your Business is Dying
shpigford
179
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
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