miamijs - the future of javascript
TRANSCRIPT
![Page 1: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/1.jpg)
The future of JavascriptMiamiJS
![Page 2: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/2.jpg)
@caridy
![Page 3: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/3.jpg)
Evolution of JS (21 years in the making)
![Page 4: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/4.jpg)
TC39
![Page 5: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/5.jpg)
TC39Ecma Technical Committee 39
![Page 6: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/6.jpg)
![Page 7: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/7.jpg)
TC39 - The ECMAScript Committee
![Page 8: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/8.jpg)
What exactly is ECMAScript?How is this related to JavaScript?
![Page 9: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/9.jpg)
![Page 10: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/10.jpg)
Ecma Standard Documents
Ecma-262 (ECMAScript Language) → github.com/tc39/ecma262
Ecma-402 (ECMAScript Internationalization API) → github.com/tc39/ecma402
Ecma-404 (JSON)
![Page 11: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/11.jpg)
How is this implemented by browsers?
![Page 12: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/12.jpg)
DOM Javascript
![Page 13: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/13.jpg)
DOM JavascriptBlink V8
Google Chrome
![Page 14: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/14.jpg)
![Page 15: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/15.jpg)
Implementations of ECMAScriptSpiderMonkey → Servo (Mozilla)
V8 (Google)
Chakra (Microsoft)
JSCore (Apple)
...
Nashorn (Oracle)
…
https://en.wikipedia.org/wiki/ECMAScript#Implementations
![Page 16: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/16.jpg)
What is the difference between those engines?
![Page 17: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/17.jpg)
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.⇶
![Page 18: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/18.jpg)
ES5 / 2009 - Compatibility Table
http://kangax.github.io/compat-table/es5/
![Page 19: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/19.jpg)
ES2015 / 6th EditionFeatures
![Page 20: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/20.jpg)
EcmaScript 5th Edition (2015)ES6 = ES2015 = ES6 Harmony classes, modules, iterators, for/of loops, generators, arrow functions, collections, promises,⇶
reflection, proxies, etc.
![Page 21: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/21.jpg)
ES6/ES2015 - Compatibility Table
http://kangax.github.io/compat-table/es6/
![Page 22: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/22.jpg)
ES2016 / 7th EditionFeatures
![Page 23: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/23.jpg)
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
![Page 24: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/24.jpg)
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
![Page 25: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/25.jpg)
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);
![Page 26: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/26.jpg)
Evolving any programing language is hard, evolving
JavaScript is harder
![Page 27: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/27.jpg)
Naming vs Backward Compatible Web
Array.prototype.includes
vs
Array.prototype.contains
![Page 28: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/28.jpg)
1
2
3
![Page 29: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/29.jpg)
ES2017 / 8th EditionDrafts
![Page 30: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/30.jpg)
New Proposals
![Page 31: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/31.jpg)
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.
![Page 32: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/32.jpg)
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'
![Page 33: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/33.jpg)
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
![Page 34: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/34.jpg)
Trailing Function Commas
![Page 35: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/35.jpg)
Rest Properties
Spread Properties
![Page 36: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/36.jpg)
Shared Memory and Atomicsvar w = new Worker("myworker.js")var sab = new SharedArrayBuffer(1024); // 1KiB shared memoryw.postMessage(sab, [sab])
![Page 37: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/37.jpg)
Decoratorsclass Person { @readonly name() { return `${this.first} ${this.last}` }}
@isTestable(true)class MyClass { }
function isTestable(value) { return function decorator(target) { target.isTestable = value; }}
![Page 38: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/38.jpg)
Class Property Declarationsclass MyClass {
myProp = 12; static myStaticProp = 42;
constructor() { console.log(this.myProp); // Prints '12' console.log(MyClass.myStaticProp); // Prints '42' }
}
![Page 39: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/39.jpg)
System.global
Example of what we are seeing out there today to resolve the global reference:
![Page 40: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/40.jpg)
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"
![Page 41: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/41.jpg)
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"
![Page 42: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/42.jpg)
EWM
![Page 43: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/43.jpg)
EWMExtensible Web Manifesto
![Page 44: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/44.jpg)
Contributing to EcmaScript
We follow the “Champions” model
Annual “Train” Release
github.com/tc39
![Page 45: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/45.jpg)
AMA Time
Ask Me Anything!
![Page 46: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/46.jpg)
How can I use ES6/ES2015 today?
![Page 47: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/47.jpg)
Transpilation of EcmaScript
Closure CompilerBy Googlegithub.com/google/closure-compiler
Sponsored By Facebookgithub.com/babel/babel
![Page 48: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/48.jpg)
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)
![Page 49: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/49.jpg)
Can I use type annotations in JavaScript?
![Page 50: MiamiJS - The Future of JavaScript](https://reader030.vdocuments.net/reader030/viewer/2022032711/5871ac2a1a28abda6a8b5a2b/html5/thumbnails/50.jpg)
Type Annotations in EcmaScript
JavaScript that scales
By Microsofttypescriptlang.org/
Sponsored By Facebookflowtype.org/