The Magic of Ember's `get`

A look at the most used function of Ember.js.

Talk originally given at the Boston Ember.js Meetup on May 12th, 2016.

YouTube recording: http://www.youtube.com/watch?v=tgLHPSOmpWQ&t=19m10s

Transcript

1. ELADSHAHAR Boston Ember.js May 12th, 2016
2. ELADSHAHAR Boston Ember.js May 12th, 2016 What is the most commonly used Ember.js method?
3. ELADSHAHAR Boston Ember.js May 12th, 2016 average # of calls per app JS file extend computed Mobee Dashboard Mobee Mission Control
4. ELADSHAHAR Boston Ember.js May 12th, 2016 average # of calls per app JS file extend computed Mobee Dashboard 0.89 0.96 Mobee Mission Control 0.78 0.47
5. ELADSHAHAR Boston Ember.js May 12th, 2016 extend computed get Mobee Dashboard 0.89 0.96 3.96 Mobee Mission Control 0.78 0.47 2.66 average # of calls per app JS file
6. ELADSHAHAR Boston Ember.js May 12th, 2016 average # of calls per app JS file (roughly) grep -c '\Wget(' app/**/*.js | \ awk -F':' '{sum+=$2} END{print sum/NR}'
7. ELADSHAHAR Boston Ember.js May 12th, 2016
8. ELADSHAHAR Boston Ember.js May 12th, 2016 extend computed|property get Aptible Dashboard 0.94 0.33 Balanced Dashboard 1.05 0.81 Crates.io 0.81 0.40 Davros 0.68 0.79 Discourse 0.73 0.94 Ember Addons 0.86 0.57 Ember Observer 0.89 0.61 HN Reader 0.90 0.45 Hospital Run 0.78 0.90 Huboard 0.90 1.11 Hummingbird 0.89 0.36 Sharedrop 0.92 0.46 Travis 0.84 0.92 Uhura 0.82 0.15 Wordset 0.96 0.81
9. ELADSHAHAR Boston Ember.js May 12th, 2016 extend computed|property get Aptible Dashboard 0.94 0.33 Balanced Dashboard 1.05 0.81 Crates.io 0.81 0.40 Davros 0.68 0.79 Discourse 0.73 0.94 Ember Addons 0.86 0.57 Ember Observer 0.89 0.61 HN Reader 0.90 0.45 Hospital Run 0.78 0.90 Huboard 0.90 1.11 Hummingbird 0.89 0.36 Sharedrop 0.92 0.46 Travis 0.84 0.92 Uhura 0.82 0.15 Wordset 0.96 0.81
10. ELADSHAHAR Boston Ember.js May 12th, 2016 extend computed|property get Aptible Dashboard 0.94 0.33 2.52 Balanced Dashboard 1.05 0.81 2.95 Crates.io 0.81 0.40 1.29 Davros 0.68 0.79 2.00 Discourse 0.73 0.94 4.09 Ember Addons 0.86 0.57 1.43 Ember Observer 0.89 0.61 1.86 HN Reader 0.90 0.45 1.35 Hospital Run 0.78 0.90 4.87 Huboard 0.90 1.11 4.83 Hummingbird 0.89 0.36 2.48 Sharedrop 0.92 0.46 3.54 Travis 0.84 0.92 2.66 Uhura 0.82 0.15 1.32 Wordset 0.96 0.81 2.44
11. ELADSHAHAR Boston Ember.js May 12th, 2016 The Magic of Ember’s get
12. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get What is get? 12
13. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 13 let me = Ember.Object.create({ firstName: 'Elad'
 }); me.firstName; // -> "Elad" me.get('firstName'); // -> "Elad"
14. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Why do we use get? 14
15. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Uniform Access Principle 15
16. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Encapsulation 16
17. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 17 let me = { fullName: 'Elad Shahar' }; me.fullName; // -> "Elad Shahar"
18. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 18 let me = { firstName: 'Elad', lastName: 'Shahar', fullName: ? };
19. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 19 let me = { firstName: 'Elad', lastName: 'Shahar', fullName: function() { return `${this.firstName} ${this.lastName}`; } }; me.fullName(); // -> "Elad Shahar"
20. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 20 // computed me.fullName(); // static me.fullName;
21. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 21 const Person = Ember.Object.extend({ firstName: null, lastName: null, height: null // in inches });
22. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 22 let ironMan = Person.create({ firstName: 'Tony', lastName: 'Stark', height: 73 }); ironMan.height; // -> 73 ironMan.get('height'); // -> 73
23. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 23 const Person = Ember.Object.extend({ firstName: null, lastName: null, height: null // in inches });
24. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 24 const SuitedPerson = Person.extend({ suitHeight: 0, isWearingSuit: false, height: … });
25. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 25 height: Ember.computed( 'naturalHeight', 'suitHeight', 'isWearingSuit', function() { let height = this.get('naturalHeight'); if (this.get('isWearingSuit')) { height += this.get('suitHeight'); } return height;
 })
26. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 26 ironMan = SuitedPerson.create({ firstName: 'Tony', lastName: 'Stark', naturalHeight: 73, suitHeight: 5 }); ironMan.height; // -> ComputedProperty { … } ironMan.get('height'); // -> 73
27. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Two types of get 27
28. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get this.get(keyName) 28 Ember.get(obj, keyName) someObject.get(keyName)
29. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get http://emberjs.com/api/
30. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get get(keyName) { return Ember.get(this, keyName); } https://github.com/emberjs/ember.js/blob/v2.5.0/packages/ember-runtime/lib/mixins/observable.js#L100
31. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get get(keyName) { return Ember.get(this, keyName); } person.get('firstName') Ember.get(person, 'firstName')
32. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 32 let me = Ember.Object.create({ firstName: 'Elad' }); me.get('firstName'); // -> “Elad" 
 Ember.get(me, 'firstName'); // -> “Elad"
33. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 33 Uncaught TypeError: me.get is not a function let me = { firstName: 'Elad' }; me.get('firstName'); Ember.get(me, 'firstName') "Elad"
34. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Using get 34
35. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 35 let me = Ember.Object.create({ firstName: 'Elad' }); me.get('firstName'); // -> “Elad" 
 Ember.get(me, 'firstName'); // -> “Elad"
36. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 36 // the same as: // const get = Ember.get; const { get } = Ember; let me = Ember.Object.create({ firstName: 'Elad' }); 
 get(me, 'firstName'); // -> “Elad"
37. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 37 let me = { address: { city: 'Boston' } }; 
 get(me, 'address.city'); // -> “Boston"
38. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 38 let variable; variable; // -> undefined let obj = {}; obj.notAProperty; // -> undefined
39. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 39 let me = { }; me.middleName; // -> undefined 
 get(me, 'middleName'); // -> undefined
40. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 40 let me = { }; me.middleName.length; // -> Uncaught TypeError: // Cannot read property 'length' of undefined get(me, 'middleName.length'); // -> undefined
41. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 41 let me = { middleName: null }; me.middleName.length; // -> Uncaught TypeError: // Cannot read property 'length' of null 
 get(me, 'middleName.length'); // -> null
42. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 42 this.get('someService');
43. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 43 let height = this.get('height'); let width = this.get('width'); let height = get(this, 'height'); let width = get(this, 'width');
44. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 44 let props = this.getProperties('height', 'width'); let props = getProperties(this, 'height', 'width'); props; // -> { height: …, width: … }
45. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 45 let { height, width } = this.getProperties('height', 'width'); let { height, width } = getProperties(this, 'height', 'width');
46. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 46 let limit = userLimit || 100;
47. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 47 let limit; if (userLimit !== undefined) { limit = userLimit; } else { limit = 100; } let limit = (userLimit !== undefined ? userLimit : 100)
48. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 48 let me = Ember.Object.create({ firstName: 'Elad' }); me.getWithDefault('firstName', 'Guest') // -> "Elad" Ember.getWithDefault(me, 'firstName', 'Guest') // -> "Elad"
49. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 49 let guest = Ember.Object.create({ }); guest.getWithDefault('firstName', 'Guest') // -> "Guest" Ember.getWithDefault(guest, 'firstName', 'Guest') // -> "Guest"
50. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 50 function getWithDefault(root, key, defaultValue) { var value = get(root, key); if (value === undefined) { return defaultValue; } return value; } https://github.com/emberjs/ember.js/blob/v2.5.0/packages/ember-metal/lib/property_get.js#L109
51. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 51 getWithDefault(keyName, defaultValue) { return Ember.getWithDefault(this, keyName, defaultValue); } https://github.com/emberjs/ember.js/blob/v2.5.0/packages/ember-runtime/lib/mixins/observable.js#L415
52. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get unknownProperty 52
53. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 53 const PoliteObject = Ember.Object.extend({ unknownProperty(keyName) { return `I don't know what ${keyName} is`;
 } }); let robot = PoliteObject.create(); robot.get('love'); // -> "I don't know what love is"
54. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 54 this.get('someProperty') this.get('some.path.to.a.property')
55. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Future 55
56. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get ES5 Getter 56 “We would like to use [ES5 getters and setters] in Ember to eliminate the explicit calls to get. … Moving the Ember object model closer to the pure JavaScript object model is a major goal for Ember 2.x.” — Ember.js RFC 45 https://github.com/emberjs/rfcs/blob/master/text/0045-internet-explorer.md
57. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Computed Decorators 57 http://emberjs.com/blog/2015/08/13/ember-2-0-released.html#toc_ember-2-x-themes “As the Javascript decorator proposal stabilizes, and as transpilers improve their implementations, we plan to adapt computed properties and other APIs to that syntax” — Ember.js Blog
58. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Computed Decorators 58 @computed('firstName', 'lastName') fullName(firstName, lastName) { // use firstName and lastName } https://github.com/rwjblue/ember-computed-decorators
59. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get 59 http://www.getmobee.com/careers/
60. Boston Ember.js May 12th, 2016 ELADSHAHAR The Magic of Ember’s get Thank you 60 Elad @ Twitter GitHub, Slack SaladFork