Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The ECMAScript formerly known as 6

The ECMAScript formerly known as 6

Kerrick Long

July 31, 2015
Tweet

More Decks by Kerrick Long

Other Decks in Programming

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