By Daniel Ehrenberg. JavaScript decorators were created in 2014 as a collaboration among the JavaScript ecosystem, and you've been able to use them in TypeScript and Babel. But they didn't make it into the JavaScript standard yet: not ES6, or any of the later versions, so far. We're working on standardizing decorators in TC39, the JavaScript standards committee, but some changes are required from the initial version. In this talk, Daniel will explain what TC39 is and how we work. We'll look at some newer language feature proposals, such as Temporal and immutable records and tuples, and follow how decorators have been proceeding through the TC39 process, including why and how they're changing. TC39 could use your help in moving JavaScript forward. (c) Full Stack Fest 2019 Sitges, Barcelona September 4—6, 2019 https://2019.fullstackfest.com/

1. Standardizing JavaScript
Decorators in TC39
Daniel Ehrenberg
Igalia, in partnership with Bloomberg
FullStackFest 2019

2. About me
● Daniel Ehrenberg
● @littledan
● Live 10 minutes south of here
● Work for Igalia
-- cooperative consultancy
● Mostly work on TC39

4. What's TC39?

5. Async/await: New JavaScript feature from...

6. Who is TC39?
● A committee of Ecma, with…
● JS developers
● JavaScript engines
● Transpilers
● Frameworks, libraries
● Academics
● etc

9. Meetings
● Every two months
● For three days
● Summarize/review GitHub activity
● Move proposals through stages

10. TC39 stages
● Stage 1: An idea under discussion
● Stage 2: We're doing this and have a first draft
● Stage 3: Basically final draft; ready to go
● Stage 4: 2+ implementations, tests ⇒ standard

11. What's new in TC39?

12. BigInt: Stage 4

13. const x = 2 ** 53;
⇒ x === 9007199254740992
const y = x + 1;
⇒ y === 9007199254740992

14. const x = 2n ** 53n;
⇒ x === 9007199254740992n
const y = x + 1n;
⇒ y === 9007199254740993n

15. const x = 2n ** 53n;
⇒ x === 9007199254740992n
const y = x + 1n;
⇒ y === 9007199254740993n
nstands for BigInt

16. Optional chaining and
nullish coalescing:
Stage 3

17. var street = user.address && user.address.street;
// ===>
var street = user.address?.street
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined
// ===>
var fooValue = myForm.querySelector('input[name=foo]')?.value

18. Nullish coalescing:
Stage 3

19. const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings?.undefinedValue ?? 'default'; // result: 'default'
const nullValue = response.settings?.nullValue ?? 'default'; // result: 'default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

20. Temporal: Stage 2

21. let dateTimeAnywhere = new CivilDateTime(2000, 12, 31, 23, 59)
let instantInChicago = dateTimeAnywhere.withZone('America/Chicago'); // ZonedDateTime
dateTimeAnywhere.toString() // 2000-12-31T23:59:00.000000000
// Performing calendar operations such as finding the start of month
dateTimeAnywhere.with({ day: 1 }).toString() // 2000-12-01T23:59:00.000000000

23. Records and tuples:
Stage 0

24. const marketData = #[
{ ticker: "AAPL", lastPrice: 195.855 },
{ ticker: "SPY", lastPrice: 286.53 },
];
const updatedData = marketData
with [0].lastPrice = 195.891,
[1].lastPrice = 286.61;
assert(updatedData === #[
{ ticker: "AAPL", lastPrice: 195.891 },
{ ticker: "SPY", lastPrice: 286.61 },
]);

25. Class features:
Private fields and methods

26. class Counter extends HTMLElement {
clicked() {
this._x++;
window.requestAnimationFrame(this.render.bind(this));
}
constructor() {
super();
this.onclick = this._clicked.bind(this);
this._x = 0;
}
connectedCallback() { this.render(); }
render() {
this.textContent = this._x.toString();
}
}
window.customElements.define('num-counter', Counter);

27. class Counter extends HTMLElement {
_x = 0;
_clicked() {
this._x++;
window.requestAnimationFrame(this.render.bind(this));
}
constructor() {
super();
this.onclick = this._clicked.bind(this);
}
connectedCallback() { this.render(); }
render() {
this.textContent = this._x.toString();
}
}
window.customElements.define('num-counter', Counter);

