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

Clases: super

El uso de super nos ofrece una gran flexibilidad a la hora de acceder e invocar a miembros de las clases de las que heredamos, sobre todo cuando se ha producido la sobrescritura de propiedades y métodos. Veamos cómo.

Vue.js community leaders Q&A with Core Team

Gusto y Chris Fritz, miembros del Core Team de Vue, nos cuentan qué novedades esperar en Vue v3 y del ecosistema que lo rodea, además de responder a una extensa ronda de preguntas por parte de los asistentes a este encuentro en Madrid.

Introducción a Verdaccio: gestión de paquetes privados

Juan PIcado nos hace una introducción a Verdaccio, un impresionante projecto de código abierto para hostear un registro privado de paquetes de Node.js. Es muy ligero y actua como proxy de NPM, por lo que ofrece la máxima flexibilidad. Además, Pablo Almunia, nos cuenta su experiencia utilizando Verdaccio en un entorno de real.

Clases: herencia

La herencia es una de las características más interesantes y menos explotada de los objetos en Javascript. Su implementación por medio de la cadena de prototipos es bastante compleja, pero la sintaxis de clases nos facilita mucho la escritura de un código que aproveche las características que la herencia nos ofrece.