Download as PDF, PPTX
![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](https://image.slidesharecdn.com/aligningemberwithwebstandards-150306121502-conversion-gate01/75/Aligning-Ember-js-with-Web-Standards-40-2048.jpg)
![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](https://image.slidesharecdn.com/aligningemberwithwebstandards-150306121502-conversion-gate01/75/Aligning-Ember-js-with-Web-Standards-41-2048.jpg)
![ES2015 feature: Spread Operator var list = [1,2,3]; Math.max(...list);](https://image.slidesharecdn.com/aligningemberwithwebstandards-150306121502-conversion-gate01/75/Aligning-Ember-js-with-Web-Standards-52-2048.jpg)
![ES2015 feature: Spread Operator var list = [1,2,3]; Math.max(...list); Firefox only](https://image.slidesharecdn.com/aligningemberwithwebstandards-150306121502-conversion-gate01/75/Aligning-Ember-js-with-Web-Standards-53-2048.jpg)
![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 }](https://image.slidesharecdn.com/aligningemberwithwebstandards-150306121502-conversion-gate01/75/Aligning-Ember-js-with-Web-Standards-73-2048.jpg)
Uploaded byMatthew Beale
Aligning Ember.js with Web Standards
The document discusses the evolution of web standards and the JavaScript standardization process, highlighting the transition to a 'living standard' model for HTML and ECMAScript. It emphasizes the ongoing need for alignment with standards, the rise of transpilers, and the introduction of new features in JavaScript, particularly with ES2015. Additionally, it explores how these changes impact Ember's object model, advocating for leveraging new syntax and features while maintaining compatibility with legacy systems.
Aligning Ember.js with Web Standards
- 1. Aligning Ember with WebStandards EmberConf 2015
- 2.
- 3. The JavaScript standardization processis about to change #1
- 4.
- 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 EcmaInternational
- 8. WHATWG W3C TC39 EcmaInternational WORKING GROUPS STANDARDS GROUPS
- 9. The plan atthe 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.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. “ES2015” signifies anew standardization process
- 18.
- 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.
- 22. Aligning with standards isnot a one time event
- 23. Aligning with standards isnot free
- 24.
- 25.
- 26. 1. are portable 2.reflect best practices 3. endure Standards…
- 27.
- 28. Design Polyfill, demo Real worlduse Learning
- 29. Design Polyfill, demo Real worlduse Learning
- 30. 2. Transpilers arehere to stay
- 31. This is notthe first time features have been added to JavaScript
- 32.
- 33.
- 34.
- 35.
- 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 turnyour ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.”
- 46. 1 "use strict"; 2 3var 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 (fatarrow, let) 2. APIs (Map, Set) 3. not everything Enables new…
- 48. “Not born todie” - James Kyle
- 49.
- 50.
- 51.
- 52. ES2015 feature: SpreadOperator var list = [1,2,3]; Math.max(...list);
- 53. ES2015 feature: SpreadOperator var list = [1,2,3]; Math.max(...list); Firefox only
- 54. ES2015 feature: Block-levelfunction scope 1 "use strict"; 2 function a(){ return 1; } 3 { 4 function a(){ return 2; } 5 }; 6 7 a() === 1;
- 55. ES2015 feature: Block-levelfunction 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 platformsof Babel are inconsistent
- 57.
- 58. The platforms your applicationsupports will drive what features are transpiled.
- 59. Targeting platforms canbe done by tweaking the enabled features list.
- 60. IMO a mappingto platforms would be better.
- 61. What you transpiletoday, you will blacklist in two years
- 62. Yes, you willbe transpiling in two years
- 63. Yes, you willbe transpiling in five years
- 64. Yes, you willbe transpiling in ?!!?!?! years
- 65. Transpilers are hereto stay
- 66. 3. Aligning Ember’sobject model
- 67. 1. stable 2. agood pattern 3. implemented correctly 4. implemented performantly Is this feature:
- 68.
- 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/concatproperties 6. transpiler ouput?! more gotachas:
- 76. 7. only halfwaythere
- 77. 7. only halfwaythere 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.
- 80. 1. provide legacywrapper 2. use syntax as a carrot 3. private use can start sooner strategy:
- 81. 1 import EmberObjectfrom "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 EmberObjectfrom "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 Componentfrom "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 astory of Ember 2.0 -> 3.0
- 85. Reminder: Standards are atwo-way street
- 86.
- 88.
- 89.
- 90.
- 91. Thank you, you wonderfulpeople. @mixonic