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

Ember 2.0 in Practice

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=47 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.



December 02, 2014

More Decks by tomdale

Other Decks in Programming


  1. I N P R A C T I C E

    E M B E R 2 . 0
  2. W H AT ’ S N E W ?

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

  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
  5. M A N Y F E AT U R E

    S AVA I L A B L E T O D AY
  6. S TA B I L I T Y W I

    T H O U T S TA G N AT I O N
  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.
  8. Stable Beta Canary

  9. O N E TA K E A WAY

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

    CLI today.”
  11. • Many new features will require Ember CLI • Brings

    convention over configuration to the ecosystem
  12. None
  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)
  14. N E W I D E A S

  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
  16. D ATA D O W N , A C T

    I O N S U P
  17. I T ’ S A Q U E S T

    I O N O F M U TA B I L I T Y
  18. {{user-profile avatar=user.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}}

  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?
  20. {{user-profile avatar=model.avatarUrl}} {{user-avatar src=avatar}} {{user-avatar-editor src=avatar}} {{user-admin-panel avatarUrl=avatar}} All of

  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
  22. export default Ember.Component.extend({ actions: { setAvatar: function(value) { this.set('model.avatarUrl', value);

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

  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
  25. <user-profile avatar={{user.avatarUrl}} setAvatar={{action "setAvatar"}}> <user-avatar src={{avatar}}> <user-avatar-editor src={{avatar}} setAvatar={{action "setAvatar"}}>

    <user-admin-panel avatarUrl={{avatar}}> Ember 2.0
  26. <user-profile avatar={{mut user.avatarUrl}}> <user-avatar src={{avatar}}> <user-avatar-editor src={{mut avatar}}> <user-admin-panel avatarUrl={{avatar}}>

    Ember 2.0
  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
  28. • Components are isolated • Components are reusable • Components

    can be reasoned about
  29. {{view 'user-profile'}} Pop Quiz What properties does the user-profile view

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

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

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

  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
  34. var controller = Ember.ObjectController.create(); var wycats = store.find('user', 'wycats'); controller.set('model',

    wycats); controller.get('firstName'); // "Yehuda"
  35. None
  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
  37. export default Ember.ObjectController.extend({ fullName: function() { return this.get('firstName') + "

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

    " + this.get('model.lastName'); }.property('model.firstName', 'model.lastName') });
  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') });
  40. U S E E X P L I C I

    T W I T H / E A C H
  41. Hello, {{user.firstName}}! {{#with user}} Hello, {{firstName}}. {{/with}}

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

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

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

    CLI today.”
  45. T H A N K Y O U