The ECMAScript formerly known as 6

The ECMAScript formerly known as 6

2956e2cd2664630aa968b92bbb645f2f?s=128

Kerrick Long

July 31, 2015
Tweet

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