SenchaCon 2016: Learn the Top 10 ECMAScript 2015 Features

In this session, Lee will cover the top 10 new features of ECMAScript 2015, their benefits, and go through code examples of 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.

Transcript

1. Learn the Top 10 best
   ECMAScript 2015 features
   Lee Boonstra
   @ladysign
   

   View Slide

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."
   

   View Slide

3. Sit back, and relax
   

   View Slide

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.
   

   View Slide

5. 2004: Web 2.0
   Advanced Rich Web Applications: Read & Write
   

   View Slide

6. History
   

   View Slide

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+)
   

   View Slide

8. Sencha
   

   View Slide

9. Top 10 ES2015 features
   10. Block scoped constructs
   9. Default parameters
   8. Template Literals
   7. Arrow functions
   6. Destructuring Assignment
   5. For of loop
   4. New Methods
   3. Promises
   2. Classes
   1. Modules
   

   View Slide

10. 10. Block Scoped Constructs
    

    View Slide

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

    View Slide

12. 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!");
    }
    })();
    

    View Slide

13. 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!");
    }
    })();
    

    View Slide

14. 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
    

    View Slide

15. Block level declarations
    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)
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide

18. Creates new identifier in a new block scope
    This time 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.
    

    View Slide

19. Constant declarations
    You can also define declarations in ES2015 with the const declaration syntax.
    These values cannot be changed once set.
    const LIVEURL = "http://www.sencha.com/feed.json";
    

    View Slide

20. 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
    

    View Slide

21. 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" }
    

    View Slide

22. 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.
    • let and const can create dead zones
    • Variables are meant for changing the values! A constant not.
    

    View Slide

23. 9. Default Parameters
    

    View Slide

24. About Default Parameters
    Prior to ECMAScript 2015, code would look like this script. You'll have to pass in the
    url parameter, but timeout and callback are optional.
    function makeRequest(url, timeout, callback) {
    timeout = (typeof timeout !== "undefined") ? timeout : 2000;
    callback = callback || function() {};
    //do something
    }
    

    View Slide

25. 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
    

    View Slide

26. Gotcha
    • Default parameters, can keep your function bodies clean, without re-defining and
    assigning values to inner variables.
    

    View Slide

27. 8. Template Literals
    

    View Slide

28. ES5 JavaScript Strings
    • JavaScript always lacked, when we are talking about Strings, especially when
    talking about:
    - Multiline strings
    - HTML escaping
    - Basic string formatting
    

    View Slide

29. 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.";
    

    View Slide

30. 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
    

    View Slide

31. 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
    

    View Slide

32. Gotcha
    • `Multiline Strings` FTW!
    • For easy mixing single and double quotes
    • String substitution (placeholders in Strings)
    • Tagged templates are like template functions in JS.
    

    View Slide

33. 7. Arrow Functions
    

    View Slide

34. View Slide

35. 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
    

    View Slide

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

    View Slide

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

    View Slide

38. Be aware
    Arrow functions could slightly behave different compared to traditional
    JavaScript functions:
    • No this, super, arguments
    • No duplicated named arguments
    • Can not be called with new
    • No prototype
    • You can’t change this
    • Lexical this
    

    View Slide

39. No object
    You must rely on named and rest parameters to access function arguments...
    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
    

    View Slide

40. 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
    

    View Slide

41. Cannot be called with
    • Arrow functions do not have a [[Construct]] method and therefore cannot be
    used as constructors.
    • Arrow functions throw an error when used with new.
    new
    var x = (x) => x;
    new x();
    //TypeError: x is not a constructor
    

    View Slide

42. No prototype
    • Since you can’t use on an arrow function, Since you can’t use new on an arrow
    function, there’s no need for a prototype.
    • The prototype property of an arrow function doesn’t exist.
    var x = (x) => x;
    x.prototype.foo = "foo";
    //TypeError: x.prototype is undefined
    

    View Slide

43. Lexical
    Remember var me = this; 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.
    this
    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);
    }
    

    View Slide

44. Lexical
    • 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
    this
    

    View Slide

45. 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.
    

    View Slide

46. 6. Destructuring Assignment
    

    View Slide

47. 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'
    }
    }
    }
    

    View Slide

48. 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
    

    View Slide

49. 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
    

    View Slide

50. 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
    

    View Slide

51. 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
    

    View Slide

52. 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.
    

    View Slide

53. 5. for..of loop
    

    View Slide

54. ES5: For loops
    ES5 has various ways to loop through
    array elements and objects.
    • ES5 for loop
    • ES5 forEach() loop,
    can’t break, continue and return
    • ES5 for in, iterates through object properties
    var array = ["a", "b", "c"];
    Var obj = {
    firstname: "Lee", lastname: "Boonstra"
    };
    //1)
    for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
    }
    //2)
    array.forEach(function(element) {
    console.log(element);
    });
    //3)
    for(prop in obj) {
    console.log(prop + " = " + obj[prop]);
    }
    

    View Slide

