MiamiJS - The Future of JavaScript

The future of JavascriptMiamiJS

@caridy

Evolution of JS (21 years in the making)

TC39

TC39Ecma Technical Committee 39

TC39 - The ECMAScript Committee

What exactly is ECMAScript?How is this related to JavaScript?

Ecma Standard Documents

Ecma-262 (ECMAScript Language) → github.com/tc39/ecma262

Ecma-402 (ECMAScript Internationalization API) → github.com/tc39/ecma402

Ecma-404 (JSON)

How is this implemented by browsers?

DOM Javascript

DOM JavascriptBlink V8

Google Chrome

Implementations of ECMAScriptSpiderMonkey → Servo (Mozilla)

V8 (Google)

Chakra (Microsoft)

JSCore (Apple)

...

Nashorn (Oracle)

…

https://en.wikipedia.org/wiki/ECMAScript#Implementations

What is the difference between those engines?

EcmaScript 1st to 5th EditionsES1 = EcmaScript First Edition (1996-1997)

ES3 = EcmaScript 3rd Edition (1999) function expressions, RegExp, try/catch/finally, switch, do-while⇶

ES4 = RIP

ES5 = EcmaScript 5th Edition (2009) "strict mode", getters and setters, JSON, reflection on object properties.⇶

ES5 / 2009 - Compatibility Table

http://kangax.github.io/compat-table/es5/

ES2015 / 6th EditionFeatures

EcmaScript 5th Edition (2015)ES6 = ES2015 = ES6 Harmony classes, modules, iterators, for/of loops, generators, arrow functions, collections, promises,⇶

reflection, proxies, etc.

ES6/ES2015 - Compatibility Table

http://kangax.github.io/compat-table/es6/

ES2016 / 7th EditionFeatures

ES7 = ES2016 (Submitted on March 1st, approved by TC39 last week, pending to be signed) Array includes, exponential operator, and ⇶ moving editorial process to github

Exponentiation OperatorUsage

// x ** y

let squared = 2 ** 2;// same as: 2 * 2

let cubed = 2 ** 3;// same as: 2 * 2 * 2// x **= y

let a = 2;a **= 2;// same as: a = a * a;

let b = 3;b **= 3;// same as: b = b * b * b;

Prior Art

Pythonmath.pow(x, y)x ** y

CoffeeScriptx ** y

Rubyx ** y

Perlx ** y

Lua, Basic, MATLAB, etc.x ^ y

Array.prototype.includes

Illustrative Examples

assert([1, 2, 3].includes(2) === true);

assert([1, 2, 3].includes(4) === false);

assert([1, 2, NaN].includes(NaN) === true);

assert([1, 2, -0].includes(+0) === true);

assert([1, 2, +0].includes(-0) === true);

assert(["a", "b", "c"].includes("a") === true);

assert(["a", "b", "c"].includes("a", 1) === false);

Evolving any programing language is hard, evolving

JavaScript is harder

Naming vs Backward Compatible Web

Array.prototype.includes

vs

Array.prototype.contains

1

2

3

ES2017 / 8th EditionDrafts

New Proposals

Next Edition of EcmaScriptES8 = ES2017 (Current draft) ⇶ SIMD, async functions, Object.values/Object.entries, string padding, trailing commas in function parameter lists and calls, rest/spread properties, shared memory and atomics, class and property decorators, class property declarations, System.global, asynchronous iterators, realms and frozen realms, etc.

Ecma-402 4th Edition (Current draft) *.formatToParts, ⇶ Intl.PluralRules, Intl.ListFormat, Intl.DurationFormat, Intl.UnitFormat, Intl.RelativeTimeFormat, etc.

String PaddingString.prototype.padStart( maxLength [ , fillString ] )

String.prototype.padEnd( maxLength [ , fillString ] )

Example:

> "blahblah".padStart(10, "foo")'ooblahblah'

> "blahblah".padStart(11, "foo")'fooblahblah'

> "blahblah".padEnd(10, "foo")'blahblahfo'

> "blahblah".padEnd(11, "foo")'blahblahfoo'

SIMDSingle Instruction Single Data (SISD)

Single Instruction Multiple Data (SIMD)

1.0 2.0 3.0

1.0

3.0

5.0

7.0

2.0

4.0

6.0

8.0

3.0

7.0

11.0

15.0

Vector Processor

Trailing Function Commas

Rest Properties

Spread Properties

Shared Memory and Atomicsvar w = new Worker("myworker.js")var sab = new SharedArrayBuffer(1024); // 1KiB shared memoryw.postMessage(sab, [sab])

Decoratorsclass Person { @readonly name() { return `${this.first} ${this.last}` }}

@isTestable(true)class MyClass { }

function isTestable(value) { return function decorator(target) { target.isTestable = value; }}

Class Property Declarationsclass MyClass {

myProp = 12; static myStaticProp = 42;

constructor() { console.log(this.myProp); // Prints '12' console.log(MyClass.myStaticProp); // Prints '42' }

}

System.global

Example of what we are seeing out there today to resolve the global reference:

Intl.RelativeTimelet a = new Intl.RelativeTimeFormat("en");a.format(Date.now()); // yields "now"a.format(Date.now() - 1000 * 60 * 60 * 25)); // yields "yesterday"a.format(Date.now() - 1000 * 60 * 60 * 50)); // yields "2 days ago"

Intl.PluralRuleslet o = new Intl.PluralRules("en");o.select(0); // yields "other"o.select(1); // yields "one"o.select(1.5); // yields "other"o.select(2); // yields "other"

EWM

EWMExtensible Web Manifesto

Contributing to EcmaScript

We follow the “Champions” model

Annual “Train” Release

github.com/tc39

AMA Time

Ask Me Anything!

How can I use ES6/ES2015 today?

Transpilation of EcmaScript

Closure CompilerBy Googlegithub.com/google/closure-compiler

Sponsored By Facebookgithub.com/babel/babel

Polyfills for EcmaScript

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>Polyfill Service By Financial Timescdn.polyfill.io/

ES6 Shim (npm install es6-shim)

Can I use type annotations in JavaScript?

Type Annotations in EcmaScript

JavaScript that scales

By Microsofttypescriptlang.org/

Sponsored By Facebookflowtype.org/