28. class Counter extends HTMLElement {
#x = 0;
#clicked() {
this.#x++;
window.requestAnimationFrame(this.render.bind(this));
}
constructor() {
super();
this.onclick = this.#clicked.bind(this);
}
connectedCallback() { this.render(); }
render() {
this.textContent = this.#x.toString();
}
}
window.customElements.define('num-counter', Counter);

29. # is the new _
for strong encapsulation

30. class PrivateCounter {
#x = 0;
}
let p = new PrivateCounter();
console.log(p.#x); // SyntaxError
class PublicCounter {
_x = 0;
}
let c = new PublicCounter();
console.log(c._x); // 0
Stage 3

31. What are decorators?

32. class Counter extends HTMLElement {
#x = 0;
#clicked() {
this.#x++;
window.requestAnimationFrame(this.render.bind(this));
}
constructor() {
super();
this.onclick = this.#clicked.bind(this);
}
connectedCallback() { this.render(); }
render() {
this.textContent = this.#x.toString();
}
}
window.customElements.define('num-counter', Counter);

33. class Counter extends HTMLElement {
@observed #x = 0;
#clicked() {
this.#x++;
}
constructor() {
super();
this.onclick = this.#clicked.bind(this);
}
connectedCallback() { this.render(); }
render() {
this.textContent = this.#x.toString();
}
}
window.customElements.define('num-counter', Counter);

34. @defineElement('num-counter')
class Counter extends HTMLElement {
@observed #x = 0;
#clicked() {
this.#x++;
}
constructor() {
super();
this.onclick = this.#clicked.bind(this);
}
connectedCallback() { this.render(); }
render() {
this.textContent = this.#x.toString();
}
}

35. @defineElement('num-counter')
class Counter extends HTMLElement {
@observed #x = 0;
@bound #clicked() {
this.#x++;
}
constructor() {
super();
this.onclick = this.#clicked;
}
connectedCallback() { this.render(); }
@bound render() {
this.textContent = this.#x.toString();
}
}

36. import Component from '@ember/component';
import { computed } from '@ember/object';
import { tagName, className } from
'@ember-decorators/component';
@tagName('a')
export default class ExampleComponent
extends Component {
@className
@computed('someKey', 'otherKey')
get bar() {
return
`.${this.someKey}__${this.otherKey}`;
}
}
import Component from
'@ember/component';
import { computed } from
'@ember/object';
export default Component.extend({
tagName: 'a',
classNameBindings: ['bar']
bar: computed('someKey',
'otherKey',
function() {
return
`.${this.someKey}__${this.otherKey}`;
}),
})
Ember
decorators

37. Popularity
● JS developers are really excited about decorators!
● Used in many frameworks and libraries, e.g.,
○ Angular
○ Ember
○ Salesforce Lightning
○ Polymer/lit-element
○ MobX
● General sentiment: They are used so heavily, are already
there, and should be standardized

38. Use cases reported
● Original capabilities
○ Decorating classes, fields, methods
● Features of the Stage 2 proposal
○ Interaction with private and fields
○ Scheduling callbacks on construction
● Features not yet proposed
○ mixins, functions, let

39. Some goals
● Decorators should be fast in implementations:
○ Transpilers
○ JS engines
● Decorators should be easy to use:
○ Using someone else's decorators
○ Writing your own

40. History of decorator proposals

41. In 2014/2015: TypeScript "experimental"/Babel "legacy"

42. How decorators originally worked

44. 2016: Descriptor-based decorators
interface MemberDesciptor {
kind: "property"
key: string,
isStatic: boolean,
descriptor: PropertyDescriptor,
extras?: MemberDescriptor[]
finisher?: (klass): void;
}
interface ClassDesciptor {
kind: "class",
constructor: Function,
heritage: Object | null,
elements: MemberDescriptor[]
}

45. 2017-2019: Descriptor-based proposal grows and evolves

46. Why descriptor-based decorators, not the original ones?
Both too dynamic and too limited
● [[Set]] vs [[Define]]
● #private
● Extensible over time, how?
● Replacement of property descriptors
● TypeScript vs Babel details

47. Language-level issues with decorators

48. Complex to write decorators
● Need to understand Object.defineProperty deeply
○ Even with original decorators
○ Ecosystem abstraction layers
● With Stage 2 proposal, expanded descriptor language

49. Difficult to extend over time
● Past discussion about "elements"
● Passing new fields back from decorators
● Mixin feature request

