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