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

Stencil JS: mejora el Time To Market de tu producto, por Rubén Aguilera

Stencil JS: mejora el Time To Market de tu producto, por Rubén Aguilera

El 25 de junio a las 19:00 (hora de Madrid) Rubén Aguilera nos contará los problemas que tienen muchas empresas a la hora de sacar productos accesibles, vistosos y usables en el Time To Market que requiere Negocio y cómo podemos minimizar este tiempo gracias al DevUI con StencilJS para adecuar una aplicación de Angular a las exigencias del mercado en tiempo record. Durante la charla se explicará de forma práctica aspectos de las tecnologías.

Svelte JS: por qué dedicarle tiempo, por Jesús Cuesta

Svelte JS: por qué dedicarle tiempo, por Jesús Cuesta

Jesús Cuesta cuenta qué es Svelte, para qué sirve, cómo compite contra aplicaciones construidas con React o Vuejs, si sirve para desarrollar web components, si la curva de aprendizaje es muy alta, y sobre todo si está suficiente maduro para utilizarlo. Si quieres conocer Svelte no puedes perderte esta introducción.

Javascript: 25 aniversario

Javascript: 25 aniversario

25 años con Javascript han dado para mucho. Pero todavía queda mucho para este lenguaje de programación.