Slide 1
Slide 1 text
Ember 2.0
Slide 2
Slide 2 text
Who the heck is this guy?
● DockYarder
● Ember Core Team
● General Open Source Addict
twitter: rwjblue
github: rwjblue
Slide 3
Slide 3 text
Thank You!!
Slide 4
Slide 4 text
Ember 2.0?
https://github.com/emberjs/rfcs/pull/15
Slide 5
Slide 5 text
What is planned?
● Template Updates
● Components
● Ember CLI
● Simplify Concepts
Slide 6
Slide 6 text
Template Updates
Slide 7
Slide 7 text
Templates
● Attribute Bindings
● Components
● Block Parameters
● Sane Context
● One-way Bindings
Slide 8
Slide 8 text
Templates: Attribute Bindings
Slide 11
Slide 11 text
Templates: Attribute Bindings
Tomorrow (interpolation):
![{{firstName}}'s picture]()
Slide 12
Slide 12 text
Templates: Attribute Bindings
Tomorrow (class syntax):
Slide 13
Slide 13 text
Templates: Components
Slide 14
Slide 14 text
Templates: Components
Today:
{{audio-player src=audioSource
started="playing"
stopped="paused" }}
Slide 15
Slide 15 text
Tomorrow:
Templates: Components
Slide 16
Slide 16 text
Templates: Block Parameters
Slide 17
Slide 17 text
Today:
-
{{#each todo in todos}}
- {{todo.title}} {{/each}}
Slide 18
Slide 18 text
Tomorrow:
-
{{#each todos as |todo|}}
- {{todo.title}} {{/each}}
Slide 19
Slide 19 text
Templates: Block Parameters
Tomorrow?
{{f.input model.name}}
{{f.input model.title}}
Slide 20
Slide 20 text
Templates: Sane Context
Slide 21
Slide 21 text
Today:
-
{{#each todos}}
- {{title}} {{/each}}
Slide 22
Slide 22 text
Tomorrow:
-
{{#each todos as |todo|}}
- {{todo.title}} {{/each}}
Slide 23
Slide 23 text
Templates: One-way Bindings
Slide 24
Slide 24 text
Templates: One-way Bindings
`bar` cannot be changed by `some-component`
Slide 25
Slide 25 text
Templates: One-way Bindings
`bar` can be changed by `some-component`
Slide 26
Slide 26 text
Templates: One-way Bindings
Slide 27
Slide 27 text
Templates: One-way Bindings
// app/components/some-component.js
export default Component.extend({
keypress: function() {
this.attrs.update(this.getCurrentValue());
}
});
Slide 28
Slide 28 text
Components
Slide 29
Slide 29 text
● Attributes
● Actions
● Routable Components
Components
Slide 30
Slide 30 text
Components: Attributes
Slide 31
Slide 31 text
Template:
Components: Attributes
Slide 32
Slide 32 text
Component:
XFooComponent.create({
attrs: {
name: "Robert",
city: "Boston"
}
});
Components: Attributes
Slide 33
Slide 33 text
Components: Attributes
actions: {
doSomething: function() {
this.set('attrs.name', 'Max');
}
}
Slide 34
Slide 34 text
Components: Attributes
Assertion: You can’t set `attrs.name`!
Slide 35
Slide 35 text
Template:
Components: Attributes
Slide 36
Slide 36 text
Components: Actions
Slide 37
Slide 37 text
Components: Actions
Template (today):
{{audio-player start="playing"
stop="paused"}}
Slide 38
Slide 38 text
Components: Actions
Component (today):
AudioPlayerComponent.extend({
play: function() {
this.sendAction('start');
}
});
Slide 39
Slide 39 text
Components: Actions
Template (tomorrow):
Slide 40
Slide 40 text
Components: Actions
Component (tomorrow):
AudioPlayerComponent.extend({
play: function() {
this.attrs.start();
}
});
Slide 41
Slide 41 text
Components: Routable
Slide 42
Slide 42 text
Components: Routable
// Ember.Route implementation
attrs: function() {
return {
model: this.model();
}
}
Slide 43
Slide 43 text
Components: Routable
// Ember.Route implementation
setupComponent: function(Component) {
return RSVP.hash(this.attrs())
.then(function(attrs) {
return Component.create(attrs);
});
}
Slide 44
Slide 44 text
Components: Routable
// Ember.Route implementation
setupComponent: function(Component) {
return RSVP.hash(this.attrs())
.then(function(attrs) {
return Component.create(attrs);
});
}
Slide 45
Slide 45 text
Ember CLI
Slide 46
Slide 46 text
Ember CLI
● Refactor API doc examples
● Refactor Guides
● Update emberjs.com
Slide 47
Slide 47 text
Simplify Concepts
Slide 48
Slide 48 text
The End