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

Ember 2.0 - RFC Recap

Ember 2.0 - RFC Recap

Robert Jackson

November 13, 2014
Tweet

More Decks by Robert Jackson

Other Decks in Programming

Transcript

  1. Who the heck is this guy?
    ● DockYarder
    ● Ember Core Team
    ● General Open Source Addict
    twitter: rwjblue
    github: rwjblue

    View full-size slide

  2. Ember 2.0?
    https://github.com/emberjs/rfcs/pull/15

    View full-size slide

  3. What is planned?
    ● Template Updates
    ● Components
    ● Ember CLI
    ● Simplify Concepts

    View full-size slide

  4. Template Updates

    View full-size slide

  5. Templates
    ● Attribute Bindings
    ● Components
    ● Block Parameters
    ● Sane Context
    ● One-way Bindings

    View full-size slide

  6. Templates: Attribute Bindings

    View full-size slide

  7. Templates: Attribute Bindings
    Today:
    Click here

    View full-size slide

  8. Templates: Attribute Bindings
    Tomorrow:
    Click here

    View full-size slide

  9. Templates: Attribute Bindings
    Tomorrow (interpolation):

    View full-size slide

  10. Templates: Attribute Bindings
    Tomorrow (class syntax):

    View full-size slide

  11. Templates: Components

    View full-size slide

  12. Templates: Components
    Today:
    {{audio-player src=audioSource
    started="playing"
    stopped="paused" }}

    View full-size slide

  13. Tomorrow:
    started={{action "playing"}}
    stopped={{action "paused"}} >
    Templates: Components

    View full-size slide

  14. Templates: Block Parameters

    View full-size slide

  15. Today:

    {{#each todo in todos}}
    {{todo.title}}
    {{/each}}

    Templates: Block Parameters

    View full-size slide

  16. Tomorrow:

    {{#each todos as |todo|}}
    {{todo.title}}
    {{/each}}

    Templates: Block Parameters

    View full-size slide

  17. Templates: Block Parameters
    Tomorrow?

    {{f.input model.name}}
    {{f.input model.title}}

    View full-size slide

  18. Templates: Sane Context

    View full-size slide

  19. Today:

    {{#each todos}}
    {{title}}
    {{/each}}

    Templates: Sane Context

    View full-size slide

  20. Tomorrow:

    {{#each todos as |todo|}}
    {{todo.title}}
    {{/each}}

    Templates: Sane Context

    View full-size slide

  21. Templates: One-way Bindings

    View full-size slide

  22. Templates: One-way Bindings


    `bar` cannot be changed by `some-component`

    View full-size slide

  23. Templates: One-way Bindings


    `bar` can be changed by `some-component`

    View full-size slide

  24. Templates: One-way Bindings
    update={{action "updateBar"}}>

    View full-size slide

  25. Templates: One-way Bindings
    // app/components/some-component.js
    export default Component.extend({
    keypress: function() {
    this.attrs.update(this.getCurrentValue());
    }
    });

    View full-size slide

  26. ● Attributes
    ● Actions
    ● Routable Components
    Components

    View full-size slide

  27. Components: Attributes

    View full-size slide

  28. Template:
    city={{model.city}} >

    Components: Attributes

    View full-size slide

  29. Component:
    XFooComponent.create({
    attrs: {
    name: "Robert",
    city: "Boston"
    }
    });
    Components: Attributes

    View full-size slide

  30. Components: Attributes
    actions: {
    doSomething: function() {
    this.set('attrs.name', 'Max');
    }
    }

    View full-size slide

  31. Components: Attributes
    Assertion: You can’t set `attrs.name`!

    View full-size slide

  32. Template:
    city={{model.city}} >

    Components: Attributes

    View full-size slide

  33. Components: Actions

    View full-size slide

  34. Components: Actions
    Template (today):
    {{audio-player start="playing"
    stop="paused"}}

    View full-size slide

  35. Components: Actions
    Component (today):
    AudioPlayerComponent.extend({
    play: function() {
    this.sendAction('start');
    }
    });

    View full-size slide

  36. Components: Actions
    Template (tomorrow):
    stop={{action "paused"}} >

    View full-size slide

  37. Components: Actions
    Component (tomorrow):
    AudioPlayerComponent.extend({
    play: function() {
    this.attrs.start();
    }
    });

    View full-size slide

  38. Components: Routable

    View full-size slide

  39. Components: Routable
    // Ember.Route implementation
    attrs: function() {
    return {
    model: this.model();
    }
    }

    View full-size slide

  40. Components: Routable
    // Ember.Route implementation
    setupComponent: function(Component) {
    return RSVP.hash(this.attrs())
    .then(function(attrs) {
    return Component.create(attrs);
    });
    }

    View full-size slide

  41. Components: Routable
    // Ember.Route implementation
    setupComponent: function(Component) {
    return RSVP.hash(this.attrs())
    .then(function(attrs) {
    return Component.create(attrs);
    });
    }

    View full-size slide

  42. Ember CLI
    ● Refactor API doc examples
    ● Refactor Guides
    ● Update emberjs.com

    View full-size slide

  43. Simplify Concepts

    View full-size slide