Seleccionar página
Cuando se produjo la aparición de las clases en ECMAScript 2015 (ES6) parecía que una oleada de nuevos desarrollos basados en este modelo se iba a extender por toda la comunidad de programadores Javascript. Por fin se podía utilizar una forma expresiva y clara para construir clases, en vez de usar los, para muchos, engorrosos prototipos.

Se argumentó -no sin razón- que las clases son sólo azúcar sintáctico en Javascript, pero se ha demostrado que la sintaxis de clases planteado funciona bien y es mucho más cómoda que los mecanismos anteriores, aun siendo compatibles unos con otros, lo cual también tiene su mérito.

Aunque quizás su extensión ha sido menor de lo que inicialmente se podía esperar, lo cierto es que se ha difundido de forma natural y es ampliamente usado por muchos frameworks front basados en componentes, aunque es prácticamente ignorado en el mundo back, donde la gestión de estado habitual en un modelo de clases no es tan bien acogida.

Con el paso del tiempo hay un buen soporte en los navegadores modernos y en las versiones actuales de NodeJS (kangax) y la posibilidad de utilizar Babel o cualquier otro transpilador para generar código compatible con navegadores antiguos, hace que no hay excusas para la evitar el uso de clases.

Quizás el mayor problema para su completa implantación ha sido la falta de tradición en la comunidad Javascript en el uso de clases. En general el código que podemos observar en los paquetes, librerías y frameworks publicados está basado en funciones, dejando el uso de clases acotado -en general- a algunos componentes.

Aunque no es muy buena idea hacer predicciones en tecnología -casi siempre se falla- lo cierto es que en los próximos meses vamos a ver aparecer una serie de nuevas funcionalidades en las clases de Javascript que seguramente produzca un nuevo impulso en su difusión. Hay un buen conjunto de propuestas al TC39 que incluyen novedades relacionadas con las clases:

Básicamente lo que nos proponen es:

La posibilidad de definir propiedades directamente en el cuerpo de la clase y no tener que utilizar el constructor para ello:

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

La posibilidad de definir y acceder a miembros privados por medio de un nombre que empiece por #, es decir, propiedades o métodos, estáticos o del objeto, sólo se pueden acceder dentro de los métodos de la clase:

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value; 
    window.requestAnimationFrame(this.#render.bind(this));
  }

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

La posibilidad de utilizar decoradores, una muy potente herramienta que permite modificar las clases y sus propiedades incorporando nuevos comportamientos, haciendo mucho más estructurada la distribución de responsabilidades en nuestro código.

import { defineElement, observer, bound } from './mydecorators.js';

@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();
  }
}

Aunque algunas quizás no seamos capaces de dislumbrar la importancia de algunas de estas funcionalidades (los decoradores son una aportación de gran potencial) o no nos terminen de gustar algunas de las opciones utilizadas (hay quien aborrece el uso de # para los miembros privados), si parece que 2019 es el año donde las clases en Javascript van a dar un nuevo paso hacia adelante.

Novedades

Template a fondo

Hay dos formas estándar de crear contenido en un componente de forma flexible: la etiqueta template, que se considera como uno de los pilares de los Web Components y las template string de Javascript, que son una buena alternativa para generar el Shadow DOM con interpolación de datos.

Light DOM a fondo

El Light DOM es un espacio compartido entre nuestro componente web y el DOM general, que podemos utilizar para insertar contenido o configurar nuestro componente. Es una muy interesante característica que debemos conocer.

Shadow DOM a fondo

Para que los componentes web no colisionen unos con otros es muy útil utilizar el Shadow DOM para aislar el DOM y el CSS de cada componente. Esta característica se puede aplicar también a elementos HTML sin necesidad de utilizar Custom Elements, pero es con estos donde cobra todo su potencial. Demos un repaso profundo a las capacidades del Shadow DOM.

HTMLElement a fondo

HTMLElement es una pieza clave, ya que de él heredan todos los componentes web, pero en muchas ocasiones no conocemos bien sus características. Os invitamos a dar un repaso a fondo a sus capacidades y descubrir cómo sacarle todo el partido en nuestros componentes.