Ember 2.0 - RFC Recap

Video: http://youtu.be/69wMY3CaklY?t=1h8m49s

Transcript

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