Las propiedades computadas son aquellas que toman su valor por medio de un cómputo, al que se llega mediante los valores de otras propiedades del componente. Son especialmente útiles y se recurre a ellas en gran cantidad de ocasiones.

Polymer 2, y su predecesor 1.x, hacen muy sencillo el trabajar con propiedades computadas. Además realizan todo el trabajo pesado de manera automática, para que nosotros no tengamos que preocuparnos porque los cómputos estén siempre correctamente actualizados. Para ello, cada vez que cambian los valores de las propiedades usadas para realizar el cómputo, Polymer se encarga de actualizar el valor de las propiedades computadas.

Se entenderán sin duda explicando casos de uso sencillos. Por ejemplo, podemos tener en un componente dos propiedades: nombre y apellidos. Además podemos necesitar el "nombre completo" para otras cosas. Esa propiedad nombre completo podría ser una propiedad computada, pues para obtener su valor se consigue mediante la concatenación de las dos propiedades del elemento nombre y apellidos.

Otro ejemplo podría ser la letra del DNI. En España el número de identidad de las personas se acompaña a una letra. Esa letra se puede calcular mediante unas operaciones a partir del número de identidad, por lo tanto sería otro buen candidato a propiedad computada. Si tengo una factura y el total se calcula por medio de la suma de todos los valores de cada concepto facturado, esa propiedad "total" podría ser una propiedad computada. La fuerza de una clave, que se calcula en función de la cadena de la contraseña escrita por el usuario, también podría ser una computada. Puedes encontrar interminables ejemplos.

Ejemplo de componente con propiedad computada

Vamos a realizar un primer ejemplo de un custom element en el que incluimos una propiedad computada. Vamos a trabajar sobre el sencillo caso del "nombre completo" que es la contactenación del nombre y apellidos. Verás que trabajar con computed properties en Polymer 2 es algo realmente fácil.

Como decimos, en nuestro componente tenemos tres propiedades:

• nombre
• apellidos
• nombreCompleto, que es la computada a partir de las propiedades anteriores.

Para crear una propiedad computada tenemos que declararla como cualquier otra. Dentro de todas las configuraciones que podemos realizar sobre las propiedades declaradas hay una llamada "computed". En ella debemos de colocar el nombre del método que se usará para realizar el cálculo, a fin de hallar el valor de la propiedad. Además hay que señalar qué propiedad o propiedades se usan para para calcular el valor resultante.

En esta declaración de propiedades encontramos la sintaxis utilizada para definir las computadas:

static get properties() {
  return {
    nombre: String,
    apellidos: String,
    nombreCompleto: {
      type: String,
      computed: 'definirNombreCompleto(nombre, apellidos)'
    }
  };
}

Como puedes ver, el método que se usará para realizar el cómputo es "definirNombreCompleto" y las propiedades de las que se derivan el valor de la computada son "nombre" y "apellidos".

Esta declaración permite a Polymer 2 saber que, cada vez que cambien los valores de las propiedades "nombre" y "apellidos", se tiene que invocar el método definirNombreCompleto().

Por supuesto, ese método lo tenemos que escribir dentro del componente. Recibirá exactamente los mismos parámetros declarados en la propiedad computada y deberá devolver (return) el valor resultado del cálculo.

definirNombreCompleto(nombre, apellidos) {
  return nombre + ' ' + apellidos;
}

Puedes ver a continuación el código del componente completo creado para este ejemplo.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="avatar-usuario">
  <template>
    <style>
      :host {
        display: block
      }
    </style>

    <div>
      [[nombreCompleto]]
    </div>

  </template>

  <script>
 
    class AvatarUsuario extends Polymer.Element {
      static get is() {
        return 'avatar-usuario';
      }

      static get properties() {
        return {
          nombre: String,
          apellidos: String,
          nombreCompleto: {
            type: String,
            computed: 'definirNombreCompleto(nombre, apellidos)'
          }
        };
      }

      constructor() {
        super();
      }

      definirNombreCompleto(nombre, apellidos) {
        return nombre + ' ' + apellidos;
      }
    }

    window.customElements.define(AvatarUsuario.is, AvatarUsuario);
  </script>
</dom-module>

Ejemplo fuerza de la clave con propiedad computada

Ahora veremos otro ejemplo de componente que tiene una propiedad computada, para calcular la fuerza de una clave. Ya sabes, la fuerza depende de la clave escogida e indica al usuario que tan segura es una clave.

La declaración de nuestras propiedades ahora incluye la propia clave y su fuerza, siendo esta última una computada.

static get properties() {
  return {
    clave: {
      type: String,
      value: ''
    }, 
    fuerza: {
      type: Number,
      value: 0,
      computed: 'calcularFuerzaClave(clave)'
    }
  };
}

El método que se usa para calcular la fuerza se llama calcularFuerzaClave() y recibe la clave por parámetro, por tanto, cada vez que esa cadena "clave" cambie, se invocará al método que calcula la fuerza. Tendría un código como el que sigue.

calcularFuerzaClave(clave) {
  if(clave.length > 10) {
    return 10;
  }
  return clave.length;
}

Como puedes apreciar, un método de una computada devuelve siempre un valor por medio de return, valor que se cargará en la propiedad en cuestión cada vez que uno de sus parámetros cambie.

El código completo de nuestro componente se puede ver a continuación:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="fuerza-clave">
  <template>
    <style>
      :host {
        display: block
      }
    </style>

    Clave: <input type="text" value="{{clave::input}}">
    <div>
      Fuerza: {{fuerza}}/10
    </div>
  </template>

  <script>

    class FuerzaClave extends Polymer.Element {
      static get is() {
        return 'fuerza-clave';
      }

      static get properties() {
        return {
          clave: {
            type: String,
            value: ''
          }, 
          fuerza: {
            type: Number,
            value: 0,
            computed: 'calcularFuerzaClave(clave)'
          }
        };
      }

      constructor() {
        super();
      }

      calcularFuerzaClave(clave) {
        if(clave.length > 10) {
          return 10;
        }
        return clave.length;
      }

    }

    window.customElements.define(FuerzaClave.is, FuerzaClave);
  </script>
</dom-module>

Conclusión sobre las computed properties

En este artículo hemos podido conocer una de las herramientas más utilizadas en día a día del desarrollo de componentes. Las propiedades computadas permiten reaccionar a cambios de una manera sencilla y mantener actualizados los valores de los datos manejados internamente en el componente. Por medio de una sintaxis sencilla podemos ejecutar funciones cuando ciertos valores cambian, ahorrando al desarrollador la necesidad de suscribirse a eventos de cambio, lo que ahorra escribir código redundante al trabajar con Polymer 2.

Hemos visto un par de ejemplos de componentes donde las propiedades computadas nos resultan de utilidad, pero aplicaciones hay a montones y seguramente al desarrollar en poco tiempo encontrarás muchos otros casos donde te resultan de utilidad.