Ember 2.0 in Practice

Transcript

1. 1.

   I N P R A C T I C E

   E M B E R 2 . 0
2. 2.

   W H AT ’ S N E W ?

3. 3.

   The thinnest, lightest, most powerful Ember ever.

4. 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. 5.

   M A N Y F E AT U R E

   S AVA I L A B L E T O D AY
6. 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. 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. 8.

   Stable Beta Canary

9. 9.

   O N E TA K E A WAY

10. 10.

    – T O M D A L E “Use Ember

    CLI today.”
11. 11.

    • Many new features will require Ember CLI • Brings

    convention over configuration to the ecosystem
12. 12.

    None
13. 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. 14.

    N E W I D E A S

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

    D ATA D O W N , A C T

    I O N S U P
17. 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. 18.

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

19. 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. 20.

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

    them!
21. 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. 22.

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

    } } });
23. 23.

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

24. 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. 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. 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. 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. 28.

    • Components are isolated • Components are reusable • Components

    can be reasoned about
29. 29.

    {{view 'user-profile'}} Pop Quiz What properties does the user-profile view

    access?
30. 30.

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

31. 31.

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

32. 32.

    {{user-profile}} Literally none.

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

    var controller = Ember.ObjectController.create(); var wycats = store.find('user', 'wycats'); controller.set('model',

    wycats); controller.get('firstName'); // "Yehuda"
35. 35.

    None
36. 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. 37.

    export default Ember.ObjectController.extend({ fullName: function() { return this.get('firstName') + "

    " + this.get('lastName'); }.property('firstName', 'lastName') });
38. 38.

    export default Ember.Controller.extend({ fullName: function() { return this.get('model.firstName') + "

    " + this.get('model.lastName'); }.property('model.firstName', 'model.lastName') });
39. 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. 40.

    U S E E X P L I C I

    T W I T H / E A C H
41. 41.

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

42. 42.

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

    1.x
43. 43.

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

    2.0
44. 44.

    – T O M D A L E “Use Ember

    CLI today.”
45. 45.

    T H A N K Y O U