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
340
Testing: The Modern Way
rwjblue
0
33
Glimmer ✨ as a Gateway to Ember 🐹
rwjblue
0
52
Testing: The Future... Today?
rwjblue
0
47
Rails Developer's Intro to Ember
rwjblue
1
170
Testing - The Next Frontier
rwjblue
1
54
A tale of two pods
rwjblue
3
810
Ember CLI Addons
rwjblue
7
790
RAILS + EMBER.JS + EMBER-CLI = ❤
rwjblue
10
1.8k
Other Decks in Programming
See All in Programming
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
DMMオンラインサロンアプリのSwift化
hayatan
0
180
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
テストコード書いてみませんか?
onopon
2
340
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
為你自己學 Python
eddie
0
520
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
HTML/CSS超絶浅い説明
yuki0329
0
190
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Documentation Writing (for coders)
carmenintech
67
4.5k
Scaling GitHub
holman
459
140k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Faster Mobile Websites
deanohume
305
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Rails Girls Zürich Keynote
gr2m
94
13k
The World Runs on Bad Software
bkeepers
PRO
66
11k
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