My part of the JSConf.us 2011 @jashkenas/@BrendanEich session

1. CoffeeScript, ES.next, the JS Language Lab
mozilla
1
Wednesday, May 4, 2011

2. What you should expect in the Future
mozilla
2
Wednesday, May 4, 2011

3. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
mozilla
2
Wednesday, May 4, 2011

4. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
• “Leaders can imagine a world that others don’t. Like Thomas Jefferson or that
kid in the Terminator movies.” - Finn, Glee
mozilla
2
Wednesday, May 4, 2011

5. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
• “Leaders can imagine a world that others don’t. Like Thomas Jefferson or that
kid in the Terminator movies.” - Finn, Glee
• How to invent the future:
mozilla
2
Wednesday, May 4, 2011

6. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
• “Leaders can imagine a world that others don’t. Like Thomas Jefferson or that
kid in the Terminator movies.” - Finn, Glee
• How to invent the future:
• CoffeeScript (and all the languages targeting JS)
mozilla
2
Wednesday, May 4, 2011

7. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
• “Leaders can imagine a world that others don’t. Like Thomas Jefferson or that
kid in the Terminator movies.” - Finn, Glee
• How to invent the future:
• CoffeeScript (and all the languages targeting JS)
• Compile ES.next -> JS of today with a Harmonizr
mozilla
2
Wednesday, May 4, 2011

8. What you should expect in the Future
• “No fate but what we make.” - Sarah Connor, T2
• “Leaders can imagine a world that others don’t. Like Thomas Jefferson or that
kid in the Terminator movies.” - Finn, Glee
• How to invent the future:
• CoffeeScript (and all the languages targeting JS)
• Compile ES.next -> JS of today with a Harmonizr
• Keep iterating...
mozilla
2
Wednesday, May 4, 2011

9. The Harmony goals
mozilla
3
Wednesday, May 4, 2011

10. The Harmony goals
• Be a better language for writing:
mozilla
3
Wednesday, May 4, 2011

11. The Harmony goals
• Be a better language for writing:
• complex applications
mozilla
3
Wednesday, May 4, 2011

12. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
mozilla
3
Wednesday, May 4, 2011

13. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
mozilla
3
Wednesday, May 4, 2011

14. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
• Better tests, if not a testable (executable) specification
mozilla
3
Wednesday, May 4, 2011

15. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
• Better tests, if not a testable (executable) specification
• Adopt de facto standards where possible
mozilla
3
Wednesday, May 4, 2011

16. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
• Better tests, if not a testable (executable) specification
• Adopt de facto standards where possible
• Keep versioning as simple and linear as possible
mozilla
3
Wednesday, May 4, 2011

17. The Harmony goals
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
• Better tests, if not a testable (executable) specification
• Adopt de facto standards where possible
• Keep versioning as simple and linear as possible
• Support a statically verifiable, object-capability secure subset mozilla
3
Wednesday, May 4, 2011

18. Approved for ES.next
mozilla
4
Wednesday, May 4, 2011

19. Approved for ES.next
• let, const, function in block scope
mozilla
4
Wednesday, May 4, 2011

20. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
mozilla
4
Wednesday, May 4, 2011

21. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
mozilla
4
Wednesday, May 4, 2011

22. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
• rest, spread: function g(i, j, ...r) { return r.slice(i, j); }
let a = [0,1,2,3],
o = new any_constructor(...a)
mozilla
4
Wednesday, May 4, 2011

23. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
• rest, spread: function g(i, j, ...r) { return r.slice(i, j); }
let a = [0,1,2,3],
o = new any_constructor(...a)
• proxies, weak maps: Proxy.create(handler, proto), new WeakMap
mozilla
4
Wednesday, May 4, 2011

24. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
• rest, spread: function g(i, j, ...r) { return r.slice(i, j); }
let a = [0,1,2,3],
o = new any_constructor(...a)
• proxies, weak maps: Proxy.create(handler, proto), new WeakMap
• modules: module M { export function fast_sin(x) {...} }
mozilla
4
Wednesday, May 4, 2011

25. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
• rest, spread: function g(i, j, ...r) { return r.slice(i, j); }
let a = [0,1,2,3],
o = new any_constructor(...a)
• proxies, weak maps: Proxy.create(handler, proto), new WeakMap
• modules: module M { export function fast_sin(x) {...} }
• iterators, generators: function* gen() { yield 1; yield 2; }
mozilla
4
Wednesday, May 4, 2011

26. Approved for ES.next
• let, const, function in block scope
• destructuring: let {x, y} = pt; let [s, v, o] = triple()
• parameter default values: function f(x, y=1, z=0) {...}
• rest, spread: function g(i, j, ...r) { return r.slice(i, j); }
let a = [0,1,2,3],
o = new any_constructor(...a)
• proxies, weak maps: Proxy.create(handler, proto), new WeakMap
• modules: module M { export function fast_sin(x) {...} }
• iterators, generators: function* gen() { yield 1; yield 2; }
mozilla
• comprehensions: return [a+b for (a in A) for (b in B)]
4
Wednesday, May 4, 2011

27. Yet more approved for ES.next
mozilla
5
Wednesday, May 4, 2011

28. Yet more approved for ES.next
• Binary data:
mozilla
5
Wednesday, May 4, 2011

29. Yet more approved for ES.next
• Binary data:
• const Point2D = new StructType({ x: uint32, y: uint32 }),
Color = new StructType({ r: uint8, g: uint8,
b: uint8 }),
Pixel = new StructType({ point: Point2D,
color: Color });
mozilla
5
Wednesday, May 4, 2011

