Para comenzar en tu aprendizaje de la librería Polymer 2, te ofrecemos ahora una vista de pájaro sobre el desarrollo de componentes. En este artículo encontrarás ejemplos prácticos de las posibilidades de Polymer 2, en cuanto a la creación de componentes personalizados, que sin duda te ofrecerán una visión general de muchas de las cosas que puedes hacer con esta librería y muy poco esfuerzo.

Abordaremos diversos conceptos de una manera muy resumida, sin entrar en detalles. Más adelante, a lo largo de muchos otros artículos de este manual, encontrarás descripciones y explicaciones más detalladas sobre todos estos conceptos, y muchos otros.

Este artículo surge como un resumen de la clase 02 del Curso de Polymer 2 en EscuelaIT, que hemos impartido de manera gratuita para todos los interesados en aprender las mejores técnicas de desarrollo frontend, basado en el estándar de Web Components.

Qué aborda esta clase de Polymer 2

En resumen, los puntos que vamos a tratar en esta clase son los siguientes:

Qué ofrece Polymer 2: Veremos qué es lo que Polymer 2 te ofrece, encima del estándar de los Web Components y qué tipo de proyectos puedes realizar con Polymer 2.

Flujo de desarrollo de componentes: Veremos la herramienta que se usa en Polymer para el desarrollo de componentes y aplicaciones, el Polymer CLI junto con Bower (aunque dentro de poco se usará Yarn para sustituir a Bower), con una breve descripción sobre cómo instalar componentes en un proyecto y cómo importar las dependencias.

Ejemplos prácticos: En los ejemplos prácticos desarrollados en esta clase encontraremos explicaciones básicas sobre las tres herramientas más básicas disponibles para el desarrollo de componentes: Propiedades, Binding y Eventos.

Qué ofrece Polymer encima de Web Components V1

Polymer ofrece muchas herramientas para desarrolladores de componentes. Ofrece una manera de desarrollar custom elements mucho más ágil y amistosa para el desarrollador, frente a usar sólo Javascript nativo. En este listado encontrarás básicamente lo que el "core" de Polymer 2 te entrega, encima de Web Components V1.

• Renderización del template en el Shadow Dom
• Propagación del estado
  - Binding de 1 dirección [[ ]]
  - Binding de 2 direcciones {{ }}
• Definición declarativa de manejadores de eventos personalizados
• Sincronización de los atributos (en la etiqueta del componente) a propiedades (dentro del propio componente)

Los próximos componentes que vamos a usar como ejemplo usan básicamente estas características, así que nos quedarán mucho más claras en pocos minutos, viendo el vídeo de la clase que encuentras a final de este texto.

Qué incluye Polymer 2 y qué tipo de proyectos puedes realizar

Además de una serie de herramientas para construir fácilmente Custom Elements, Polymer dispone de un completo catálogo de componentes listos para usar en cualquier tipo de aplicación.

Paralelamente, una amplia comunidad de desarrolladores está publicando constantemente nuevos componentes que también podrás usar en tus sitios y aplicaciones.

En la Home de Web Components podrás encontrar una clasificación enorme de custom elements listos para usar en cualquier proyecto, hechos con Polymer, Javascript nativo, o cualquier librería existente. Además en la misma web encontrarás el catálogo de componentes realizados por el equipo de Polymer.

Con todas estas herramientas te dejan muy sencillo usar Polymer en todo tipo de proyectos, independientemente de cuál es el stack de tecnologías que se esté usando. Podríamos dividir los casos de uso en dos clasificaciones:

Componentes para usar en sitios web: Con Polymer 2 puedes usar componentes y esos componentes serás capaz de implementarlos en cualquier sitio web. Es lo mismo que tu sitio use PHP, WordPress, Laravel, Python, Django, Node, Java... o lo que sea. Polymer se usa para el desarrollo frontend y es lo mismo lo que tengas del lado del servidor. Así mismo, los componentes de Polymer se pueden usar junto con componentes de otros frameworks como Angular, o React. De hecho, Polymer no busca sustituir a una de estas librerías (aunque en la práctica sí podrías), sino servir de complemento estándar para todo tipo de componente que podrías usar en cualquier tipo de sitio web.

Desarrollo de aplicaciones frontend completas: Con Polymer podemos hacer completas aplicaciones web de última generación, o Progressive Web Apps. En general con Polymer y usando diversos componentes del catálogo, te ponen muy fácil desarrollar aplicaciones SPA (Single Page Application) o aplicaciones progresivas, simplemente juntando bloques.

Flujo de desarrollo con Polymer

En esta clase te enseñaremos también cuál es el flujo de desarrollo de aplicaciones con Polymer 2. Explicaremos asuntos como el Polymer CLI (las herramientas de línea de comandos disponibles en Polymer para crear nuevos proyectos y componentes) y Bower. Verás también cómo gestionar dependencias en proyectos, partiendo desde cero.

Como esto es material de otros artículos, te recomendamos ver la clase o explorar el Manual de Polymer 2 para encontrar más información detallada.

Ejemplos prácticos de componentes con Polymer 2

A partir de aproximadamente el minuto 15 y hasta el final de la clase veremos ejemplos de componentes de Polymer 2, creados en directo, en los que iremos abarcando muchas de las posibilidades de esta librería de Google.

