The ECMAScript formerly known as 6

Transcript

1. babeljs.io/repl
2. The ECMAScript formerly known as 6
3. KerrickLong Kerrick KerrickLong.com
4. JS
5. JS
6. DOM ECMAScript +
7. DOM
8. context.drawImage(new Image(), 0, 0) event.dataTransfer.setData(mime, data) new Worker('thread.js').postMessage(str) navigator.getUserMedia({audio: true}) DOM
9. DOM ECMAScript +
10. ECMAScript
11. ECMAScript for (var i; i < 10; i++) { break; } (function(x) { return x + 1; })(100) var bareObject = Object.create(null) [1, 2, 3, 4].map(double).reduce(add)
12. ECMAScript 6
13. ECMAScript 2015
14. JavaScript is growing up.
15. Dwindling use of App Frameworks that compile to JS
16. Dwindling use of App Frameworks that compile to JS
17. Dwindling use of Other Languages that compile to JS
18. Dwindling use of Other Languages that compile to JS
19. What’s new?
20. Modules
21. // app/routes/example.js
 import Ember from 'ember';
 
 export default Ember.Route.extend(); Modules
22. // app/utils/func.js
 export var flatten = _.flatten.bind(_);
 export var union = _.union.bind(_); Modules
23. // app/utils/func.js
 export var flatten = _.flatten.bind(_);
 export var union = _.union.bind(_);
 
 export default {
 flatten: flatten,
 union: union
 }; Modules
24. Modules import Ember from 'ember';
 import { flatten, union } from 'app/utils/func';
 
 export default Ember.Route.extend({
 model: function() {
 return flatten(union([1, 2, 3]));
 }
 });
25. Arrow Functions
26. Arrow Functions var _this = this;
 return this.store.find('pages').then(function(pages) {
 return pages.map(function(pages, i) {
 return _this.modelFor('posts').objectAt(i)
 });
 });
27. Arrow Functions var _this = this;
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i) => {
 return _this.modelFor('posts').objectAt(i)
 });
 });
28. Arrow Functions 
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i) => {
 return this.modelFor('posts').objectAt(i)
 });
 });
29. Arrow Functions 
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i) => this.modelFor('posts').objectAt(i));
 });
30. Enhanced Object Literals
31. var foo = 'bar';
 var obj = {
 foo: foo,
 model: function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
32. var foo = 'bar';
 var obj = {
 foo,
 model: function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
33. var foo = 'bar';
 var obj = {
 foo,
 model(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
34. var foo = 'bar';
 var obj = {
 foo,
 model(params) {
 return params;
 }, ['id_' + Math.random()]: 'secret'
 }; Enhanced Object Literals
35. Destructuring
36. import Ember from 'ember';
 
 var Route = Ember.Route;
 var filename = ‘photo.jpg’.split(‘.')[0]; var ext = ‘photo.jpg’.split('.')[1]; 
 export default Route.extend(); Destructuring
37. import Ember from 'ember';
 
 var { Route: Route } = Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
38. import Ember from 'ember';
 
 var { Route } = Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
39. Template Strings
40. confirm('Really delete ' + promotion.name + '?'); Template Strings
41. confirm(`Really delete ${promotion.name}?`); Template Strings
42. const code = '<script src="' + src + '">\n' +
 '</script>\n' +
 '<noscript>\n' +
 '<a href="' + link + '">View</a>\n' +
 '</noscript>'; Template Strings
43. const code = `<script src="${src}">
 </script>
 <noscript>
 <a href="${link}">View</a>
 </noscript>`; Template Strings
44. const and let
45. function example(isGood) {
 if (isGood) {
 var x = 4;
 console.log(x); // 4
 }
 console.log(x); // 4
 } const and let
46. function example(isGood) {
 if (isGood) {
 const x = 4;
 console.log(x); // 4
 }
 console.log(x); // undefined
 } const and let
47. function canTransition(isSaving) {
 const canTransition = true;
 if (isSaving) {
 canTransition = false; // Error: already set.
 }
 return canTransition;
 } const and let
48. function canTransition(isSaving) {
 let canTransition = true;
 if (isSaving) {
 canTransition = false;
 }
 return canTransition;
 } const and let
49. Promises
50. Promise States Pending Fulfilled Rejected } Settled
51. getJSON onFulfilled onRejected getJSON onFulfilled onRejected
52. $.ajax(config) .then(onFulfilled, onRejected) Lies, all LIES!
53. var promise = getJSON('/comments'); somethingElse(); promise.then(onFulfilled, onRejected); Promise.prototype.then
54. JavaScript Promises Thinking Sync in an Async World then
55. JS