Hemos ofrecido muchos datos de Polymer 3.0, pero seguramente más de uno está deseando ver algo de código. Así que vamos con ello. Pero antes queremos explicar el enfoque que vamos a aplicar.

Primero vamos a explicar el código de un componente básico con Polymer 3, con explicaciones generales para quien ya conoce Polymer, de modo que podamos apreciar las diferencias con respecto a su predecesor.

En un segundo término, encontrarás explicaciones más detalladas sobre el código de los componentes, enfocadas para personas que nunca han desarrollado con esta librería basada en Web Components.

Código de un componente básico en Polymer 3

Vamos a comenzar viendo de una vez todo el código de un componente, para tener una idea global y para facilitar la localización de las diferencias para aquellos que ya conocen Polymer en versiones anteriores.

El código de los componentes se escribe en archivos con extensión ".js", lo que seguramente llame la atención a desarrolladores experimentados, ya que antes se definían en archivos ".html". Debemos acostumbrarnos pues al hecho de que los archivos para definir los custom element se encuentran en Javascript. Por tanto, el archivo del componente sería algo como "hola-mundo.js".

Este es el código completo de nuestro componente:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class HolaMundo extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
          font-family: arial, verdana;
        }
        h1 {
          color: orange;
        }
        p {
          background-color: #eee;
          color: #888;
          padding: 10px;
          border-radius: 5px;
        }
      </style>
      <h1>Esto es un Polymer Element realizado con Polymer 3.0!!</h1>
      <p>Aquí tienes un binding: [[miPropiedad]]!</p>
    `;
  }
  static get properties() {
    return {
      miPropiedad: {
        type: String,
        value: 'Valor para mi propiedad',
      },
    };
  }
}

window.customElements.define('hola-mundo', HolaMundo);

Explicaciones resumidas para quien ya conoce Polymer

Lo que nos debe de llamar la atención al pasarnos a Polymer 3 es lo siguiente:

• Para especificar las dependencias ahora se usa import en Javascript, en vez de los HTML Imports de versiones anteriores.
• Ya no se usa la etiqueta dom-module
• El template se define en código Javascript. Usa una funcionalidad de ES6 llamada "Template String Tags", de la cual encuentras más información en el artículo de Lit-HTML.

Todo lo demás es exactamente igual a lo que venimos conociendo en el pasado, por lo que no requiere más comentarios si ya has tenido experiencias previas con Polymer.

Explicaciones para quien no conoce Polymer anteriormente

En caso que no conozcas Polymer en alguna de sus versiones anteriores quizás el código de este componente te parezca algo más complejo, así que vamos a desgranarlo un poco más.

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

Esta línea sirve para cargar los ES6 modules donde está el código de nuestras dependencias. Lee el artículo de los módulos Javascript ES6 para más información. En concreto estamos cargando un módulo, del cual nos importamos dos declaraciones:

1. "html" es una función que nos ayuda a definir templates HTML.
2. "PolymerElement" es el código base de una clase que extendemos para crear componentes basados en Polymer 3.

class HolaMundo extends PolymerElement {

Esta es la cabecera de la clase que usamos para implementar un custom element. Por si no lo sabes, para implementar los elementos personalizados en el estándar de los Web Components V1 se usan clases, de programación orientada a objetos.

Debes apreciar que usamos como clase base a PolymerElement, que contiene el código base de elementos Polymer, lo que nos ofrece diversas ventajas aportadas por la librería. Observarás que esta clase base la hemos importado de su correspondiente módulo, con el import de ES6.

Ahora vamos a pasar a ver la implementación de una clase típica para crear un componente en Polymer. Primero tienes que saber que los componentes tienen dos partes fundamentales:

1. El template, con la vista que deben presentar al usuario cuando el componente se use.
2. La funcionalidad, que se crea como código en el propio componente. Entre otras cosas, definirá lo que pasa cuando el usuario interacciona con el componente, cuando otros componentes le pasen datos, etc.

Tanto el template como la funcionalidad del componente se deben definir mediante código en la clase que lo implementa.

En el caso del template, en Polymer 3 basado en PolymerElement, se define con una propiedad estática llamada "template".

static get template() {
 return html`
   <style>
       :host {
         display: block;
         font-family: arial, verdana;
       }
       h1 {
         color: orange;
       }
       p {
         background-color: #eee;
         color: #888;
         padding: 10px;
         border-radius: 5px;
       }
   </style>
   <h1>Esto es un Polymer Element realizado con Polymer 3.0!!</h1>
   <p>Aquí tienes un binding: [[miPropiedad]]!</p>
 `;
}

Como valor de devolución del template se usa un "Template String Tag". "html" es el tag de este template string, que es como una función que se ejecuta enviándole un template string. Esta parte puede llegar a ser un poco compleja en un principio. Podrías simplemente dejar pasar esta complejidad si estás empezando y centrarte en el contenido del string que se usa como template.

En el template encontramos generalmente tanto CSS como HTML. El CSS afectará solo a este componente, gracias a la encapsulación que nos ofrece Web Components.

Como detalle relevante, dentro del template observa la expresión "[[miPropiedad]]". Eso es lo que se llama un binding y hace que, al mostrarse el componente, se sustituya la expresión por el valor que tiene la propiedad "miPropiedad". Si el valor de "miPropiedad" cambia, el template se actualiza automáticamente.

Por último encontramos la declaración de propiedades del componente. Las propiedades sirven para guardar los datos con los que el componente debe trabajar. Polymer nos facilita la configuración de estas propiedades a través de atributos en la propia etiqueta, al usar el componente.

static get properties() {
 return {
   miPropiedad: {
     type: String,
     value: 'Valor para mi propiedad',
   },
 };
}

En este caso, se indica en el valor de devolución una declaración de todas las propiedades que este componente tiene. Verás que en nuestro caso solo hay una, llamada "miPropiedad", de tipo String. A esta propiedad le estamos asignando un valor predeterminado, la cadena "Valor para mi propiedad".

Por último, ya fuera de la implementación de esta clase, encontramos la línea de definición del componente:

window.customElements.define('hola-mundo', HolaMundo);

Esta línea hace uso del API de Custom Elements (parte del estándar Javascript de Web Components y por tanto código nativo en los navegadores), para indicar que se está definiendo un componente (custom element, elemento personalizado) llamado "hola-mundo" y que se usa la clase "HolaMundo" como implementadora de este nuevo elemento que se está definiendo.

Usar el componente hola-mundo

Para usar este componente tendrás que hacer un par de sencillos pasos:

1) Incluir el módulo donde se define el custom element "hola-mundo", lo que conseguimos con un script en el que tenemos type="module". El src de este script tiene que dirigirse a la carpeta y archivo donde se encuentra el código anterior.

<script type="module" src="/src/hola-mundo.js"></script>

2) Usar el componente con la etiqueta HTML correspondiente.

<hola-mundo></hola-mundo>

Al mostrarse este componente se podrá apreciar el HTML definido en su template, estilizado con el CSS (también escrito en el template). Además, el valor de la propiedad también se ha interpolado en el contenido del template.

Como este componente tiene definida una propiedad, podríamos asignarle un valor diferente del predeterminado, usando un atributo en la etiqueta HTML. Ten en cuenta que, si el atributo tiene "camel case", como es el caso (mayúscula en la primera letra para separar las palabras), en HTML hay que ponerlo todo en minúsculas y separar las palabras por guiones.

<hola-mundo mi-propiedad="Otro componente con otro valor en esta propiedad"></hola-mundo>

Si vienes de Polymer en versiones anteriores estamos seguros que podrás montar fácilmente tu proyecto para poder usar este primer "hola mundo" en Polymer 3. Pero si eres nuevo en Polymer seguramente te interesará contar con algunas explicaciones detalladas sobre cómo ejecutar este código en una página web. Eso será materia del siguiente artículo.

Conclusión

Como has podido comprobar, Polymer 3.0 sigue manteniendo una sencillez palpable, comparado con el proceso de creación de componentes en otros frameworks y librerías.

Lo genial de Polymer es que esto se ejecuta en prácticamente todos los navegadores del mercado, sin necesidad de usar Polyfills y la librería completa ocupa solamente unas pocas KB. El proceso de desarrollo con Polymer 3 es sencillo y ágil y a través de todo el tooling de Polymer (Polymer CLI) es posible tener acceso a las herramientas necesarias, con prácticamente cero configuración, para optimizar el código de los componentes para producción. Todo esto lo veremos en breve.

En el siguiente artículo vamos a explicar algo más sobre el workflow para poner en marcha este ejemplo, de modo que tendrás todo lo necesario para comenzar a experimentar con Polymer y crear tus primeros componentes y aplicaciones.