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

Datos inmutables en Javascript

Datos inmutables en Javascript

En Javascript todo parece mutable, es decir, que se puede cambiar, pero lo cierto es que también nos ofrece varios mecanismos para conseguir que los datos que manejamos, especialmente los objetos, sean inmutables. Te invitamos a descubrir cómo…

Copiar objetos en Javascript

Copiar objetos en Javascript

Copiar objetos no es algo sencillo, incluso se podría decir que en si mismo no es posible, ya que el concepto «copiar» no entra dentro del paradigma de los objetos. No obstante, por medio de instrucciones como Object.assign() hemos aprendido como obtener objetos con las mismas propiedades, pero está técnica no se puede aplicar a todos los tipos de objetos disponibles en Javascript. Vamos a ver cómo podemos copiar cualquier tipo de objeto…

Descubre los Javascript Array Internals

Descubre los Javascript Array Internals

El Array es una de las estructuras más utilizadas en Javascript y no siempre bien comprendida. Hoy os invitamos a analizar el comportamiento interno de este objeto y descubrir cómo Javascript implementa las diferente acciones con los Array y que operaciones internas se realizan en cada caso.

Web Components: pasado, presente y futuro

Web Components: pasado, presente y futuro

Los Web Components aparecieron en el panorama de desarrollo hace ya bastante tiempo. Desde su presentación se les ha prestado mucha atención, pero lo cierto es que no han sido acogidos de forma generalizada, quizás por la difusión de nuevos y potentes frameworks. Nos preguntamos qué ha pasado con este estándar y, sobre todo, que puede pasar de aquí en adelante con el uso práctico de los componentes web.