The way JavaScript is standardized and improved is changing this year. Learning how will help you understand why transpilers have become so popular, and why we will likely be using them for a long time. Ember itself will need to adapt to changes in JavaScript, and we will take a look at how the existing object model might be migrated to a pure EcmaScript solution.

1. Aligning Ember with
Web Standards
EmberConf 2015

2. @mixonic
Matthew Beale
201 Created

3. The JavaScript standardization
process is about to change
#1

4. STANDARDS PROCESS

5. WHATWG + W3C
TC39 + Ecma International

6. WHATWG + W3C
TC39 + Ecma International
DOM
HTML WebComponents XHR, Fetch
Promises for loops var, let, const classes

7. WHATWG W3C
TC39 Ecma International

8. WHATWG W3C
TC39 Ecma International
WORKING
GROUPS
STANDARDS
GROUPS

9. The plan at the time was to finish the specification this
year and publish a snapshot of "HTML5" in 2012.
However, shortly after that we realized that the
demand for new features in HTML remained high,
and so we would have to continue maintaining HTML
and adding features to it before we could call “HTML5"
complete, and as a result we moved to a new
development model, where the technology is not
versioned and instead we just have a living document
that defines the technology as it evolves.
Ian Hickson, 2011

10. “Living Standard”

11. ES3

12. ES4

13. ES5

14. ES6

15. ES6

16. ES2015

17. “ES2015” signifies a new
standardization process

18. github.com/
tc39/ecma262

19. 0. Strawman
1. Proposal
2. Draft
3. Candidate
4. Finished

20. 0. Strawman
1. Proposal -> Polyfills
2. Draft -> Experimental
3. Candidate -> Compliant
4. Finished -> Shipping

21. a “Living Web”

22. Aligning with standards
is not a one time event

23. Aligning with standards
is not free

24. Why standards?

25. Productivity

26. 1. are portable
2. reflect best practices
3. endure
Standards…

27. Participants win

28. Design
Polyfill, demo
Real world use
Learning

29. Design
Polyfill, demo
Real world use
Learning

30. 2. Transpilers are here
to stay

31. This is not the first time features
have been added to JavaScript

32. ES3 -> ES5

33. HTML5

34. “Polyfill”
- Remy Sharp

35. ES5 -> ES2015

36. var map = new Map();
map.set('key', 'value');
var value = map.get('key');

37. var map = new Map();
map.set('key', 'value');
var value = map.get('key');

38. 1 var delayed = new Promise(
2 function(resolve, reject){
3 setTimeout(resolve, 100);
4 }
5 );
6 delayed.then(function(){
7 console.log('HTMLBars');
8 });

39. 1 var delayed = new Promise(
2 function(resolve, reject){
3 setTimeout(resolve, 100);
4 }
5 );
6 delayed.then(function(){
7 console.log('HTMLBars');
8 });

40. 1 var loggingObject = new Proxy({}, {
2 get(target, propertyKey, receiver) {
3 console.log('GET '+propertyKey);
4 return target[propertyKey];
5 }
6 });
7
8 loggingObject.whatever; // Logs: GET whatever

41. 1 var loggingObject = new Proxy({}, {
2 get(target, propertyKey, receiver) {
3 console.log('GET '+propertyKey);
4 return target[propertyKey];
5 }
6 });
7
8 loggingObject.whatever; // Logs: GET whatever

42. 1 var runner = {
2 count: 0,
3 call: function() {
4 setTimeout(() => {
5 console.log(this.count++);
6 }, 100);
7 }
8 };
9
10 runner.call();

43. 1 var runner = {
2 count: 0,
3 call: function() {
4 setTimeout(() => {
5 console.log(this.count++);
6 }, 100);
7 }
8 };
9
10 runner.call();

45. “Babel will turn your ES6+
code into ES5 friendly code,
so you can start using it right
now without waiting for
browser support.”

46. 1 "use strict";
2
3 var runner = {
4 count: 0,
5 call: function call() {
6 var _this = this;
7
8 setTimeout(function () {
9 console.log(_this.count++);
10 }, 100);
11 }
12 };
13
14 runner.call();
1 var runner = {
2 count: 0,
3 call: function() {
4 setTimeout(() => {
5 console.log(this.count++);
6 }, 100);
7 }
8 };
9
10 runner.call();

47. 1. syntax (fat arrow, let)
2. APIs (Map, Set)
3. not everything
Enables new…

48. “Not born to die”
- James Kyle

49. kangax.github.io/compat-table/es6

50. ES2015 feature: Uint8Array

51. ES2015 feature: Uint8Array
IE10+

