Polymer es una excelente librería para el desarrollo de Web Components.
En el desarrollo con Web Components la parte más importante es la creación de Custom Elements, que no es más que una nueva etiqueta que se crea en el lenguaje HTML y que puedes usar como cualquier otra etiqueta estándar del lenguaje.

Para la creación de un Custom Element el paso más importante y fundamental es realizar el registro de esta etiqueta. Esto ya lo explicamos de manera práctica en el artículo sobre Crear elementos con Polymer, y ahora vamos a profundizar un poco más conociendo algunos detalles del ciclo de vida de los componentes Polymer. Como verás, algunas cosas están marcadas por el propio estándar de los Web Components y otras son cosas que tienen relación específica con la librería Polymer.

Funciones de Polymer en el ciclo de vida de un componente

El ciclo de vida de los Custom Elements, de Javascript estándar, está compuesto por varias fases y los programadores disponemos de una serie de funciones "callback" que nos permiten realizar cosas cuando se hayan completado estas fases. La diferencia con Polymer es que los nombres de las funciones callback cambian, así como la manera de declararlas.

La declaración de funciones para ejecutar cosas en los diferentes estados de un componente se realiza mediante métodos que tienes que definir en el objeto que envías a la función Polymer() para registrar un componente.

Polymer({
  is: 'componente-ejemplo',
  nombreMetodo: function() {
    // código del método
  }
});

El detalle aquí es conocer las funciones que existen en Polymer para implementar acciones en el ciclo de vida:

1. created: Se ha creado un ejemplar de un custom-element. Osea, el navegador ha creado un elemento que es un custom element de Web Components
2. attached: El elemento se ha insertado dentro del documento, se ha insertado dentro del DOM
3. detached: El elemento se ha retirado del DOM de la página
4. atributeChanged: un atributo del componente se ha añadido, quitado o su valor ha cambiado


Nota: Estos métodos son los mismos que en los web components, solo que en el estándar tienen la palabra "Callback" atrás, como sufijo: createdCallback, attachedCallback, etc. Incluso dentro de un componente Polymer podrías usar la función nativa de Javascript si lo deseas o como alternativa fallback.


5. ready: este método es propio de Polymer y no existe en el estándar. Se ejecuta cuando se ha terminado de crear e inicializar todo el DOM local de un elemento, osea, todo el HTML que contiene en su TEMPLATE

Ejemplo de las funciones del ciclo de vida

A continuación encuentras un elemento Polymer en el que hemos definido todos los métodos del ciclo de vida disponibles, con unos mensajes por consola que nos permitirán apreciar en qué momento se producen.

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

<dom-module id="ciclo-vida">
  <template>
    <p>
      Esto es el DOM local
    </p>
  </template>
  <script>
    Polymer({
      is: 'ciclo-vida',

      created: function() {
        console.log('método created');
      },
      ready: function() {
        console.log('método ready');
      },
      attached: function() {
        console.log('método attached');
      },
      detached: function() {
        console.log('método detached');
      },
      attributeChanged: function() {
        console.log('método attributeChanged');
      }
    });
  </script>
</dom-module>

El elemento no tiene mucha utilidad, salvo la de poder acompañar los mensajes que hemos generado en cada una de las etapas del "lifecycle".

Ejemplo de uso del componente y apreciar el ciclo de vida

Ahora vamos a usar el componente en una página Javascript, de modo que podamos ver los mensajes que hemos definido para cada estado de lifecycle.

Puede parecer mucho código, pero no te confunda, la parte importante es donde se coloca el custom element y luego simplemente hay una serie de botones con acciones para forzar diversos estados del ciclo de vida que no se pueden apreciar si no manipulamos la página. Después verás un SCRIPT para definir los comportamientos a esos botones que explicamos a continuación.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo dw-feedback</title>
  <link rel="import" href="ciclo-vida.html">
</head>
<body>
  <H1>Demo ciclo-vida</H1>

  <ciclo-vida></ciclo-vida> 

  <button id="cambiaAtributo">Cambia Atributo</button>
  <button id="quitaElemento">Quita el elemento del DOM</button>
  <button id="creaElemento">Crea un nuevo elemento en memoria Javascript</button>
  <button id="creaInyectaElemento">Crea un nuevo elemento e injecta en el DOM</button>
  <script>
    document.getElementById('cambiaAtributo').addEventListener('click', function(){
      document.querySelector('ciclo-vida').setAttribute("atributo", 'valor');
    });
    document.getElementById('quitaElemento').addEventListener('click', function(){
      document.body.removeChild(document.querySelector('ciclo-vida'));
    });
    document.getElementById('creaElemento').addEventListener('click', function(){
      document.createElement('ciclo-vida');
    });
    document.getElementById('creaInyectaElemento').addEventListener('click', function(){
      var elem = document.createElement('ciclo-vida');
      document.body.appendChild(elem);
    });
  </script>
</body>
</html>

Al abrir esta página apreciarás los mensajes:

método created
método ready
método attached

Porque primero se crea el elemento, luego se procesa su DOM local y una vez terminado de procesar se añade al documento.

Luego, los otros botones hacen diversas acciones para cambiar un atributo, quitar un elemento de la página, crearlo y añadirlo al documento.

En caso de modificar, o crear, atributos HTML en el tag del componente.

document.querySelector('ciclo-vida').setAttribute("atributo", 'valor');

Esta sentencia hace que se cambie un atributo del elemento seleccionado con el selector "ciclo-vida". Entonces veremos el mensaje

método attributeChanged

En caso de quitar del DOM la etiqueta del componente.

document.body.removeChild(document.querySelector('ciclo-vida'));

Ese código hace que se quite de la página un elemento con el selector 'ciclo-vida'. Entonces debemos ver el mensaje:

método detached

Cuando se crea desde cero un componente, sin llegar a insertarlo en el DOM de la página.

document.createElement('ciclo-vida');

Ese código crea un nuevo elemento con Javascript. El elemento no se crea más que en la memoria del navegador, pero no se inyecta todavía. Debemos ver los mensajes:

método created
método ready

Ahora, en caso de crear un elemento y luego inyectarlo en el cuerpo de la página:

var elem = document.createElement('ciclo-vida');
document.body.appendChild(elem);

Por último, con estas sentencias debemos ver los mensajes:

método created
método ready
método attached

Conclusión

Con esto ya sabemos algo más de los componentes de Polymer y hemos podido encontrar alternativas de situar código que nos pueden sacar de un apuro más de una vez. Deberías experimentarlas en tu propio ejemplo y familiarizarte con ellas, puesto que son recursos útiles en varios casos.

Personalmente las que más uso son ready y attached, pero con moderación, porque lo cierto es que en Polymer hay muchos mecanismos para hilar fino y hacer cosas cuando ocurren muchas otras situaciones relacionadas con los componentes, como es el caso de los observers, que nos permiten vigilar por cualquier cambio de un atributo concreto, por ejemplo. Así que dentro de poco aprenderás muchas otras alternativas que complementarán este conocimiento y te permitirán realizar cosas más específicas.

Antes de acabar te dejamos un vídeo interesante para complementar la información que has leído en este artículo y donde ponemos en marcha el componente de ejemplo. En el vídeo verás además cómo se ejecutan los eventos del ciclo de vida, a medida que manipulamos el DOM mediante Javascript.