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

Ember 2.0 in Practice

tomdale
December 02, 2014

Ember 2.0 in Practice

A brief tour of some of the new ideas in Ember 2.0, and how you can start adopting them today.

tomdale

December 02, 2014
Tweet

More Decks by tomdale

Other Decks in Programming

Transcript

  1. I N P R A C T I C E
    E M B E R 2 . 0

    View full-size slide

  2. W H AT ’ S N E W ?

    View full-size slide

  3. The thinnest, lightest,
    most powerful Ember ever.

    View full-size slide

  4. S I M P L I F I E D
    R E F I N E D
    M O R E P O W E R F U L

    View full-size slide

  5. M A N Y F E AT U R E S
    AVA I L A B L E T O D AY

    View full-size slide

  6. S TA B I L I T Y
    W I T H O U T S TA G N AT I O N

    View full-size slide

  7. 1.8 2.0
    1.9 1.10 1.11 1.12 …
    All new features developed on master. No big-bang rewrite.
    Perhaps counterintuitively, 2.0 doesn't add new features;
    it simply removes long-deprecated ones.

    View full-size slide

  8. Stable Beta Canary

    View full-size slide

  9. O N E TA K E A WAY

    View full-size slide

  10. – T O M D A L E
    “Use Ember CLI today.”

    View full-size slide

  11. • Many new features will require Ember CLI
    • Brings convention over configuration to the ecosystem

    View full-size slide

  12. N O T J U S T J AVA S C R I P T
    • Enhance builds (ESNext, linters, CSS preprocessors)
    • Add deployment targets (Parse, Firebase, Divshot)
    • CSS (Bootstrap, Foundation, Pure)

    View full-size slide

  13. N E W I D E A S

    View full-size slide

  14. S TA R T A D O P T I N G T O D AY
    N O T O N LY W I L L Y O U R A P P B E F U T U R E - P R O O F,
    I T W I L L B E B E T T E R A R C H I T E C T E D

    View full-size slide

  15. D ATA D O W N ,
    A C T I O N S U P

    View full-size slide

  16. I T ’ S A Q U E S T I O N O F
    M U TA B I L I T Y

    View full-size slide

  17. {{user-profile avatar=user.avatarUrl}}
    {{user-avatar src=avatar}}
    {{user-avatar-editor src=avatar}}
    {{user-admin-panel avatarUrl=avatar}}

    View full-size slide

  18. {{user-profile avatar=user.avatarUrl}}
    {{user-avatar src=avatar}}
    {{user-avatar-editor src=avatar}}
    {{user-admin-panel avatarUrl=avatar}}
    Pop Quiz
    Which of these subcomponents can modify user.avatarUrl?

    View full-size slide

  19. {{user-profile avatar=model.avatarUrl}}
    {{user-avatar src=avatar}}
    {{user-avatar-editor src=avatar}}
    {{user-admin-panel avatarUrl=avatar}}
    All of them!

    View full-size slide

  20. I N S T E A D O F R E LY I N G O N 2 - WAY
    D ATA B I N D I N G , E M I T A C T I O N S

    View full-size slide

  21. export default Ember.Component.extend({
    actions: {
    setAvatar: function(value) {
    this.set('model.avatarUrl', value);
    }
    }
    });

    View full-size slide

  22. {{user-profile
    avatar=user.avatarUrl
    setAvatar="setAvatar"}}

    View full-size slide

  23. {{user-profile avatar=user.avatarUrl
    setAvatar="setAvatar"}}
    {{user-avatar src=avatar}}
    {{user-avatar-editor src=avatar
    setAvatar="setAvatar"}}
    {{user-admin-panel avatarUrl=avatar}}
    Ember 1.x

    View full-size slide

  24. setAvatar={{action "setAvatar"}}>

    setAvatar={{action "setAvatar"}}>

    Ember 2.0

    View full-size slide

  25. T H E R E I S N O V I E W.
    T H E R E I S O N LY C O M P O N E N T

    View full-size slide

  26. • Components are isolated
    • Components are reusable
    • Components can be reasoned about

    View full-size slide

  27. {{view 'user-profile'}}
    Pop Quiz
    What properties does the user-profile view access?

    View full-size slide

  28. {{view 'user-profile'}}
    Literally anything!

    View full-size slide

  29. {{user-profile}}
    Pop Quiz
    What properties does the user-profile component access?

    View full-size slide

  30. {{user-profile}}
    Literally none.

    View full-size slide

  31. N O M O R E
    O B J E C T C O N T R O L L E R O R
    A R R AY C O N T R O L L E R

    View full-size slide

  32. var controller = Ember.ObjectController.create();
    var wycats = store.find('user', 'wycats');
    controller.set('model', wycats);
    controller.get('firstName'); // "Yehuda"

    View full-size slide

  33. P R O X Y I N G C O N F U S E S T H E H E L L
    O U T O F P E O P L E

    View full-size slide

  34. export default Ember.ObjectController.extend({
    fullName: function() {
    return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName')
    });

    View full-size slide

  35. export default Ember.Controller.extend({
    fullName: function() {
    return this.get('model.firstName') + " " + this.get('model.lastName');
    }.property('model.firstName', 'model.lastName')
    });

    View full-size slide

  36. export default Ember.Controller.extend({
    firstName: alias('model.firstName'),
    lastName: alias('model.lastName'),
    fullName: function() {
    return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName')
    });

    View full-size slide

  37. U S E E X P L I C I T W I T H / E A C H

    View full-size slide

  38. Hello, {{user.firstName}}!
    {{#with user}}
    Hello, {{firstName}}.
    {{/with}}

    View full-size slide

  39. Hello, {{user.firstName}}!
    {{#with user as u}}
    Hello, {{u.firstName}}.
    {{/with}}
    Ember 1.x

    View full-size slide

  40. Hello, {{user.firstName}}!
    {{#with user as |u|}}
    Hello, {{u.firstName}}.
    {{/with}}
    Ember 2.0

    View full-size slide

  41. – T O M D A L E
    “Use Ember CLI today.”

    View full-size slide

  42. T H A N K Y O U

    View full-size slide