Este artículo te ayudará a entender las bases para el desarrollo de componentes en Polymer 3, junto con los pasos a realizar para crear aplicaciones sencillas. Además acompaña un vídeo de una clase emitida en directo, donde podrás ver toda la práctica paso a paso.

Una de las cosas más básicas que tenemos que aprender en los primeros pasos con Polymer son las propiedades de los componentes, que nos sirven para almacenar los datos que el componente va a manejar para implementar comportamiento. Las propiedades en Polymer tienen variantes muy diversas, tanto en los tipos de datos que pueden contener como en comportamientos que facilitan la programación reactiva. Es un buen conocimiento para poder visualizar la potencia de esta librería para el desarrollo de componentes web.

La verdad es que en Polymer 3 las propiedades funcionan de manera prácticamente igual a sus versiones predecesoras, por lo que puedes si lo deseas complementar las explicaciones de este artículo con otras ya aportadas en los manuales de Polymer 1 y 2, lo que cambia es el esqueleto del componente. Te recomendamos este artículo anterior: Propiedades y estado del componente en Polymer 2.

Declaración de propiedades en Polymer 3

Comencemos viendo cómo se declaran propiedades, aunque es algo que ya hemos visto en artículos anteriores del Manual de Polymer 3.

static get properties() {
  return {
    nombre: {
      type: String,
      value: 'EscuelaIT'
    },
    contador: {
      type: Number,
      value: 0
    }
  };
}

Aquí tenemos dos propiedades declaradas, una de tipo cadena de caracteres y otra de tipo numérico. Ambas propiedades tienen un valor de inicialización, pero si no deseamos inicializarlas, ni configurar cualquier otro tipo de comportamiento, podemos declararlas simplemente indicando su tipo.

static get properties() {
  return {
    nombre: String,
    contador: Number,
  };
}

Propiedades computadas

Son aquellas cuyo valor se calcula en relación al valor de otras propiedades del componente. Por ejemplo pensemos en la propiedad "edad". Generalmente en un sistema informático no se almacena la edad, porque es variable con el tiempo. Lo que se guarda generalmente es la fecha de nacimiento. En este caso, la edad es un valor computado, pues su valor se puede calcular en relación a la fecha de nacimiento.

Las propiedades computadas en Polymer 3 se declaran así.

static get properties() {
  return {
    fechaNacimiento: Number,
    edad: {
      type: Number,
      computed: 'calculaEdad(fechaNacimiento)'
    }
  };
}

En el código anterior tenemos también dos propiedades declaradas. La primera es una propiedad común: fechaNacimiento. La segunda es la propiedad computada: edad.

Como puedes observar, para declarar que una propiedad es computada se tiene que usar "computed", asignando el valor de una cadena en la que se informa el nombre del método que realizará el cálculo y las propiedades que necesitamos para calcularlo. Obviamente, ese método tiene que formar parte del componente.

El método para calcular la propiedad computada se invocará automáticamente cada vez que los valores necesarios para calcularlo cambien. Polymer hará la invocación por nosotros, enviando el nuevo valor de la propiedad como parámetro. En el método tendremos que devolver el valor que deba asignarse a la propiedad, dado el parámetro o parámetros recibidos.

calculaEdad(fechaNacimiento) {
  let edad;
  // realizo el calculo para saber la edad dada la fechaNacimiento
  return edad;
}

Así que, cada vez que cambie la fecha de nacimiento, Polymer calculará la nueva edad y asignará por nosotros el valor devuelto en el método a la propiedad computada.

Observers en propiedades de Polymer 3

Los observers son otra de las herramientas más usadas dentro de componentes de Polymer que facilitan mucho la programación reactiva. Básicamente un observer es un método que se invoca cada vez que una propiedad cambie. Una vez declarada una propiedad con su observer, Polymer estará atento a cualquier cambio sobre su valor, invocando un método cuando se produzca.

La declaración de un observer sobre una propiedad se realiza del siguiente modo:

static get properties() {
  return {
    urlConsulta: {
      type: String,
      observer: 'urlCambiada'
    }
  };
}

Cada vez que cambie el valor de la propiedad "urlConsulta" se invocará el método "urlCambiada". Este método podrá realizar cualquier tipo de acción o acciones que sean necesarias dentro del componente. Por ejemplo, si cambió la URL podrá generar una llamada Ajax a la nueva URL para obtener algún valor nuevo, descomponer la URL en fragmentos para procesarlos, o lo que se pueda llegar a necesitar. Los observers en este sentido son muy versátiles, porque el grado de operaciones que se pueden realizar con ellos es tan amplio como nuestra imaginación.

El método que realiza la observación, en este caso urlCambiada, recibe dos parámetros, que podemos declarar si los necesitamos. El primero con el valor nuevo de la propiedad, y el segundo con el valor antiguo.

urlCambiada(nueva, antigua) {
  console.log('la propiedad nueva es:', nueva);
  console.log('la propiedad antigua es:', antigua);
}

Vídeotutorial de Polymer 3

En este vídeo puedes encontrar explicaciones sobre las propiedades de Polymer y el trabajo en el desarrollo con esta librería basada en Web Components. Al principio encuentras una introducción general a Polymer 3 y Web Components y a partir del minuto 10 comenzamos a explicar el Polymer CLI para la creación de nuevos proyectos. Luego alrededor del minuto 21 es cuando se comienza a ver el esqueleto del componente y se declaran las primeras propiedades. Te recomendamos verlo con calma y practicar por tu cuenta, para poder experimentar la potencia de Polymer para el desarrollo frontend.