Upload
caridy-patino
View
468
Download
1
Embed Size (px)
Citation preview
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/