Empezando con Polymer 1.0

Tras explicar en el anterior artículo qué es y los conceptos básicos, vamos a pasar a hacer una explicación práctica sobre Polymer 1.0.

Para realizar este pequeño ejemplo, nos ayudaremos de Bower. Esta herramienta nos permitirá instalar y gestionar, de forma sencilla, las dependencias de un proyecto. No os preocupéis, si no lo conocéis, lo explicamos en mayor profundidad aquí.

Instalando Polymer 1.0

Como ya hemos dicho, usaremos Bower para instalar Polymer. Para ello, necesitaremos instalar también NodeJS, npm y Git. En caso de no tener instalado y no querer instalar Bower, también podemos descargarlo desde su web.

Ejecutamos en la consola de NodeJS.

bower install --save Polymer/polymer                 

Generará las siguientes carpetas:
/bower_components
--/polymer
--/webcomponentsjs


Descargando su núcleo ya nos vienen un buen número de componentes listos para usar. Si quisiéramos añadir otros componentes solo tendríamos que buscar en su GitHub e instalarlos con bower:

Google Web Components

//Obteniendo los elementos básicos
bower install --save Polymer/iron-elements
 
//Obteniendo el estilo de material design (¡que está de moda!)
bower install --save Polymer/paper-elements                

¡Ya tenemos instalado Polymer!

Hola mundo con Polymer 1.0

En nuestro caso, para el desarrollo en Polymer usaremos como editor Chrome dev editor. Este editor de código tiene integrado la posibilidad de ejecutar páginas en Polymer (las páginas abiertas directamente en el navegador no interpretarán los componentes Polymer). Una vez lo instalamos pasaremos a abrir una carpeta con nuestro proyecto.

Primero, crearemos nuestro fichero index.html que será el fichero de entrada. En este fichero pondremos una estructura básica HTML e importaremos dos referencias para que funcione Polymer.

• webcomponents.js

• polymer.html

Donde este código nos dará el siguiente resultado al pulsar el botón ejecutar del editor.

¡Ya hemos hecho nuestro primer "hola mundo" con Polymer 1.0!

Creando nuestro primer componente

Parte de la potencia de Polymer 1.0 reside en la posibilidad de crear componentes. Estos componentes podemos usarlos en las distintas partes de la web. De forma que un simple "<hola-genbetadev></hola-genbetadev>" nos muestre esa parte de la web.

Primero tenemos que tener clara la estructura de un componente. Se divide en dos secciones, una parte centrada únicamente en el HTML y CSS que estará encerrada en la etiqueta <template></template> y la segunda parte estará centrada en el JS.

Basándonos en la estructura anterior, creamos nuestro primer componente.

En la sección del 'template' colocaremos todo nuestro HTML que consistirá en un simple <h1>. ¡Ojo!, Polymer fallará si colocamos la salida con código no HTML, es decir:

• Esto fallará: <span>{{nombreAtributo1}} {{nombreAtributo2}}</span>

• Esto también fallará: <span>hola {{nombreAtributo1}} </span>

Esto se debe a una limitación actual en Polymer. Si queremos resolverlo simplemente tendremos que colocar código HTML entre ellos:

• Esto funciona: <span>{{nombreAtributo1}} </span><span>{{nombreAtributo2}}</span>

• Esto también funciona: <h1>hola <span>{{nombreAtributo1}} </span></h1>

En el fichero 'index.html', simplemente importaremos nuestra página 'hola-genbetadev.html' y la ejecutaremos colocando nuestra etiqueta que hemos usado para definir el componente <hola-genbetadev nombre="Genbetadev!"></hola-genbetadev>

Fácil ¿verdad?. Llegados a este punto seguiremos viendo más documentación y ampliando las características de nuestros componentes. Por ahora, el código está disponible en GitHub

¿Será Polymer la nueva forma de hacer aplicaciones web en un futuro cercano?.

Más información | Polymer 1.0