1 of 5

Unified class features:

A vision of orthogonality

Daniel Ehrenberg

2 of 5

Guiding example

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

​

3 of 5

Private fields and method

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

​

​

4 of 5

Decorators

@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.textCountent = this.#x.toString();� }�}

​

​

5 of 5

Dimensions

  • literal vs computed property name vs private
  • static vs instance/prototype
  • method vs field vs accessor
  • async vs sync
  • generator vs non-generator
  • decorating all class elements