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

Learn the Top 10 best ES2015 features

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/

Lee Boonstra

September 16, 2016
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

  3. Sit back, and relax

    View full-size 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 full-size slide

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

    View full-size slide

  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

    View full-size 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 full-size slide

  8. Top 10 ES2015 features
    10. Block scoped constructs
    9. Default parameters
    8. Template Literals
    7. Arrow functions
    6. Destructuring Assignment

    View full-size slide

  9. Top 10 ES2015 features
    5. Enhanced Object Literals
    4. New Methods
    3. Promises
    2. Classes
    1. Modules

    View full-size slide

  10. 10. Block scoped
    constructs

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  15. 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)

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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.

    View full-size slide

  23. 9. Default Parameters

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  27. 8. Template Literals

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  33. 7. Arrow Functions

    View full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

  45. 6. Destructuring
    Assignment

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

  52. 5. Enhanced Object Literals

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. Gotcha
    • Write less code within Object literals.

    View full-size slide

  58. 4. New methods

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

  74. 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 full-size slide

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

    View full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

  80. 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 full-size slide

  81. 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 full-size slide

  82. 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 full-size slide

  83. 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 full-size slide

  84. 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 full-size slide

  85. 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 full-size slide

  86. 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 full-size slide

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

    View full-size slide

  88. 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 full-size slide

  89. 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 full-size slide

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

    View full-size slide

  91. 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 full-size slide

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

    View full-size slide

  93. 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 full-size slide

  94. 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 full-size slide

  95. 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 full-size slide

  96. More ECMAScript 2015

    View full-size slide

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

    View full-size slide

  98. ES2015 & Sencha

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  103. Thank you!
    Lee Boonstra @ladysign

    View full-size slide