55. For of loop
    New in ES2015, the for...of statement creates a loop iterating over iterable objects
    (including Array, Map, Set, String, arguments object etc…)
    var array = ["a","b","c","d"];
    for(i of array){
    console.log(i);
    if(i == "c") return;
    }
    

    View Slide

56. Gotcha
    • ES6 For of loop, most concise, direct syntax yet for looping through array elements
    • ..but, the old-fashioned ES5 for loop just performs better
    • https://www.incredible-web.com/blog/performance-of-for-loops-with-javascript/
    

    View Slide

57. About For..of performance
    • https://www.incredible-web.com/blog/performance-of-for-loops-with-javascript/
    

    View Slide

58. 4. New methods
    

    View Slide

59. 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?!!
    

    View Slide

60. 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
    

    View Slide

61. 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 = {}
    

    View Slide

62. ES5: Mixin Pattern (2)
    The mixin() function iterates over the own properties of supplier and copies
    them onto the 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.
    

    View Slide

63. 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
    

    View Slide

64. Object.setPrototypeOf() (1)
    • The Object.setPrototypeOf() method makes it possible to modify.
    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
    

    View Slide

65. Object.setPrototypeOf() - super (2)
    • Finally, you can use the super keyword to call methods on an object’s prototype. The this
    binding inside a method invoked using super is setup automatically to work with the
    current value of this.
    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
    

    View Slide

66. 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
    

    View Slide

67. 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
    

    View Slide

68. More New Methods
    There are much more new methods available in ES2015.
    New methods on the following prototypes:
    • Object
    • Array
    • Number
    • Math
    

    View Slide

69. 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
    

    View Slide

70. 3. Promises
    

    View Slide

71. 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
    

    View Slide

72. 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.
    

    View Slide

73. View Slide

74. 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);
    

    View Slide

75. 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;
    });
    

    View Slide

76. 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
    

    View Slide

77. Gotcha
    • When you deal with callbacks, (async ), 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.
    

    View Slide

78. 2. Classes
    

    View Slide

79. View Slide

80. 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.
    

    View Slide

81. 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.
    

    View Slide

82. 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.
    

    View Slide

83. 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
    

    View Slide

84. 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
    

    View Slide

85. 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 + ".";
    };
    

    View Slide

86. 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;
    }
    

    View Slide

87. 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
    

    View Slide

88. 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 + ".";
    }
    };
    

    View Slide

89. 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;
    }
    };
    

    View Slide

90. 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
    

    View Slide

91. Static Methods
    Static methods are methods which can be accessed as classname.methodName()
    instead of classInstanceName.methodName().
    

    View Slide

92. 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.";
    }
    }
    

    View Slide

93. 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
    

    View Slide

94. Gotcha
    • ES2015 classes, syntactical sugar, the type is a function under the hood
    • Class syntax
    • Inheritance: ES2015 classes can extend classes
    • Static Classes
    

    View Slide

95. 1. Modules
    

    View Slide

96. 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.
    

    View Slide

97. 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.
    3. The value of this 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.
    

    View Slide

98. 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
    }
    

    View Slide

99. 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
    

    View Slide

100. 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.
     

     View Slide

101. More ECMAScript 2015
     

     View Slide

102. 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
     • Generators
     • …
     See also: http://bit.ly/2clUmIy
     

     View Slide

103. ES2015 & Sencha
     

     View Slide

104. Sencha
     

     View Slide

105. 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 Template Templates
     Ext
     Ext.XTemplate
     Object.is() Ext.Object.equals()
     Object.assign() Ext.apply()
     Promises Ext.Promise
     Classes Ext.Base
     Modules Ext.Loader
     

     View Slide

106. There’s ES2015 support in Sencha Cmd 6.5
     • This will require tooling. Our frameworks have to
     deal with legacy browsers.
     • Sencha will need a transpiler to compile back to
     old fashioned ES5 code.
     • Our goal is to let your ES2015 code run together
     with the Sencha framework code.
     • Cmd is Java based! With Sencha Cmd 6.5, code gets
     transpiled! Under the hood, we will use Google
     Closure Compiler. (We replaced Rhino)
     

     View Slide

107. Be aware of the transpiler!
     • If you need to use it, you owe yourself to check the output and end
     result
     • Transpilers generate code which is supported by the current browsers.
     It might not be the code what you would expected.
     

     View Slide

108. ES2015 support in the next major Ext JS version
     • Next Ext JS version will make changes in the class system Ext.Base
     • Write ES2015 “class” syntax to extend from Sencha classes
     • New tooling, Node.js / NPM based with integration of Babel. Will allow
     TypeScript support.
     

     View Slide

109. • 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
     • https://developers.google.com/closure/compiler
     • https://github.com/google/closure-compiler/wiki/ECMAScript6
     • https://kpdecker.github.io/six-speed/
     Resources
     

     View Slide

110. View Slide