Learn the Top 10 best ES2015 features

8a235da15adae86851fa3216834198ed?s=47 Lee Boonstra
September 16, 2016

Learn the Top 10 best ES2015 features

In this presentation, Lee Boonstra will cover the top 10 new features of ECMAScript 2015, their benefits, and explain through code examples how to use them. She will also talk about ECMAScript 2015 compatibilities and incompatibilities with the most widely used browsers today, and how you should plan on developing your applications with ECMAScript 2015.

https://www.leeboonstra.com/developer/sencha-ecmascript-2015/

8a235da15adae86851fa3216834198ed?s=128

Lee Boonstra

September 16, 2016
Tweet

Transcript

  1. Learn the Top 10 best ECMAScript 2015 features by Lee

    Boonstra (@ladysign)
  2. “ What you know as JavaScript in browsers and Node.js

    is actually a superset of ECMAScript. Browsers and Node.js add more functionality through additional objects and methods, but the core of the language remains as defined in ECMAScript. “
  3. Sit back, and relax

  4. Terminology JavaScript - the language name ECMAScript - the name

    of the standard Transpiler - Transforms ES2015 code to the JavaScript that currently supported in our browsers. TypeScript - A programming language, which is a superset of JS that aims to align with ES2015, by Microsoft. Compiles to plain JavaScript, because of definition files it can contain type information.
  5. 2004: Web 2.0 Advanced Rich Web Applications: Read & Write

  6. History 1997 - ECMAScript 1 1998 - ECMAScript 2 1999

    - ECMAScript 3 ECMAScript 4 got abandoned 2009 - ECMAScript 5 2015 - ECMAScript 6 ECMAScript 2015 ? - ECMAScript 2016
  7. About Compatibility You can find an overview of compatibility, in

    one of these ECMAScript 2015 compatibility tables: http://kangax.github.io/compat-table/es6/ ES2015 Implementations: • V8 (Chrome, Node.js, Opera) • JavaScript Core (Webkit, Safari) • Chakra (MS Edge) • SpiderMonkey (Firefox) • Mobile (iOS 9+, Android 4.4+)
  8. Sencha

  9. Top 10 ES2015 features 10. Block scoped constructs 9. Default

    parameters 8. Template Literals 7. Arrow functions 6. Destructuring Assignment
  10. Top 10 ES2015 features 5. Enhanced Object Literals 4. New

    Methods 3. Promises 2. Classes 1. Modules
  11. 10. Block scoped constructs

  12. What’s hoisting? Variable declarations using var are treated as if

    they are at the top of the function (or global scope, if declared outside of a function) regardless of where these were placed.
  13. Hoisting explained You might have seen something like this before:

    foo() executes here: (function() { console.log(typeof foo); // prints "function" foo(); // logs "hello sencha" function foo() { console.log("hello sencha!"); } })();
  14. Hoisting explained But here it won't... (function() { console.log(typeof foo);

    // prints "undefined" foo(); // Error: foo is not a function var foo = function() { console.log("hello sencha!"); } })();
  15. Hoisting explained This is how the browser interprets it: //

    prints "undefined" (function() { var foo; console.log(typeof foo); function anon() { console.log("hello sencha!"); } //some anonymous function foo(); // Error: foo is not a function //bind anonymous function to foo foo = anon; })(); Get the code: http://bit.ly/2aAvlpS
  16. Block level declarations The ECMAScript 2015 defines block-level declarations. With

    those you can declare variables that are inaccessible outside of a given block scope. Block scopes, also called lexical scopes, are created: 1. Inside of a function 2. Inside of a block (indicated by the { and } characters)
  17. Let Declaration The let declaration syntax is almost the same

    as the syntax for var . (function() { console.log(typeof foo); // ReferenceError: can't access foo(); // I won't even get here. let foo = function() { console.log("hello sencha!"); } })(); Get the code: http://bit.ly/2aAvlpS
  18. Can only be declared once in the same scope Below

    gives a syntax error because you can’t re- declare an identifier within the same (block) scope: var baz = "sencha"; let baz = "extjs"; SyntaxError: redeclaration of non-configurable global property baz
  19. Creates new identifier in a new block scope Now it

    won't throw an error: var baz = "sencha"; if(true){ let baz = "extjs"; //let baz is extjs, but var baz is still sencha } console.log(baz); //logs sencha extjs Note, it doesn’t log , because let baz is only available within its own block scope.
  20. Constant declarations You can also define variables in ECMAScript 2015

    const with the declaration syntax. These values cannot be changed once set. const LIVEURL = "http://www.sencha.com/feed.json";
  21. Example of errors The first example is missing initialization. The

    second example throws a type error because you can’t assign a new variable to a constant. const LIVEURL= "http://www.sencha.com/feed.json"; LIVEURL = "http://www.leeboonstra.com/feed.json"; //TypeError: invalid assignment to const `liveUrl' const LOCALURL; //syntax error, missing = in const declaration
  22. This will run perfectly fine It prevents the modification of

    the binding, not the value itself. const URLS = {}; URLS.LIVE = "http://www.sencha.com/feed.json"; URLS.LIVE = "http://www.leeboonstra.com/feed.json"; URLS.LOCAL = "http://localhost/feed.json"; console.log(URLS); //Object { live: "http://www.leeboonstra.com/feed.json", //local: "http://localhost/feed.json" }
  23. Gotcha • Var declarations are hoisted to the top of

    the function scope • Use let for setting declarations in block scopes • Use const for declarations that can’t change the binding • Be careful when you are replacing var for let and const.
  24. 9. Default Parameters

  25. About Default Parameters Prior to ECMAScript 2015, code would look

    like this url script. You'll have to pass in the parameter , but timeout callback and are optional: function makeRequest(url, timeout, callback) { timeout = (typeof timeout !== "undefined") ? timeout : 2000; callback = callback || function() {}; //do something }
  26. Default function parameters With ECMAScript 2015, you can actually provide

    default function parameters: function makeRequest (url, timeout = 2000, callback = function() {} ) { //do something } Get the code: http://bit.ly/2axL0J5
  27. Gotcha • Default parameters, can keep your function bodies clean,

    without re-defining and assigning valuables to inner variables.
  28. 8. Template Literals

  29. ES5 JavaScript Strings JavaScript always lacked, when we are talking

    about Strings, especially when talking about: - Multiline strings - HTML escaping - Basic string formatting
  30. Multiline Strings Example ES5 way of dealing with multiline Strings:

    var product = "Sencha"; var myText = product + " provides the industry's most " + "comprehensive collection of high-performance, " + "customizable UI widgets.These \"widgets\" include: " + "HTML5 grids, trees, lists, forms, menus, toolbars," + "panels, windows, and much more.";
  31. Multiline Strings Here's how it looks in ES2015: let product

    = "Sencha"; let myText = `${product} provides the industry's most comprehensive collection of high-performance, customizable UI widgets. These "widgets" include HTML5 grids, trees, lists, forms, menus, toolbars, panels, windows, and much more.`; Get the code: http://bit.ly/2azCR78
  32. Tagged Templates Template functions, a template tag performs a transformation

    on the template literal and returns the final string value. function mytag(arrLiterals){ return arrLiterals[0].toUpperCase(); } let message = mytag`hello world!`; //HELLO WORLD! Get the code: http://bit.ly/2aT6eiO
  33. Gotcha • `Multiline Strings` FTW! • For easy mixing single

    and double quotes • String substitution (placeholders in Strings) • Tagged templates are like template functions in JS.
  34. 7. Arrow Functions

  35. None
  36. Arrow Functions Arrow functions, are a new syntax for functions,

    => defined with an arrow. . Consider the following ES5 functions: var calculate = function(x,y){ return x + y; } var sayHello = function(name){ return "Hello " + name; } calculate(5,10); //returns: 15 sayHello('Lee'); //returns: Hello Lee
  37. Arrow Functions And compare these to the following new syntax:

    let calculate = (x,y) => { return x + y; } let sayHello = (name) => { return "Hello " + name; } calculate(5,10); //returns: 15 sayHello('Lee'); //returns: Hello Lee
  38. Arrow Functions This would work as well: let calculate =

    (x,y) => x + y; let sayHello = (name) => "Hello " + name; Get the code: http://bit.ly/2b7G8Gz
  39. Be aware Arrow functions could slightly behave different compared to

    traditional JavaScript functions: this - No super arguments - No duplicate named arguments new - Can not be called with - No prototype - You can't change this - Lexical this
  40. No object arguments You must rely on named and rest

    parameters to access function arguments... //ES5 var foo = function (x,y) { return arguments[0]; } foo("lee", "2"); //returns "lee"; //ES2015 var foo = (x,y) => arguments[0]; foo("lee","2") //ReferenceError: arguments is not defined [Learn More] Get the code: http://bit.ly/2aNnt3z
  41. No duplicate named args Not in strict or nonstrict mode,

    as opposed to non- arrow functions that cannot have duplicate named arguments only in strict mode. //ES5 var x = function (x,x) { return x; } x("hello", "world"); //returns "world"; //ES2015 var x = (x,x) => x; //SyntaxError: duplicate argument names not //allowed in this context Get the code http://bit.ly/2aNnt3z
  42. Cannot be called with new Arrow functions do not have

    a [[Construct]] method and therefore cannot be used as constructors. Arrow functions throw an error when used with new. var x = (x) => x; new x(); //TypeError: x is not a constructor
  43. No prototype new Since you can’t use on an arrow

    function, there’s no need for a prototype. prototype The property of an arrow function doesn’t exist. var x = (x) => x; x.prototype.foo = "foo"; //TypeError: x.prototype is undefined
  44. Lexical this var me = this; Remember or var self

    = this ? Often used when working with callbacks, to refer to the original scope, while the current scope changed, because of a callback. function VideoGame(){ //ES5 var me = this; me.title = "Uncharted", me.version = 3; setInterval(function() { return me.title + " " + me.version++; console.log("1:", this); //Context is Window console.log("2:", me); //Context is VideoGame() }, 5000); }
  45. Lexical this An arrow function does not create it's own

    this scope, rather it captures the this value of the enclosing scope. function VideoGame(){ this.title = "Uncharted"; this.version = 3; setInterval(() => { console.log(this.title + " " + this.version++); // |this| properly refers to the VideoGame object }, 5000); } Get the code: http://bit.ly/2azNHae
  46. Gotcha • Arrow functions =>, write less code • Ideal

    for callback function / inline functions. • When working in teams, make sure everyone understands. • Be aware: • No arguments • Can not create instance with new • No prototype • Lexical this I’ve created examples for this, which I will leave in the slidedeck.
  47. 6. Destructuring Assignment

  48. Consider this Object var myobject = { name: "Sencha", logo:

    { small: { png: 'http://path/to/small.png', jpg: 'http://path/to/small.jpg' }, large: { png: 'http://path/to/large.png', jpg: 'http://path/to/large.jpg' } } }
  49. ES5: Working with Objects In ES5 you would do something

    like this: var logo = myobject.logo.small.png; var small = myobject.logo.small; var company = myobject.name; console.log(logo); //Sencha console.log(small); // { png: "http://path/to/small.png", //jpg: "http://path/to/small.jpg" } console.log(company); //http://path/to/small.jpg
  50. ES2015: Object Destructuring Compare this to the ES2015 way, with

    object destructuring: let { name, logo : { small : { jpg } } } = myobject; console.log(name); //Sencha console.log(small); // { png: "http://path/to/small.png", //jpg: "http://path/to/small.jpg" } console.log(jpg); //http://path/to/small.jpg Get the code: http://bit.ly/2aDgsmT
  51. ES5: Working with Arrays Before you would often fetch information

    from objects or arrays, that could lead in lots of code which looks the same, just to get certain data in local variables. var myarray = ["Ext JS", "GXT", "Sencha Test"]; var myvar1 = myarray[0]; var myvar2 = myarray[1]; var myvar3 = myarray[2]; console.log(myvar1, myvar2, myvar3) //Ext JS GXT Sencha Test
  52. ES2015: Array Destructuring You can also destruct arrays: let myarray

    = ["Ext JS", "GXT", "Sencha Test"]; let [myvar1, myvar2, myvar3] = myarray; console.log(myvar1, myvar2, myvar3) //Ext JS GXT Sencha Test Get the code: http://bit.ly/2aA099W
  53. Gotcha • Extract data from Arrays and Objects • Ideal

    for when working with deeply nested Objects. No longer you need to create extra variables with dot-notation.
  54. 5. Enhanced Object Literals

  55. Enhanced Object Literals ECMAScript 2015 made some helpful changes to

    objects. In ES5, objects are name value pairs: function getVideoGame(t, v, p) { return { title : t, version: v, platform: p }; }
  56. Enhanced Object Literals In ES2015 this can be written much

    shorter. It takes the parameters and uses the parameter name as a key, with the belonging value: function getVideoGame(title, version, platform) { return { title, version, platform }; } Get the code: http://bit.ly/2ayXbRM
  57. Enhanced Object Literals Methods in objects can also be written

    much nicer: Before in ES5: var videogame = { name: "Uncharted", version: "4", getGame: function(){ return this.name + " " + this.version; } };
  58. Enhanced Object Literals In ECMAScript 2015: let videogame = {

    name: "Uncharted", version: "4", getGame(){ return this.name + " " + this.version; } }; Get the code: http://bit.ly/2aAgviP
  59. Gotcha • Write less code within Object literals.

  60. 4. New methods

  61. ES5: Check equality console.log(5 == 5); // true console.log(5 ==

    "5"); // true console.log(5 === 5); // true console.log(5 === "5"); // false console.log(+0 == -0); // true <----------WAIT WHAT?!! console.log(+0 === -0); // true <---------WAIT WHAT?!! console.log(NaN == NaN); // false <--------WAIT WHAT?!!
  62. ES2015: Object.is() This method performs strict equality on any value,

    === effectively becoming a safer version of when dealing with special JavaScript values: console.log(Object.is(5, 5)); // true console.log(Object.is(5, "5")); // false console.log(Object.is(+0, -0)); // false <---- Oh, OK! console.log(Object.is(NaN, NaN)); // true <--- Oh, OK! Get the code: http://bit.ly/2b8o9AB
  63. ES5: Mixin Pattern (1) Consider this piece of code: function

    Observable() { //... } Observable.prototype = { constructor: EventTarget, on: function() { console.log("An event happened.") } } //the receiver object var AnotherObject = {}
  64. ES5: Mixin Pattern (2) mixin() The function iterates over the

    own properties of supplier and copies them onto receiver. function mixin(receiver, supplier) { Object.keys(supplier).forEach(function(key) { receiver[key] = supplier[key]; }); return receiver; } mixin(AnotherObject, Observable.prototype); AnotherObject.on("customevent"); //An event happened.
  65. ES2015: Object.assign() This method makes it easier to change multiple

    properties on a single object at once. function Observable() { } Observable.prototype = { constructor: EventTarget, on: function() { console.log("An event happened.") } } let SomeObject = {} Object.assign(SomeObject, Observable.prototype); SomeObject.on("customevent"); //An event happened. Get the code: http://bit.ly/2b2KB0E
  66. Object.setPrototypeOf() (1) The Object.setPrototypeOf() method makes it possible to modify

    an object’s prototype after it’s already created. var MySong = { sing() { return "Girl, you know it's true..."; } }; var MilliVanilli = { dance() { return "Dance!"; } }; var Numarx = Object.create(MySong); Numarx.sing(); // "Girl, you know it's true..." Object.getPrototypeOf(Numarx) === MySong; //true //MilliVanilli takes over the Numarx prototype: Object.setPrototypeOf(MilliVanilli, Numarx); MilliVanilli.sing(); // "Girl, you know it's true..." MilliVanilli.dance(); //Dance! Object.getPrototypeOf(MilliVanilli) === Numarx; //true
  67. Object.setPrototypeOf() - super (2) super this Finally, you can use

    the keyword to call methods on an object’s prototype. The binding inside a method invoked using super is set up to automatically work with the current this value of . var MilliVanilli = { sing(){ return super.sing() + " Oeh Oeh Oeh"; } }; var Numarx = Object.create(MySong); Numarx.sing(); // "Girl, you know it's true..." //take over the Numarx prototype, but overrides the sing(): Object.setPrototypeOf(MilliVanilli, Numarx); MilliVanilli.sing(); // "Girl, you know it's true... Oeh Oeh Oe Get the code: http://bit.ly/2auVcAQ
  68. ES5: Find in Array Find in an array of numbers

    which number is the closest, and never go under the given number: var numbers = [0,5,10,15,20,25]; function closest(arr, n){ var x = Math.max.apply(null, arr); for(var i = 0; i < arr.length; i++){ // Check if it is higher than your number // but lower than your closest value if(arr[i] >= n && arr[i] < x) x = arr[i]; } return x; } closest(numbers, 6); //10
  69. ES2015: Array.find() Find in an array of numbers which number

    is the closest, and never go under the given number: let numbers = [0,5,10,15,20,25]; numbers.find(n => n > 6) //10 Get the code: http://bit.ly/2b8Xi9x
  70. More New Methods There are much more new methods available

    in ES2015. New methods on the following prototypes: • Object • Array • Number • Math
  71. Gotcha • Object.is() – Equality checking, the right way •

    Object.asign() – Ideal for coding Mixin patterns • More new methods on prototypes of: • Object - http://bit.ly/2cbFU3l • Array - http://bit.ly/2co0yNn • Number & Math - http://bit.ly/2cnDRb0
  72. 3. Promises

  73. Async JavaScript Promises are new to ECMAScript 2015, and helps

    you with dealing with asynchronous code. JavaScript code is single threaded: • Code executes from top to bottom • Right after each other • 2 bits of code cannot run at the same time
  74. Event Loop The Event Loop is a queue of callback

    functions. When the JS engine sees an async method, that method is pushed into the queue.
  75. None
  76. ES5: Callbacks //Node.js Example var done = function(err, jobs){ res.render("myview",

    { user : req.user, jobs: jobs }); }; getJobs = function(req, done){ // Something asynchronous: MongoDB, // request jobs from a database Job.findJobsOfUser(req.user._id, function(err, jobs){ if(err) throw err; done(null, jobs); }); } var jobs = getJobs(req, done);
  77. ES2015: Promises (1) getJobs(req).then(function(jobs){ if(jobs){ //now if I want to

    chain this with more calls //i just run the res.render finally res.render("profile", { user : req.user, jobs: jobs }); } }, function(error){ throw error; });
  78. ES2015: Promises (2) function getJobs(req){ var promise = new Promise(function

    (resolve, reject) { //Something asynchronous: MongoDB, //request jobs from a database Job.findJobsOfUser(req.user._id, function (err, jobs) { if (err) reject(err); //reject the promise else resolve(jobs); //or resolve the promise }); }); return promise; } The advantage of this piece of code, is that it’s better readable and maintainable. Get the code: http://bit.ly/2b91GW9
  79. Gotcha • When you deal with callbacks, (async JS), you

    pass a function in a function and you deal with success and failure. • The result of an async task (promise) can be fulfilled or rejected. It makes async JS better readable. • Promises are chainable.
  80. 2. Classes

  81. Sencha

  82. Just Syntactical Sugar “ The class syntax is not introducing

    a new object-oriented inheritance model to JavaScript. They mainly provide more convenient syntax to create old-school constructor functions. “
  83. ES5: Class-like definition var Character = function (name, type, universe)

    { this.name = name; this.type = type; this.universe = universe; }; Character.prototype.introduce = function () { return "I am " + this.name + ". A " + this.type + " from " + this.universe + "."; }; var batman = new Character("Batman", "superhero", "DC"); batman.introduce(); //I am Batman. A superhero from DC.
  84. ES2015: Class-like definition class Character { constructor(name, type, universe){ this.name

    = name; this.type = type; this.universe = universe; } introduce() { return "I am " + this.name + ". A " + this.type + " from " + this.universe + "."; } } typeof Character; //"function" let batman = new Character("Batman", "superhero", "DC"); batman.introduce(); //I am Batman. A superhero from DC.
  85. Getters & Setters class SuperHero { constructor(name, ability){ this._name =

    name; this._ability = ability; } setName(name){ this._name = name; } getName(){ return this._name; } setAbility(ability){ this._ability = ability; } getAbility(){ return this._ability; } } Get the code: http://bit.ly/2aAdgL4
  86. Getters & Setters var spiderman = new SuperHero(); spiderman.setName("Spiderman"); spiderman.setAbility("Shoot

    SpiderWebs"); console.log(spiderman.getName()); //"Spiderman" console.log(spiderman.getAbility()); //Shoot SpiderWebs Get the code: http://bit.ly/2aAdgL4
  87. ES5: Class Inheritance (1) var Character = function (name, type,

    universe) { this.name = name; this.type = type; this.universe = universe; }; Character.prototype.introduce = function () { return "I am " + this.name + ". A " + this.type + " from " + this.universe + "."; };
  88. ES5: Class Inheritance (2) var Wookiee = function (name) {

    Character.call(this); this.name = name; this.type = "Wookiee"; this.universe = "Star Wars"; }; Wookiee.prototype = Object.create(Character.prototype); Wookiee.prototype.constructor = Wookiee; Wookiee.prototype.talk = function(){ var roar = "Uughguughhhghghghhhgh raaaaaahhgh" if(this.name == "Chewbacca") roar = roar + " Millennium Falcon"; return roar; }
  89. ES5: Class Inheritance (3) var chewbacca = new Wookiee("Chewbacca"); chewbacca.introduce();

    //I am Chewbacca. A wookiee from Star Wars. chewbacca.talk(); //Uughguughhhghghghhhgh raaaaaahhgh Millennium Falcon var chief = new Wookiee("Chief"); chief.introduce(); //I am Chief. A wookiee from Star Wars. chief.talk(); //Uughguughhhghghghhhgh raaaaaahhgh
  90. ES2015: Class inheritance (1) class Character { constructor(name, type, universe){

    this.name = name; this.type = type; this.universe = universe; } introduce() { return "I am " + this.name + ". A " + this.type + " from " + this.universe + "."; } };
  91. ES2015: Class inheritance (2) class Wookiee extends Character { constructor(name){

    super(); this.name = name; this.type = "Wookiee"; this.universe = "Star Wars"; } talk(){ var roar = "Uughguughhhghghghhhgh raaaaaahhgh" if(this.name == "Chewbacca") roar = roar + " Millennium Falcon"; return roar; } };
  92. ES2015: Class inheritance (3) var chewbacca = new Wookiee("Chewbacca"); chewbacca.introduce();

    //I am Chewbacca. A wookiee from Star Wars. chewbacca.talk(); //Uughguughhhghghghhhgh raaaaaahhgh Millenium Falcon var chief = new Wookiee("Chief"); chief.introduce(); //I am Chief. A wookiee from Star Wars. chief.talk(); //Uughguughhhghghghhhgh raaaaaahhgh
  93. Static Methods Static methods are methods which can be classname.methodName()

    accessed as instead of classInstanceName.methodName().
  94. ES2015: Static Method (1) class SuperHero { constructor(name, ability){ this._name

    = name; this._ability = ability; } setAbility(name){ this._ability = name; } getAbility(){ return this._ability;} .. static getMarvelFact() { return "Marvel Comics is the common name and" + " primary imprint of Marvel Worldwide Inc."; } }
  95. ES2015: Static Method (2) //Create an object var spiderman =

    new SuperHero(); spiderman.setName("Spiderman"); spiderman.getMarvelFact(); //TypeError: spiderman.getMarvelFact is not a function //Static Method from ClassName SuperHero.getMarvelFact(); //Marvel Comics is... Get the code: http://bit.ly/2arntnv
  96. Gotcha • ES2015 classes, syntactical sugar, the type is a

    function under the hood • Class syntax • Inheritance: ES2015 classes can extend classes • Static Classes
  97. 1. Modules

  98. ES2015: Modules Other languages have packages Before ES2015, JavaScript shared

    only one global scope which can cause collisions and security problems. ES2015 Goal: solve the scope problem: No module code executes until requested modules are available and processed.
  99. Modules are JavaScript files that are loaded in a different

    mode, than scripts. Here are some differences: 1. Module code automatically runs in strict mode, you can’t opt-out. 2. Variables created in the top level of a module aren’t automatically added to the shared global scope. It only exist in the module. this 3. The value of in the top level of a module is: undefined . 4. Modules must export anything that should be available to code outside of the module. 5. Modules may import bindings from other modules.
  100. Example Module (1) libs/leftpad.js function leftPadFunction (str, len, ch) {

    str = String(str); var i = -1; if (!ch && ch !== 0) ch = ' '; len = len - str.length; while (++i < len) { str = ch + str; } return str; } //export leftPadFunction; module.export { leftpad: leftPadFunction }
  101. Example Module (2) app.js //import * as leftpad from '../leftpad-module';

    import leftpad from '../leftpad-module'; leftpad("lee", 5, "-") //"--lee" leftpad("9", 3, "0") //"009" Get the code: http://bit.ly/2aH4QPc
  102. Gotcha • ES2015 answer to packages • Fix global scope

    problem (collisions) • Modules run in a different mode than script • this in top level of the module equals undefined • Modules must export anything that should be available to code outside of the module.
  103. More ECMAScript 2015

  104. More ECMAScript 2015 There are more nice ECMAScript 2015 features

    which didn’t fit in my presentation top 10: • Spread Operator • Maps, Weakmaps, Sets & Weaksets • For of loops • Generators • See also: http://bit.ly/2clUmIy
  105. ES2015 & Sencha

  106. Sencha

  107. Not all ES2015 features are new to Ext devs Some

    of these new ES2015 features already exist for years in Ext JS, and they are more advanced. ES2015 Tagged Templates Ext Ext.XTemplate Object.is() Ext.Object.equals() Object.assign() Ext.Mixin Promises Ext.Promise Classes Ext.Base Modules Microloader
  108. ES2015 support in Ext JS 7 • Ext JS 7

    will be the Sencha version which supports the common ECMAScript 2015 features. • We won’t rewrite the whole framework in ECMAScript 2015 valid code, so our syntax will not drastically change. But we will make some Ext.Base changes under the hood in . • Our goal is to let your ECMAScript 2015 code run together with the Sencha framework code.
  109. New tooling • This will require tooling. Our frameworks have

    to deal with legacy browsers. • The classic toolkit won’t disappear, that’s how we can serve code for older browsers. • Sencha will need a transpiler to compile back to old fashioned ES5 code. We will probably bake Babel or a different transpiler within our new Cmd-like tool. And also provide support for TypeScript, CoffeeScript, Gulp/Grunt support etc.
  110. Resources • http://speakerdeck.com/savelee • http://www.leeboonstra.com • http://es6-features.org/#RawStringAccess • https://github.com/getify/You-Dont-Know- JS/blob/master/es6

    & beyond/README.md#you- dont-know-js-es6--beyond • https://leanpub.com/understandinges6
  111. Thank you! Lee Boonstra @ladysign