Upload
milosz-sobczak
View
471
Download
2
Embed Size (px)
Citation preview
ECMASCRIPT 2015BEST OF NEW FEATURES().
by / at Miłosz Sobczak @miloszsobczak
Main example source code can be found at github.com/miloszsobczak/es6-rewrite.
CLASSES
CLASSES DEFINITIONECMASCRIPT 5 OLD WAY
var Developer = function Developer(name, experience, languages) { this.name(name || ''); this.experience(experience || 0); this.languages(languages || []);}
CLASSES DEFINITIONECMASCRIPT 2015 (6)
class Developer { constructor (name, experience, languages) { this.name = name; this.experience = experience; this.languages = languages; }}
CLASSES INHERITANCEECMASCRIPT 5 OLD WAY
var PixersDeveloper = function PixersDeveloper (name, experience, languages, awesomeness Developer.call(this, name, experience, languages); this.awesomeness(awesomeness);
this.worklog = {};};PixersDeveloper.prototype = Object.create(Developer.prototype);PixersDeveloper.prototype.constructor = PixersDeveloper;PixersDeveloper.prototype.default = function () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000)}
CLASSES INHERITANCEECMASCRIPT 2015 (6)
class PixersDeveloper extends Developer { constructor (name, experience, languages, awesomeness) { super(name, experience, languages); this.awesomeness = awesomeness;
this.Worklog = new Map(); }}static default () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000);}
CLASSES SUPER ACCESSECMASCRIPT 5 OLD WAY
//base class constructorDeveloper.call(this, name, experience, languages);//method accessDeveloper.prototype.method.call(this);
CLASSES SUPER ACCESSECMASCRIPT 2015 (6)
//base class constructorsuper(name, experience, languages);//method accesssuper.method()
CLASSES STATIC FUNCTIONECMASCRIPT 5 OLD WAY
PixersDeveloper.prototype.default = function () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000)}//usagevar Mieszkos = PixersDeveloper.default();
CLASSES STATIC FUNCTIONECMASCRIPT 2015 (6)
static default () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000);}//usagevar Mieszkos = PixersDeveloper.default();
CLASSES SETTER/GETTERECMASCRIPT 5 OLD WAY
Described in ecmascript 5.0 (not in 5.1). PixersDeveloper.prototype.awesomeness = function (value) { if (typeof value === 'number') { this._awesomeness = parseInt(value, 10); } return this._awesomeness;}//setter usagethis.awesomeness(10);//getter usagevar dev_awesomness = this.awesomeness();
CLASSES SETTER/GETTERECMASCRIPT 2015 (6)
set awesomeness (value = 0) { if (typeof value === 'number') { this._awesomeness = parseInt(value, 10); }}get awesomeness () { return this._awesomeness;}//setter usagethis.awesomeness = 10;//getter usagevar dev_awesomness = this.awesomeness;
CLASSES EXTENDING ECMASCRIPT 5 OLD WAY
BUILT-INS
function MyArray(/*arguments*/) { var arr = [];
Array.prototype.push.apply(arr, arguments); copyOwnPropertiesFrom(arr, MyArray.methods); return arr;}var a = new MyArray();a instanceof MyArray; //falsea instanceof Array; //true
CLASSES EXTENDING BUILT-INSECMASCRIPT 2015 (6)
class MyArray extends Array { constructor(...args) { super(args); }}//ex below still gives an error, but it shuldn'tclass myMath extends Math {}
MODULESAlmost* native module system.
MODULES DEFINITIONREQUIREJS OLD? WAY
define('countPoints', function (){ return function countPoints (langLength, exp) { var pointPerLanguage = 2, pointPerExp = 4;
return parseInt(langLength * pointPerLanguage, 10) + parseInt(exp * pointPerExp, 10); }});//usagerequire(['countPoints'], function(countPoints) { var points = countPoints(2, 5);});
MODULES DEFINITIONECMASCRIPT 2015 (6)
export function countPoints (langLength = 0, exp = 0) { let pointPerLanguage = 2, pointPerExp = 4;
return parseInt(langLength * pointPerLanguage, 10) + parseInt(exp * pointPerExp, 10);}//usageimport { countPoints } from 'lib/countPoints.js';points = countPoints(2, 5);
MODULES DEFINITIONECMASCRIPT 2015 (6) - CAVEATS
IT'S NOT GREAT! (FOR NOW) :)
Support by Mozilla
MODULES DEFINITIONECMASCRIPT 2015 (6) - CAVEATS
WORKAROUNDS
+ + Browersify babelify Node.js //basic gulp configurationvar fs = require('fs'), browserify = require('browserify');browserify('./script.js') .transform('babelify') .bundle() .pipe(fs.createWriteStream('bundle.js'));
//definemodule.exports = function countPoints (langLength = 0, exp = 0) {...}//useimport countPoints from 'lib/countPoints.js';
BLOCKS && SCOPE VARIABLES
BLOCKS && SCOPE VARIABLES:CONSTS
ECMASCRIPT 5 OLD WAY
//simple and cross-browser, but still writablevar PI = 3.141593;
//or complicatated and not writableObject.defineProperty(window, 'PI', { value: 3.141593, enumerable: true, writable: false, configurable: false});
BLOCKS && SCOPE VARIABLES:CONSTS
ECMASCRIPT 2015 (6) const PI = 3.141593;const PI = 1; //Uncaught TypeError: Identifier 'PI' has already been declarevar PI = 2; //3.141593
BLOCKS && SCOPE VARIABLES: LETECMASCRIPT 5 OLD WAY
var a = 2;
(function own_scope(){ var a = 3; console.log( a ); // 3})();
console.log( a ); // 2
BLOCKS && SCOPE VARIABLES: LETECMASCRIPT 2015 (6)
var a = 2;
{ let a = 3; console.log( a ); // 3}
console.log( a ); // 2
ARROW FUNCTIONS =>
ARROW FUNCTIONS: DEFINITIONECMASCRIPT 5 OLD WAY
return (function anonymus(points) { var points = points || 0; //do something with points})(countPoints(this.languages().length, this.experience()));
ARROW FUNCTIONS: DEFINITIONECMASCRIPT 2015 (6)
return ((points = 0) => { //do something with points})(countPoints(this.languages.length, this.experience));
ARROW FUNCTIONS: CURRENTOBJECT CONTEXTECMASCRIPT 5 OLD WAY
var self = this;return (function anonymus(points) { var points = points || 0; //do something with points return self.name() + ' is a Developer';})(countPoints(this.languages().length, this.experience()));
ARROW FUNCTIONS: CURRENTOBJECT CONTEXTECMASCRIPT 2015 (6)
return ((points = 0) => { //do something with points return this.name + ' is a Developer';})(countPoints(this.languages.length, this.experience));
`${TEMPLATE LITERALS}`
TEMPLATE LITERALS: STRINGINTERPOLATIONECMASCRIPT 5 OLD WAY
return self.name() + ' is a ' + degree + ' Developer';
TEMPLATE LITERALS: STRINGINTERPOLATION
ECMASCRIPT 2015 (6) return ̀${this.name} is a ${degree} Developer̀;
NEW DATA STRUCTURE TYPES1. Key-value collection
MapWeakMap (object as a key)
2. Values collectionSetWeakSet (object as a key)
NEW DATA STRUCTURE TYPES: MAPECMASCRIPT 5 OLD WAY
this.worklog = {}; //defined in costructor
PixersDeveloper.prototype.setWork = function (taskId, timeInMins) { var self = this; if (this.worklog.hasOwnProperty(taskId) === false) { return this.worklog[taskId] = timeInMins; } this.worklog[taskId] = (function () { return self.getWorkById(taskId) + timeInMins; })();}
NEW DATA STRUCTURE TYPES: MAPECMASCRIPT 2015 (6)
this.Worklog = new Map(); //defined in costructor
setWork (taskId, timeInMins) { if (this.Worklog.has(taskId) === false) { return this.Worklog.set(taskId, timeInMins); } this.Worklog.set(taskId, (() => { let minutes = this.Worklog.get(taskId); return minutes + timeInMins; })());}
THERE IS WAY MUCH MORE...New built-ins methods...New literals (binary for example)Symbol typeNative Promise...
ECMAScript 5 6 7 intl non-standard compatibility table Fork 201by kangax & webbedspace Gratipay
Please note that some of these tests represent existence, not functionality or full conformance. Sort by number of features? Show obsolete platforms?
unstable platforms? V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other
Minor difference (1 point) Useful feature (2 points) Significant feature (4 points) Landmark feature (8 points)⬤ ⬤ ⬤ ⬤
Compilers/polyfills
►Feature nameCurrentbrowser
74%
Traceur
59%
Babel +
core-js[1]
71%
Closure
30%
JSX[2]
19%
Type-Script
+core-js
52%
es6-shim
17%
IE 10
7%
IE 11
16%
Edge
12[3]
63%
Edge
13[3]
84%
FF 38ESR
66%
FF 42
Optimisation
►proper tail calls (tail call optimisation)⬤§ 0/2 0/2 1/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2
Syntax
►default function parameters⬤§ 0/7 4/7 6/7 4/7 0/7 4/7 0/7 0/7 0/7 0/7 0/7 3/7 3/7
►rest parameters⬤§ 5/5 4/5 4/5 2/5 3/5 3/5 0/5 0/5 0/5 5/5 5/5 4/5 4/5
►spread (...) operator⬤§ 15/15 15/15 13/15 3/15 2/15 4/15 0/15 0/15 0/15 12/15 15/15 15/15 15/15
►object literal extensions⬤§ 6/6 6/6 6/6 4/6 5/6 6/6 0/6 0/6 0/6 6/6 6/6 6/6 6/6
►for..of loops⬤§ 7/9 9/9 9/9 6/9 2/9 3/9 0/9 0/9 0/9 6/9 7/9 7/9 7/9
►octal and binary literals⬤§ 4/4 2/4 4/4 2/4 0/4 4/4 2/4 0/4 0/4 4/4 4/4 4/4 4/4
►template strings⬤§ 5/5 4/5 4/5 3/5 4/5 3/5 0/5 0/5 0/5 4/5 5/5 5/5 5/5
►RegExp "y" and "u" flags⬤§ 0/4 2/4 2/4 0/4 0/4 0/4 0/4 0/4 0/4 2/4 4/4 2/4 2/4
►destructuring⬤§ 0/37 31/37 34/37 21/37 16/37 26/37 0/37 0/37 0/37 0/37 0/37 28/37 29/37
►Unicode code point escapes⬤§ 2/2 1/2 1/2 1/2 0/2 1/2 0/2 0/2 0/2 2/2 2/2 0/2 1/2
►new.target⬤§ 2/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 1/2 0/2 2/2
Bindings
►const⬤§ 5/8 6/8 6/8 6/8 0/8 6/8 0/8 0/8 8/8 8/8 8/8 8/8 8/8
►let⬤§ 5/10 8/10 8/10 8/10 0/10 7/10 0/10 0/10 8/10 8/10 8/10 0/10 0/10
KANGAX.GITHUB.IO/COMPAT-TABLE/ES6
GREAT RESOURCESexploringjs.comes6-features.orgdeveloper.mozilla.orgYou Don't Know JS: ES6 & Beyond