50. Why are descriptor-based decorators slow?

51. Transpiler implementations
● Slower in practice -- LinkedIn experiment
● Lots of code generated
● Lots of descriptors to generate and process
● Unclear how to generate good code

52. Native implementations
● Interpreter needs to be fast too
● Generating bytecode similar to static compilers!
● Decorators make many things observable

53. It's nice if it's easier
to see what's going on

54. Decorators tend to
have a fixed shape

55. Built-in decorators and composition

56. The idea
● Basic building blocks: Built-in decorators
● Compose to make JavaScript-defined decorators
● @decorators are separate, static, lexically scoped

57. Built-in decorators
● @wrap
● @register
● @expose
● @initialize

58. Decorators defined in JavaScript
● Compose built-in decorators
● Pass computed arguments to them

59. @register

60. @defineElement
import { @defineElement } from
"./defineElement.mjs";
@defineElement('my-class')
class MyClass extends HTMLElement {
/* ... */
}
class MyClass extends HTMLElement {
/* ... */
}
customElements.define(
'my-class', MyClass)

61. @register
@register(f)
class C { }
class C {
method() { }
}
f(C);

62. Using @register directly
@register(klass =>
customElements.define(
'my-class', klass))
class MyClass extends HTMLElement {
/* ... */
}
class MyClass extends HTMLElement {
/* ... */
}
customElements.define(
'my-class', MyClass)

63. Implementing @defineElement
import { @defineElement } from
"./defineElement.mjs";
@defineElement
class MyClass extends HTMLElement {
/* ... */
}
// defineElement.mjs
export decorator @defineElement(name) {
@register(klass =>
customElements.define(
name, klass))
}

64. @wrap

65. @logged
import { @logged } from "./logged.mjs";
class C {
@logged
method(arg) {
/* */
}
}
new C().method(1);
// log
class C {
method(arg) {
console.log("log");
/* */
}
}
new C().method(1);

66. @wrap
class C {
@wrap(f) method() { }
}
class C {
method() { }
}
C.prototype.method =
f(C.prototype.method);

67. Using @wrap directly
class C {
@wrap(f => {
function wrapped(...args) {
console.log("log");
f.call(this, ...args);
}
return wrapped;
})
method(arg) {
/* */
}
}
class C {
method(arg) {
console.log("log");
/* */
}
}
const prev = C.prototype.method;
C.prototype.method = function(...args) {
console.log("log");
f.call(this, ...args);
}

68. Implementing @logged
import { @logged } from "./logged.mjs";
class C {
@logged
method(arg) {
/* */
}
}
new C().method(1);
// log
// logged.mjs
export decorator @logged {
@wrap(f => {
function wrapped(...args) {
console.log("log");
f.call(this, ...args);
}
return wrapped;
})
}

69. Next steps

70. Recommendations for authors of decorators today
● Just keep using "legacy"/"experimental" decorators
● Goal of this proposal:
For users (not authors) of decorators,
upgrading to standard should be a codemod

71. Developing consensus
● Not everyone agrees on this version!
● Positive feedback from some
● Concerns raised from others (preferring more dynamic)
● Let's keep discussing!
● TC39 works by consensus

72. Prototyping this proposal: Plan from here
● Continue discussions towards consensus
● Write specification
● Implement these new decorators in Babel
○ Including some "post-MVP" decorators
● Try out the new decorators
● Collect feedback
● Propose for Stage 3 after some months of stability+use

73. I regret that we are in an uncomfortable
intermediate state

74. Help wanted!
Any/all of the following appreciated

75. Discuss ideas on our
Discourse

76. Refine proposals in
GitHub issues

77. Write test262
conformance tests

78. Implement tooling,
e.g., Babel, or
JS engines, e.g.,
browsers

79. Prototype them in
your code and tell us
how it went

80. Write documentation
and educational
materials

81. Join Ecma and attend
TC39 meetings

82. But also, take it easy!
● No need to follow this stuff to be a good developer!
● We all do different things
● Nobody understands everything
● Important to have balance when contributing

83. Conclusion
● Decorators are in progress!
● They will be different from
what you're using now, but
hopefully better
● You can help TC39 move
JavaScript forward
● Daniel Ehrenberg
● @littledan
● https://tc39.es

84. Thank you!