Part presentation, part debate about the future of the language while touching base on the current state of the industry with respect to ES6/ES2015, and the possibilities of using it today in web applications and frameworks, the different options, and the things to keep in mind. Additionally, we will do a walk-through on the new features included in ES7/ES2016 draft, and those that are being discussed for ES8/ES2017.

1. The future of Javascript
MiamiJS

2. @caridy

3. Evolution of JS
(21 years in the making)

4. TC39

5. TC39
Ecma Technical Committee 39

7. TC39 - The ECMAScript Committee

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

10. Ecma Standard Documents
Ecma-262 (ECMAScript Language) → github.com/tc39/ecma262
Ecma-402 (ECMAScript Internationalization API) → github.com/tc39/ecma402
Ecma-404 (JSON)

11. How is this implemented by browsers?

12. DOM Javascript

13. DOM Javascript
Blink V8
Google Chrome

15. Implementations of ECMAScript
SpiderMonkey → Servo (Mozilla)
V8 (Google)
Chakra (Microsoft)
JSCore (Apple)
...
Nashorn (Oracle)
…
https://en.wikipedia.org/wiki/ECMAScript#Implementations

16. What is the difference between those engines?

17. EcmaScript 1st to 5th Editions
ES1 = 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.

18. ES5 / 2009 - Compatibility Table
http://kangax.github.io/compat-table/es5/

19. ES2015 / 6th Edition
Features

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

21. ES6/ES2015 - Compatibility Table
http://kangax.github.io/compat-table/es6/

22. ES2016 / 7th Edition
Features

23. 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

24. 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

25. 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);

26. Evolving any programing
language is hard, evolving
JavaScript is harder

27. Naming vs Backward Compatible Web
Array.prototype.includes
vs
Array.prototype.contains

29. ES2017 / 8th Edition
Drafts

30. New Proposals

31. 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.

32. 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'

33. 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

34. Trailing Function Commas

35. Rest Properties
Spread Properties

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

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

38. Class Property Declarations
class MyClass {
myProp = 12;
static myStaticProp = 42;
constructor() {
console.log(this.myProp); // Prints '12'
console.log(MyClass.myStaticProp); // Prints '42'
}
}

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

40. 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"

41. 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"

42. EWM

43. EWM
Extensible Web Manifesto

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

45. AMA Time
Ask Me Anything!

46. How can I use ES6/ES2015 today?

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

48. 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)

49. Can I use type annotations in JavaScript?

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