Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember 2.0 - RFC Recap

Ember 2.0 - RFC Recap

0dfd10ad198ae5a87640da046a77a90a?s=128

Robert Jackson

November 13, 2014
Tweet

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