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.

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