Ember 2.0 - RFC Recap

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