Básicamente lo que vamos a construir es un par de componentes que colaboran entre sí para realizar algo en común. Nuestro objetivo final es mostrar un listado de instrumentos musicales y para ello tendremos dos componentes.

• Componente listado de instrumentos: Realizará una llamada a un API REST para obtener un listado de instrumentos musicales que mostrar, por medio de una solicitud GET con Ajax. El listado que el API REST entrega es en sí un array, que por medio de un template de repetición, se mostrará en la página. Para mostrar cada uno de los instrumentos del listado nos apoyaremos en otro componente creado por nosotros.
• Componente instrumento musical: el componente del listado se apoyará en el componente del instrumento. Cada uno de los instrumentos musicales se presentarán con un componente específico, que encapsula la complejidad de realizar una tarjeta de un instrumento. En este componente además nos apoyaremos en otro componente del catálogo de Polymer que nos permitirá realizar un sencillo comportamiento dinámico.

Lo que veremos en resumen en la clase nos ayudará a ver asuntos clave en el desarrollo de componentes Polymer 2 como el binding, la declaración de propiedades, eventos, el uso de componentes adicionales del catálogo de Polymer, la colaboración entre componentes para dividir las tareas por responsabilidades, etc.

Código de los componentes vistos en clase

Ahora dejamos el código de los componentes desarrollados durante la clase, para que quede como referencia a cualquier persona interesada.

Componente instrumento-musical

Este es el componente que permite mostrar una tarjeta de un instrumento musical, es decir, cada uno de los item del listado.

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

<dom-module id="instrumento-musical">
  <template>
    <style>
      :host {
        display: block;
        padding: 10px 15px;
        background-color: rgb(211, 247, 247);
        color: rgb(36, 54, 77);
        border-radius: 6px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        margin-bottom: 10px;
      }
      h1 {
        font-size: 1.4em;
        margin: 0;
        color: #f52757;
      }
      p {
        font-size: .9em;
        color: #2055a8;
      }
      p span {
        font-weight: bold;
      }
    </style>
    <h1 on-click="toggle">[[nombre]]</h1>
    <iron-collapse opened="[[desplegado]]">
      <p on-click="resaltarDescripcion">[[descripcion]]</p>
      <p><span>Clasificación:</span> [[clasificacion]]</p>
    </iron-collapse>
  </template>

  <script>
    class InstrumentoMusical extends Polymer.Element {
      static get is() {
        return 'instrumento-musical';
      }
      static get properties() {
        return {
          nombre: String,
          clasificacion: {
            type: String,
            value: 'Sin clasificar'
          },
          descripcion: String,
          desplegado: {
            type: Boolean,
            value: false
          }
        };
      }

      resaltarDescripcion(e) {
        console.log(e);
        this.descripcion = this.descripcion.toUpperCase();
      }

      toggle() {
        this.desplegado = !this.desplegado;
      }
    }

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

Componente listado-instrumentos

Este es el código del componente que hace el listado de instrumentos musicales, que ha obtenido por medio de una conexión Ajax a un API REST. Se apoya en el componente anterior para realizar la tarea.

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="./instrumento-musical.html">

<dom-module id="listado-instrumentos">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <iron-ajax
      id="ajax"
      url="http://localhost:3000/instrumentos"
      last-response="{{instrumentos}}"
      loading="{{cargando}}"
    ></iron-ajax>
    
    <template is="dom-repeat" items="[[instrumentos]]">
      <instrumento-musical
        nombre="[[item.nombre]]"
        descripcion="[[item.descripcion]]"
        clasificacion="[[item.clasificacion]]"
      ></instrumento-musical>
    </template>

    <button on-click="obtener">Recuperar datos</button>
  </template>

  <script>
    class ListadoInstrumentos extends Polymer.Element {
      static get is() {
        return 'listado-instrumentos';
      }
      static get properties() {
        return {
          cargando: Boolean,
          instrumentos: {
            type: Array,
            value: function() {
              return [];
            }
          }
        };
      }

      obtener() {
        this.$.ajax.generateRequest();
      }
    }

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

JSON para realizar el API REST

Otra cosa que necesitarás para realizar estos ejemplos es el JSON que usamos para implementar el API REST. Estamos usando JSON Server, que nos permite crear un sistema REST en local, que es un paquete que explicamos con detalle en el artículo de JSON Server.

Este es el aspecto de nuestro JSON, que no reproduzco entero pues realmente lo que te interesa es la estructura de los datos.

{
  "instrumentos": [
    {
      "nombre": "Guitarra",
      "clasificacion": "cuerda",
      "descripcion": "Instrumento musical de cuerda, con una caja de resonancia y seis cuerdas en un mástil..."
    },
    {
      "nombre": "Tambor",
      "clasificacion": "percusión",
      "descripcion": "Instrumento de naturaleza variada que permite golpear una membrana que producen el sonido..."
    }
  ]
}

Vídeo de la clase de Polymer 2 impartida en directo

Por último, te dejamos el vídeo de la clase completa de introducción al desarrollo de componentes con Polymer 2. Esperamos que puedas aprovecharlo y seguir la práctica realizada en clase para enfrentarte al desafío de crear tus primeros componentes personalizados.