Empezando con Polymer 1.0

Empezando con Polymer 1.0
Sin comentarios Facebook Twitter Flipboard E-mail

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

Ejemplo instalando polymer con bower
Ejemplo instalación Polymer con Bower en Windows 8

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.

Vista del editor con la carpeta
Vista del editor con la carpeta del 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

Codigo Polymer 1

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

Resultado polymer victor guillem

¡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.

Ejemplo estructura componente Polymer
Ejemplo estructura componente básico

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

Código módulo hola mundo
Código modulo hola mundo

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>

Index completo
Fichero index.html hola mundo completo

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>

Resultado final
Resultado final con componente personalizado

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

Comentarios cerrados
Inicio