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 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 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
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.
Ejemplo estructura componente básico
Basándonos en la estructura anterior, creamos nuestro primer componente.
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>
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 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
