MiamiJS - The Future of JavaScript

The future of Javascript
MiamiJS

Evolution of JS
(21 years in the making)

TC39
Ecma 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
Blink V8
Google Chrome

Implementations of ECMAScript
SpiderMonkey → 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 Editions
ES1 = EcmaScript First Edition (1996-1997)
ES3 = EcmaScript 3rd Edition (1999)
⇶ function expressions, RegExp, try/catch/ﬁnally, 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/

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/

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 Operator
Usage
// 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
Python
math.pow(x, y)
x ** y
CoffeeScript
x ** y
Ruby
x ** y
Perl
x ** 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

Next Edition of EcmaScript
ES8 = 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 Padding
String.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'

SIMD
Single 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

Rest Properties
Spread Properties

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

Decorators
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
@isTestable(true)
class MyClass { }
function isTestable(value) {
return function decorator(target) {
target.isTestable = value;
}
}

Class Property Declarations
class 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.RelativeTime
let 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.PluralRules
let 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"

Contributing to EcmaScript
We follow the “Champions” model
Annual “Train” Release
github.com/tc39

How can I use ES6/ES2015 today?

Transpilation of EcmaScript
Closure Compiler
By Google
github.com/google/closure-compiler
Sponsored By Facebook
github.com/babel/babel

Polyfills for EcmaScript
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
Polyfill Service By Financial Times
cdn.polyfill.io/
ES6 Shim (npm install es6-shim)

Can I use type annotations in JavaScript?

Type Annotations in EcmaScript
JavaScript that scales
By Microsoft
typescriptlang.org/
Sponsored By Facebook
flowtype.org/

MiamiJS - The Future of JavaScript

More Related Content

What's hot (20)

Similar to MiamiJS - The Future of JavaScript (20)

More from Caridy Patino (12)

Recently uploaded (20)

MiamiJS - The Future of JavaScript

Editor's Notes