The ECMAScript formerly known as 6

Transcript

1. 1.

   babeljs.io/repl

2. 2.

   The ECMAScript formerly known as 6

3. 3.

   KerrickLong Kerrick KerrickLong.com

4. 4.

   JS

5. 5.

   JS

6. 6.

   DOM ECMAScript +

7. 7.

   DOM

8. 8.

   context.drawImage(new Image(), 0, 0) event.dataTransfer.setData(mime, data) new Worker('thread.js').postMessage(str) navigator.getUserMedia({audio: true})

   DOM
9. 9.

   DOM ECMAScript +

10. 10.

    ECMAScript

11. 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. 12.

    ECMAScript 6

13. 13.

    ECMAScript 2015

14. 14.

    JavaScript is growing up.

15. 15.

    Dwindling use of App Frameworks that compile to JS

16. 16.

    Dwindling use of App Frameworks that compile to JS

17. 17.

    Dwindling use of Other Languages that compile to JS

18. 18.

    Dwindling use of Other Languages that compile to JS

19. 19.

    What’s new?

20. 20.

    Modules

21. 21.

    // app/routes/example.js
 import Ember from 'ember';
 
 export default Ember.Route.extend();

    Modules
22. 22.

    // app/utils/func.js
 export var flatten = _.flatten.bind(_);
 export var union

    = _.union.bind(_); Modules
23. 23.

    // app/utils/func.js
 export var flatten = _.flatten.bind(_);
 export var union

    = _.union.bind(_);
 
 export default {
 flatten: flatten,
 union: union
 }; Modules
24. 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. 25.

    Arrow Functions

26. 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. 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. 28.

    Arrow Functions 
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i)

    => {
 return this.modelFor('posts').objectAt(i)
 });
 });
29. 29.

    Arrow Functions 
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i)

    => this.modelFor('posts').objectAt(i));
 });
30. 30.

    Enhanced Object Literals

31. 31.

    var foo = 'bar';
 var obj = {
 foo: foo,


    model: function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
32. 32.

    var foo = 'bar';
 var obj = {
 foo,
 model:

    function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
33. 33.

    var foo = 'bar';
 var obj = {
 foo,
 model(params)

    {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
34. 34.

    var foo = 'bar';
 var obj = {
 foo,
 model(params)

    {
 return params;
 }, ['id_' + Math.random()]: 'secret'
 }; Enhanced Object Literals
35. 35.

    Destructuring

36. 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. 37.

    import Ember from 'ember';
 
 var { Route: Route }

    = Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
38. 38.

    import Ember from 'ember';
 
 var { Route } =

    Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
39. 39.

    Template Strings

40. 40.

    confirm('Really delete ' + promotion.name + '?'); Template Strings

41. 41.

    confirm(`Really delete ${promotion.name}?`); Template Strings

42. 42.

    const code = '<script src="' + src + '">\n' +


    '</script>\n' +
 '<noscript>\n' +
 '<a href="' + link + '">View</a>\n' +
 '</noscript>'; Template Strings
43. 43.

    const code = `<script src="${src}">
 </script>
 <noscript>
 <a href="${link}">View</a>
 </noscript>`;

    Template Strings
44. 44.

    const and let

45. 45.

    function example(isGood) {
 if (isGood) {
 var x = 4;


    console.log(x); // 4
 }
 console.log(x); // 4
 } const and let
46. 46.

    function example(isGood) {
 if (isGood) {
 const x = 4;


    console.log(x); // 4
 }
 console.log(x); // undefined
 } const and let
47. 47.

    function canTransition(isSaving) {
 const canTransition = true;
 if (isSaving) {


    canTransition = false; // Error: already set.
 }
 return canTransition;
 } const and let
48. 48.

    function canTransition(isSaving) {
 let canTransition = true;
 if (isSaving) {


    canTransition = false;
 }
 return canTransition;
 } const and let
49. 49.

    Promises

50. 50.

    Promise States Pending Fulfilled Rejected } Settled

51. 51.

    getJSON onFulfilled onRejected getJSON onFulfilled onRejected

52. 52.

    $.ajax(config) .then(onFulfilled, onRejected) Lies, all LIES!

53. 53.

    var promise = getJSON('/comments'); somethingElse(); promise.then(onFulfilled, onRejected); Promise.prototype.then

54. 54.

    JavaScript Promises Thinking Sync in an Async World then

55. 55.

    JS