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
640
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
28
Glimmer ✨ as a Gateway to Ember 🐹
rwjblue
0
47
Testing: The Future... Today?
rwjblue
0
37
Rails Developer's Intro to Ember
rwjblue
1
160
Testing - The Next Frontier
rwjblue
1
48
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
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
CSC307 Lecture 07
javiergs
PRO
0
220
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Activities at Cairo Library
cairolibrary720
0
1.2k
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Rust.Nagoya #1
codemountains
0
170
CSC307 Lecture 11
javiergs
PRO
0
240
Namespace on read
tagomoris
2
370
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
93
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Teambox: Starting and Learning
jrom
130
8.6k
Side Projects
sachag
451
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
GraphQLとの向き合い方2022年版
quramy
36
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Design by the Numbers
sachag
277
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Building Adaptive Systems
keathley
34
2k
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