$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. W H AT ’ S N E W ?

    View Slide

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

    View 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 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 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 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 Slide

  8. Stable Beta Canary

    View Slide

  9. O N E TA K E A WAY

    View Slide

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

    View Slide

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

    View Slide

  12. View Slide

  13. 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 Slide

  14. N E W I D E A S

    View Slide

  15. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. {{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 Slide

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

    View Slide

  21. 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 Slide

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

    View Slide

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

    View Slide

  24. {{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 Slide

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

    setAvatar={{action "setAvatar"}}>

    Ember 2.0

    View Slide





  26. Ember 2.0

    View Slide

  27. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. 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 Slide

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

    View Slide

  35. View Slide

  36. 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 Slide

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

    View Slide

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

    View Slide

  39. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. T H A N K Y O U

    View Slide