30. Yet more approved for ES.next
• Binary data:
• const Point2D = new StructType({ x: uint32, y: uint32 }),
Color = new StructType({ r: uint8, g: uint8,
b: uint8 }),
Pixel = new StructType({ point: Point2D,
color: Color });
• const Triangle = new ArrayType(Pixel, 3);
mozilla
5
Wednesday, May 4, 2011

31. Yet more approved for ES.next
• Binary data:
• const Point2D = new StructType({ x: uint32, y: uint32 }),
Color = new StructType({ r: uint8, g: uint8,
b: uint8 }),
Pixel = new StructType({ point: Point2D,
color: Color });
• const Triangle = new ArrayType(Pixel, 3);
• new Triangle([{ point: { x: 0, y: 0 },
color: { r: 255, g: 255, b: 255 } },
{ point: { x: 5, y: 5 },
color: { r: 128, g: 0, b: 0 } },
{ point: { x: 10, y: 0 },
color: { r: 0, g: 0, b: 128 } }]);
mozilla
5
Wednesday, May 4, 2011

32. Hot, but not yet in Harmony
mozilla
6
Wednesday, May 4, 2011

33. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
mozilla
6
Wednesday, May 4, 2011

34. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
• Just like CoffeeScript: let identity = (x) -> x
mozilla
6
Wednesday, May 4, 2011

35. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
• Just like CoffeeScript: let identity = (x) -> x
• Expression body: const square = (x) -> (x * x)
mozilla
6
Wednesday, May 4, 2011

36. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
• Just like CoffeeScript: let identity = (x) -> x
• Expression body: const square = (x) -> (x * x)
• Statement body: let countUsed = (str) -> {
if (str in usedWords)
usedWords[str]++;
else
usedWords[str] = 1;
}
mozilla
6
Wednesday, May 4, 2011

37. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
• Just like CoffeeScript: let identity = (x) -> x
• Expression body: const square = (x) -> (x * x)
• Statement body: let countUsed = (str) -> {
if (str in usedWords)
usedWords[str]++;
else
usedWords[str] = 1;
}
• Fat arrow too: callback = (msg) => ( this.vmail.push(msg) )
mozilla
6
Wednesday, May 4, 2011

38. Hot, but not yet in Harmony
• Arrow function syntax, instead of λ, ƒ, or # (want to save # for later)
• Just like CoffeeScript: let identity = (x) -> x
• Expression body: const square = (x) -> (x * x)
• Statement body: let countUsed = (str) -> {
if (str in usedWords)
usedWords[str]++;
else
usedWords[str] = 1;
}
• Fat arrow too: callback = (msg) => ( this.vmail.push(msg) )
• Binding forms: let f() -> “writable”
const K() -> “readonly” mozilla
6
Wednesday, May 4, 2011

39. What else?
mozilla
7
Wednesday, May 4, 2011

40. What else?
• CoffeeScript classes, for prototypal inheritance sugar
• Or a different classes as closure pattern sugar proposal?
• Or (and this is somewhat Coffee-like) extended object initialisers?
mozilla
7
Wednesday, May 4, 2011

41. What else?
• CoffeeScript classes, for prototypal inheritance sugar
• Or a different classes as closure pattern sugar proposal?
• Or (and this is somewhat Coffee-like) extended object initialisers?
• Coffee’s @foo for this.foo
• Or some private names or “soft fields” @ usage?
mozilla
7
Wednesday, May 4, 2011

42. What else?
• CoffeeScript classes, for prototypal inheritance sugar
• Or a different classes as closure pattern sugar proposal?
• Or (and this is somewhat Coffee-like) extended object initialisers?
• Coffee’s @foo for this.foo
• Or some private names or “soft fields” @ usage?
• Paren-free syntax: if x > y return x
while i < n { a.push(i++); }
mozilla
7
Wednesday, May 4, 2011

43. What else?
• CoffeeScript classes, for prototypal inheritance sugar
• Or a different classes as closure pattern sugar proposal?
• Or (and this is somewhat Coffee-like) extended object initialisers?
• Coffee’s @foo for this.foo
• Or some private names or “soft fields” @ usage?
• Paren-free syntax: if x > y return x
while i < n { a.push(i++); }
• More operators: ?? ??= div mod divmod is isnt
mozilla
7
Wednesday, May 4, 2011

44. What’s going on here?
• Remember these Harmony goals:
• Be a better language for writing:
• complex applications
• libraries (including the DOM) shared by those applications
• code generators targeting the new edition
• Adopt de facto standards where possible
mozilla
8
Wednesday, May 4, 2011

45. Word of the day: Transpiler
mozilla
9
Wednesday, May 4, 2011

46. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
mozilla
9
Wednesday, May 4, 2011

47. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
mozilla
9
Wednesday, May 4, 2011

48. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
mozilla
9
Wednesday, May 4, 2011

49. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
• CoffeeScript, many others
mozilla
9
Wednesday, May 4, 2011

50. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
• CoffeeScript, many others
• Dave Herman’s module loaders for language polyfills
mozilla
9
Wednesday, May 4, 2011

51. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
• CoffeeScript, many others
• Dave Herman’s module loaders for language polyfills
• Debuggable primary source support coming in Firefox
mozilla
9
Wednesday, May 4, 2011

52. Word of the day: Transpiler
A transcompiler (also known as transpiler) is a special
compiler that translates the source code of a programming
language into the source code of another programming
language, e.g. from Pascal to C.
en.wikipedia.org/wiki/Transpiler
• CoffeeScript, many others
• Dave Herman’s module loaders for language polyfills
• Debuggable primary source support coming in Firefox
mozilla
9
Wednesday, May 4, 2011

53. Back to Jeremy...
mozilla
10
Wednesday, May 4, 2011