SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

60 views

Published on

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.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
60
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Welcome! This presentation in about the new ECMAScript 2015.
    You might have seen the announcements yesterday in the keynote.
    We support the latest ECMAScript standard. How many of you have seen Don’s presentation yesterday? He spoke about the new framework, and how the new Ext JS framework will make changes in the class system to support ES6.

    My talk, is more about ES6, or ES2015 in general. So what’s ECMAScript? The JavaScript that you know from your browser or Node JS runtime is actually a superset of ECMAScript. It’s a standard, written by the ECMA International in Geneva.

    https://en.wikipedia.org/wiki/Ecma_International – ECMA INTERNATIONAL IN GENEVA. Small and large companies, like Google, Adobe, IBM, Intel, Microsoft came together and wrote these standards / http://www.ecma-international.org/memento/ordinary.htm
  • As some as you might know. I also work as a trainer for Sencha, and I love to teach code. This presentation is gonna show you a lot of slides with code.Don't worry, if you don't understand something, I will make sure this slidedeck will be available online, and I have links to all code snippets on Gist! (and I needed a reason to put deadpool in my presentation...
  • TYPESCRIPT = (Type checking for bugs before compilation, like developers love from languages like C++ or Java.)

    https://github.com/addyosmani/es6-tools
  • Who remembers the term? Web 2.0? More than 10 years ago. The internet became more advanced. Websites where users can generate content. Like Social Media. This was also the time framework that JavaScript became more popular. Rich web applications which make use of Ajax calls and webservices. JavaScript frameworks started to exist: jQuery, MooTools, YUI, Prototype, Ext JS...
  • Even though JavaScript got really popular, the language itself hadn’t been changed since 1999, where it used the ECMAScript version 3 standard. Later, a proposal for an ES4 was created, but this version got abandoned, and never made it into the browsers, because this specification tried to accomplish too much. The latest standard that all today's browsers use is ECMAScript 5, published in 2009.

    1997 - ECMAScript 1
    1998 - ECMAScript 2
    1999 - ECMAScript 3 ECMAScript 4 got abandoned 2009 - ECMAScript 5
    2015 - ECMAScript 6 ECMAScript 2015
    ? - ECMAScript 2016
  • Web browsers and Node.js are actively working on implementing ECMAScript 2015. However, not every browser or environment supports every feature yet. (This is also the reason, why for production applications, you should use a transpiler like Babel, to compile back to today’s JavaScript.)
  • That means basically no Internet Explorer. Although there are some features that will work on IE11.
  • Block scoping is how many C-based languages work, and the introduction of block-level declarations in ECMAScript 2015 is intended to bring that same flexibility (and uniformity) to JavaScript.
  • You can basically replace var with let to declare a variable, but limit the variable’s scope to only the current code block.

    (Since let declarations are not hoisted to the top of the enclosing block, you may want to always place let declarations first in the block, so that they are available to the entire block.)
  • When it’s not in the same block scope, it won’t throw an error, because it creates a new identifier in a new block scope.
  • Variables declared using const are considered constants, meaning their values cannot be changed once set.-
  • Be very careful when you are replacing variables to let or const. I see a lot of different opinions online. And people saying, oh just do a replace all in your editor. But IMO that’s really stupid. I assume here that nobody writes perfect code here. So by changing the scopes, you could break code. – A let declaration in your code, will also main that you can’t easily move blocks of code arround during refactoring/maintainance. (yeah you should put let’s in the the top of the function scope), but that’s not always the case. You can create deadzones.
    Also deubgging, and putting try/catch blocks around code, might not work right away.

    I read somewhere that somebody was saying, I renamed all my vars to const, unless I am sure that I want to change the binding. So that raises me a couple of remarks and questions. Does he create double as much const declarations instead of reusing let or var? (performance in memory), also the filesize of your files will be bigger, as const is more characters than var/let.
    Last, most important. How do you know that a value will never be changed in the future. / maintainability reasons.
  • Functions in JavaScript are unique in that they allow any number of parameters to be passed in. This allows you to define functions that can handle different numbers of parameters.
  • I love this.
  • See the below string of a long text. Note the plus characters to append the strings and variables. Note the double quotes. The single quotes, and the way how I escape double quotes.

    Note the double quotes, the plusses, and the way how we escape
  • You can compare this with Ext.Xtemplates.

    Note the backticks. I can use single and double quotes, and no need to combine strings.
  • Like member functions in Ext.XTemplate
  • I love this.

    https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en
  • Handy for when you are writing callbacks, that just need to return something simple, like an error.
  • Lexical this, (static this), this always refers to the parent scope. Even when it’s in a callback, and a different scope is returned.
  • The callback refers to the `me` variable of which the value is the expected object.

    Set interval is something asynchronous
  • Lexical this, (static this), this always refers to the parent scope. Even when it’s in a callback, and a different scope is returned.
  • I love this.

    https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en
  • You define the let declarations that you want to use later, and instead of assigning objects with the dot notation to it, you use write a destructered object.
    The first curly braces point to the root of the object, and the second pair, for the first level nested properties, and so on.

    Destructuring can also be used in combination with a return, so the return can give back multiple values.
  • You can do the same with arrays. Now it’s based on the index.
  • You have to get used to this new syntax. But it saves you from creating extra variables.

    https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  • Nice syntax, and you can still break, continue and return.
  • The red bar is a ES6 For of loop
    The yellow one is a ES5 for loop
    (and the green one btw a reversed ES5 for loop)
  • In a mixin, one object receives properties and methods from another object. We have Mixins in Ext JS too. Ext.Mixin.
  • The mixin() function iterates over the own properties of supplier and copies them onto receiver (a shallow copy, where object references are shared when property values are objects).This allows the receiver to gain new properties without inheritance.
  • Object.assign is a great new method, for coding mixin patterns. It’s a New function for assigning properties of one or more source objects onto a destination object.
    Assume you have 2 objects. You can assign one object to another. Here you can see that SomeObject becomes Observable.
  • Normally, the prototype of an object is already specified when the object is created, via either aconstructor or the Object.create() method. The idea that an object’s prototype remainsunchanged after instantiation was one of the biggest assumptions in JavaScript programmingthrough ECMAScript 5. ECMAScript 5 did add the Object.getPrototypeOf() method forretrieving the prototype of any given object, but it still lacked a standard way to change anobject’s prototype after instantiation.The `Object.setPrototypeOf()` method makes it possible to modify an object’s prototype after it’s already created.It accepts two arguments: the object whose prototype should change and the object that should become the first argument’s prototype. For example:
  • Lots of new methods, you should look into this!
  • The JavaScript engine doesn't start processing the event loop until the code after an async function has been executed. This means that JavaScript code is not multi-threaded even though it appears to be so.
  • Lots of new methods, you should look into this!
  • ECMAScript 2015 introduces JavaScript classes.However, it's still JavaScript, there is no real class system.Under the hood, ES2015 classes are not something that is radically new: They mainly provide more convenient syntax to create old-school constructor functions. You can see that if you use typeof classname, it will return "functionWhat's different tho, is that ES2015 classes can only be invoked with the "new" operator, not via a function call.
  • You might now static methods already from the Sencha class system.

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

    When would you use static methods? Ask yourself "does it make sense to call this method, even if no object has been constructed yet?" If so, it should definitely be static.
  • So ES2015 classes. – Under the hood, the type is still a JS function. But it improves the readability.
    And it’s much easier to extend, and create static classes.

    I will provide some more exampes in the slidedeck.
  • Spread Operators = An operator of 3 double dots, you put in front of a variable. For example in methods in allows you to pass in as many arguments as you want. The rest arguments will be part of an Array.

    Maps, Weakmaps, Sets and WeakSets.
    API for creating new data structures.

    For Of Loops iterators, which are pretty similar to For In loops for objects, that can loop through object properties

    Generators are simply subtypes of Iterators. They are a special kind of function that can be suspended and resumed, which is making a difference to iterators.


  • Cmd 6.5 updates our compiler but not the framework(s) obviously so you can use ES6 features of the language

    but "class" won't really get along with Ext.define classes in all cases
    so we "don't recommend” (or better to say, that’s not supported)

    An open source Java application that you can run from the command line.
    The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

    We use Closure Compiler to reduce the JS filesize, and to do JS code checking.
    ECMAScript 6 is now officially supported as an input language for the Closure Compiler. The Rhino parser has been replaced.
    Now it’s possible to transpile ES6 code.

    ECMAScript 6 is now officially supported as an input language for the Closure Compiler. You cannot use it as an output language yet; for now you need to transpile down to ES5 or ES3. If you find that the Closure Compiler does not support your favorite ES6 feature, you can file an issue, but please be aware that supporting the entire ES6 specification is a non-goal for the Closure Compiler. We currently avoid features that cannot be transpiled cleanly to ES5, and features that tend to lead to code which is difficult to analyze and typecheck.
  • if you need to use it... you owe it to yourself to check the output
    (you do not always need to use it, for example when you are creating Electron Apps ,which are based on a Node runtime, and thus have full ES6 support)

    transpilers have to produce ES5-equivalents which can be worse

    [for..of for example. that fellow is less perf then forEach()
    where each loop calls a fn you write - we avoid that practice in the framework
    I was hoping that for of would be great, but its actually shit.
    even non-transpiled it is much much slower than for-loop using length


    [6:52 PM] Don Griffin: Cmd uses Closure so this is helpful https://github.com/google/closure-compiler/wiki/ECMAScript6[6:52 PM] Don Griffin: we can use ES6 as an "output language" however[6:53 PM] Don Griffin: and we have our own (first in the world afaik) ES6 native compressor in Cmd 6.5 (replaces YUI)[6:53 PM] Don Griffin: https://github.com/mishoo/UglifyJS2/issues/448
  • You might have seen this in Don his “next” language talk.

    [Ywill be able to freely mix "class" vs "Ext.define
    Doing so, can hit the performance. and we'd need to measure on case-by-case basis to know which would be faster

    Will allow typescript support and also to use task managers such as Grunt or Gulp.
  • SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

    1. 1. Learn the Top 10 best ECMAScript 2015 features Lee Boonstra @ladysign
    2. 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. 3. Sit back, and relax
    4. 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. 5. History
    6. 6. 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+)
    7. 7. Sencha
    8. 8. 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
    9. 9. 10. Block Scoped Constructs
    10. 10. 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.
    11. 11. 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!"); } })();
    12. 12. 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!"); } })();
    13. 13. 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 foofoo = anon; })(); Get the code: http://bit.ly/2aAvlpS
    14. 14. 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)
    15. 15. 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
    16. 16. 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
    17. 17. 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 extjsNote, it doesn’t log , because let baz is only available within its own block scope.
    18. 18. 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";
    19. 19. 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
    20. 20. 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" }
    21. 21. 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.
    22. 22. 9. Default Parameters
    23. 23. 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 }
    24. 24. 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
    25. 25. Gotcha • Default parameters, can keep your function bodies clean, without re-defining and assigning values to inner variables.
    26. 26. 8. Template Literals
    27. 27. ES5 JavaScript Strings • JavaScript always lacked, when we are talking about Strings, especially when talking about: - Multiline strings - HTML escaping - Basic string formatting
    28. 28. 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.";
    29. 29. 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
    30. 30. 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
    31. 31. Gotcha • `Multiline Strings` FTW! • For easy mixing single and double quotes • String substitution (placeholders in Strings) • Tagged templates are like template functions in JS.
    32. 32. 7. Arrow Functions
    33. 33. 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
    34. 34. 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
    35. 35. 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
    36. 36. 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
    37. 37. 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); }
    38. 38. 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
    39. 39. 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.
    40. 40. 6. Destructuring Assignment
    41. 41. 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' } } }
    42. 42. 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
    43. 43. 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
    44. 44. 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
    45. 45. 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.
    46. 46. 5. for..of loop
    47. 47. 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]); }
    48. 48. 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; }
    49. 49. 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/
    50. 50. 4. New methods
    51. 51. 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?!!
    52. 52. 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
    53. 53. 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
    54. 54. More New Methods There are much more new methods available in ES2015. New methods on the following prototypes: • Object • Array • Number • Math
    55. 55. 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
    56. 56. 3. Promises
    57. 57. 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
    58. 58. 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.
    59. 59. 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);
    60. 60. 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; });
    61. 61. 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
    62. 62. 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.
    63. 63. 2. Classes
    64. 64. 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.
    65. 65. 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.
    66. 66. 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.
    67. 67. 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
    68. 68. 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 + "."; } };
    69. 69. 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; } };
    70. 70. 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
    71. 71. Static Methods Static methods are methods which can be accessed as classname.methodName() instead of classInstanceName.methodName().
    72. 72. 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."; } }
    73. 73. 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
    74. 74. Gotcha • ES2015 classes, syntactical sugar, the type is a function under the hood • Class syntax • Inheritance: ES2015 classes can extend classes • Static Classes
    75. 75. 1. Modules
    76. 76. 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.
    77. 77. 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.
    78. 78. 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 }
    79. 79. 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
    80. 80. 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.
    81. 81. More ECMAScript 2015
    82. 82. 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
    83. 83. ES2015 & Sencha
    84. 84. Sencha
    85. 85. 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
    86. 86. 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)
    87. 87. 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.
    88. 88. 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.
    89. 89. • 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

    ×