The ECMAScript formerly known as 6

Transcript

1. babeljs.io/repl
   

   View Slide

2. The ECMAScript
   formerly known as
   6
   

   View Slide

3. KerrickLong
   Kerrick
   KerrickLong.com
   

   View Slide

4. JS
   

   View Slide

5. JS
   

   View Slide

6. DOM ECMAScript
   +
   

   View Slide

7. DOM
   

   View Slide

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

   View Slide

9. DOM ECMAScript
   +
   

   View Slide

10. ECMAScript
    

    View Slide

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)
    

    View Slide

12. ECMAScript 6
    

    View Slide

13. ECMAScript 2015
    

    View Slide

14. JavaScript is
    growing up.
    

    View Slide

15. Dwindling use of
    App Frameworks
    that compile to JS
    

    View Slide

16. Dwindling use of
    App Frameworks
    that compile to JS
    

    View Slide

17. Dwindling use of
    Other Languages
    that compile to JS
    

    View Slide

18. Dwindling use of
    Other Languages
    that compile to JS
    

    View Slide

19. What’s new?
    

    View Slide

20. Modules
    

    View Slide

21. // app/routes/example.js

    import Ember from 'ember';

    

    export default Ember.Route.extend();
    Modules
    

    View Slide

22. // app/utils/func.js

    export var flatten = _.flatten.bind(_);

    export var union = _.union.bind(_);
    Modules
    

    View Slide

23. // app/utils/func.js

    export var flatten = _.flatten.bind(_);

    export var union = _.union.bind(_);

    

    export default {

    flatten: flatten,

    union: union

    };
    Modules
    

    View Slide

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]));

    }

    });
    

    View Slide

25. Arrow Functions
    

    View Slide

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)

    });

    });
    

    View Slide

27. Arrow Functions
    var _this = this;

    return this.store.find('pages').then(pages => {

    return pages.map((pages, i) => {

    return _this.modelFor('posts').objectAt(i)

    });

    });
    

    View Slide

28. Arrow Functions
    

    return this.store.find('pages').then(pages => {

    return pages.map((pages, i) => {

    return this.modelFor('posts').objectAt(i)

    });

    });
    

    View Slide

29. Arrow Functions
    

    return this.store.find('pages').then(pages => {

    return pages.map((pages, i) => this.modelFor('posts').objectAt(i));

    });
    

    View Slide

30. Enhanced Object Literals
    

    View Slide

31. var foo = 'bar';

    var obj = {

    foo: foo,

    model: function(params) {

    return params;

    }

    };

    obj['id_' + Math.random()] = 'secret';
    Enhanced Object Literals
    

    View Slide

32. var foo = 'bar';

    var obj = {

    foo,

    model: function(params) {

    return params;

    }

    };

    obj['id_' + Math.random()] = 'secret';
    Enhanced Object Literals
    

    View Slide

33. var foo = 'bar';

    var obj = {

    foo,

    model(params) {

    return params;

    }

    };

    obj['id_' + Math.random()] = 'secret';
    Enhanced Object Literals
    

    View Slide

34. var foo = 'bar';

    var obj = {

    foo,

    model(params) {

    return params;

    },
    ['id_' + Math.random()]: 'secret'

    };
    Enhanced Object Literals
    

    View Slide

35. Destructuring
    

    View Slide

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
    

    View Slide

37. import Ember from 'ember';

    

    var { Route: Route } = Ember;

    var [filename, ext] = 'photo.jpg'.split('.');
    

    export default Route.extend();
    Destructuring
    

    View Slide

38. import Ember from 'ember';

    

    var { Route } = Ember;

    var [filename, ext] = 'photo.jpg'.split('.');
    

    export default Route.extend();
    Destructuring
    

    View Slide

39. Template Strings
    

    View Slide

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

    View Slide

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

    View Slide

42. const code = '\n' +
<br/>'\n' +

    '\n' +

    'View\n' +

    '';
    Template Strings
    

    View Slide

43. const code = `
<br/>

    

    View

    `;
    Template Strings
    

    View Slide

44. const and let
    

    View Slide

45. function example(isGood) {

    if (isGood) {

    var x = 4;

    console.log(x); // 4

    }

    console.log(x); // 4

    }
    const and let
    

    View Slide

46. function example(isGood) {

    if (isGood) {

    const x = 4;

    console.log(x); // 4

    }

    console.log(x); // undefined

    }
    const and let
    

    View Slide

47. function canTransition(isSaving) {

    const canTransition = true;

    if (isSaving) {

    canTransition = false; // Error: already set.

    }

    return canTransition;

    }
    const and let
    

    View Slide

48. function canTransition(isSaving) {

    let canTransition = true;

    if (isSaving) {

    canTransition = false;

    }

    return canTransition;

    }
    const and let
    

    View Slide

49. Promises
    

    View Slide

50. Promise States
    Pending Fulfilled Rejected
    }
    Settled
    

    View Slide

51. getJSON
    onFulfilled onRejected
    getJSON
    onFulfilled
    onRejected
    

    View Slide

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

    View Slide

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

    View Slide

54. JavaScript
    Promises
    Thinking Sync in an Async World
    then
    

    View Slide

55. JS
    

    View Slide