52. ES2015 feature: Spread Operator
var list = [1,2,3];
Math.max(...list);

53. ES2015 feature: Spread Operator
var list = [1,2,3];
Math.max(...list);
Firefox only

54. ES2015 feature: Block-level function scope
1 "use strict";
2 function a(){ return 1; }
3 {
4 function a(){ return 2; }
5 };
6
7 a() === 1;

55. ES2015 feature: Block-level function scope
Chrome only
1 "use strict";
2 function a(){ return 1; }
3 {
4 function a(){ return 2; }
5 };
6
7 a() === 1;

56. The target platforms of Babel
are inconsistent

57. Babel
Chrome
Firefox

58. The platforms your
application supports will drive
what features are transpiled.

59. Targeting platforms can be
done by tweaking the enabled
features list.

60. IMO a mapping to platforms
would be better.

61. What you transpile today,
you will blacklist in two years

62. Yes, you will be transpiling
in two years

63. Yes, you will be transpiling
in five years

64. Yes, you will be transpiling
in ?!!?!?! years

65. Transpilers are here to stay

66. 3. Aligning Ember’s object model

67. 1. stable
2. a good pattern
3. implemented correctly
4. implemented performantly
Is this feature:

68. ES Classes

69. 1. class
2. extend
3. super
Three new tools:

70. 1 class Car {
2 constructor(gearCount){
3 this.gearCount = gearCount;
4 }
5
6 toString() {
7 return `A car with: ${gearCount} gears`;
8 }
9 }
10
11 var car = new Car(3);
12 car.toString(); // A car with 3 gears

71. 1 class Vehicle {
2 constructor(gearCount){
3 this.gearCount = gearCount;
4 }
5 }
6 class Car extends Vehicle {
7 toString() {
8 return `A car with: ${this.gearCount} gears`;
9 }
10 }
11
12 var car = new Car(3);
13 car.toString(); // A car with 3 gears

72. 1 class Vehicle {
2 constructor(gearCount){
3 this.gearCount = gearCount;
4 }
5 toString() {
6 return `${this.gearCount} gears`;
7 }
8 }
9 class Car extends Vehicle {
10 toString() {
11 return `A car with: ${super.toString()}`;
12 }
13 }

73. 1 class Vehicle {
2 constructor(gearCount){
3 this.gearCount = gearCount;
4 }
5 toString() {
6 return `${this.gearCount} gears`;
7 }
8 }
9 class Car extends Vehicle {
10 constructor(...args) {
11 console.log(`Created with ${args[0]}`);
12 super(args);
13 }
14 toString() {
15 return `A car with: ${super.toString()}`;
16 }
17 }

74. 1. new syntax
2. super semantics change
3. mixins
gotachas:

75. 4. setUnknownProperty
5. merged/concat properties
6. transpiler ouput?!
more gotachas:

76. 7. only halfway there

77. 7. only halfway there
ES Decorators

78. 1 class Car {
2 +attr('gearsCount')
3 +attr('wheelsCount')
4
5 constructor(gearsCount) {
6 this.gearsCount = gearsCount;
7 }
8
9 -dependsOn('gearsCount')
10 get isModern() {
11 return this.gearsCount > 3;
12 }
13 }
14
15 var car = new Car(3);
16 car.isModern; // false

79. Aligning

80. 1. provide legacy wrapper
2. use syntax as a carrot
3. private use can start sooner
strategy:

81. 1 import EmberObject from "ember/object";
2 import computed from "ember/computed";
3
4 class Car extends EmberObject.extend({
5
6 init(gearsCount) {
7 this._super(...arguments);
8 this.set('gearsCount', gearsCount);
9 },
10
11 isModern: computed('gearsCount', function(){
12 return this.get('gearsCount') > 3;
13 })
14 });
15
16 export default Car;

82. 1 import EmberObject from "ember/object";
2
3 class Car extends EmberObject {
4
5 constructor(gearsCount) {
6 super(...arguments);
7 this.gearsCount = gearsCount;
8 }
9
10 get isModern() {
11 return this.gearsCount > 3;
12 }
13 }
14
15 export default Car;

83. 1 import Component from "ember/component";
2
3 class Car extends Component {
4
5 get isModern() {
6 return this.attrs.gearsCount > 3;
7 }
8 }
9
10 export default Car;

84. This is a story of Ember 2.0 -> 3.0

85. Reminder: Standards are
a two-way street

86. ONE MORE THING

88. 201-created.com/
ember-community-survey-2015
@ClimbingNarc

89. 201-created.com/ember-community-survey-2015

90. 201-created.com/ember-community-survey-2015

91. Thank you,
you wonderful people.
@mixonic