En este artículo vamos a hacer una primera aproximación a Polymer desde el lado del programador. En resumen queremos mostrar cuáles serían los primeros pasos para obtener Polymer y explicar unas primeras nociones sobre cómo se podría organizar la estructura de carpetas en un proyecto donde pretendamos usar esta librería.

Además, al final del texto encontrarás un vídeo donde podrás ver todo el proceso paso por paso, realizando además un ejemplo de componente para comenzar. Si tienes 15 minutos y prefieres verlo en el videotutorial, salta todo este texto y vete al final del artículo.

Cómo descargar Polymer

Con cualquier librería Javascript generalmente tenemos dos opciones. La primera sería irse al sitio web de los creadores de la librería y descargar su código fuente. La otra opción es usar un gestor de dependencias. Sin embargo en Polymer se indica la segunda opción directamente, el gestor de dependencias, que en este caso se trata de Bower.
Esto es porque con Polymer generalmente no vas a descargar solo la librería, sino que también querrás hacer uso de una serie de componentes que ya te te dan hechos para resolver muchas tareas habituales.

Así que no seremos nosotros los que descarguemos la librería, sino que lo realizaremos mediante Bower.

Puedes partir de una carpeta vacía. Entonces te situas dentro de esa carpeta con el terminal. A partir de ahí instalaremos Polymer.

El primer paso recomendado es iniciar el proyecto con Bower. Como sabes esto nos creará el bower.json con la información del proyecto.

bower init

Seguidamente vamos a instalar la librería Polymer, que consigues con el siguiente comando de Bower:

bower install --save Polymer/polymer

Ahora fíjate que se ha creado la carpeta bower_components y dentro de ella tienes dos subcarpetas:

• polymer: En esa carpeta encontrarás la librería Polymer propiamente dicha.
• webcomponentsjs: esta carpeta contiene un polyfill para conseguir una capa de compatibilidad para los navegadores que todavía no son compatibles con web components.

Estructura de carpetas para el proyecto

Cada desarrollador escoge su propia arquitectura para el proyecto, pero en el caso de Polymer lo habitual es que tengamos una en concreto.

Para comenzar tienes la carpeta "bower_components" que es donde guardas tus dependencias. Por ahora solo tenemos Polymer, pero más adelante tendrás aquí muchas otras carpetas de componentes que son muy útiles para cualquier desarrollo.

Luego, y esto es algo importante de cara a la organización, tendrás una carpeta llamada "elements" que es donde guardas todos los componentes que desarrolles tú mismo. En elements además tendrás una carpeta para cada uno de los componentes. En resumen, cada componente en su carpeta y dentro de ella tendrás el código de tu componente y todo aquello que ese componente pueda necesitar. Incluso el testing de un componente, documentación o el demo se colocará en la carpeta del componente.

El resto será tal como a ti te interese. No obstante, si quieres ser mucho más ordenado, te recomendamos estudiar otras estructuras de proyecto en las que en este momento no vamos a entrar. Un excelente ejemplo es el Polymer Starter Kit.

La siguiente imagen te resume lo dicho sobre estructuras de carpetas simples.

Crear nuestro primer componente

Así que vamos ahora a crear nuestro primer componente con Polymer. Esto lo conseguimos creando una carpeta dentro de "elements" con el nombre del componente. Dentro de esa carpeta colocaremos de momento un archivo también con el nombre del componente y la extensión ".html".

Nuestro componente se llamará "saludo-polymer", luego la ruta del fichero del componente será elemenst/saludo-polymer/saludo-polymer.html.

Sin querer entrar en mucho detalle, puesto que más adelante en el Manual de Polymer explicaremos cada cosa con mucha más profundidad, el código de nuestro componente es el siguiente:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="saludo-polymer">
  <template>
    <style>
    h1{
      color: blue;
    }
    </style>
    <h1>Bienvenido <content></content></h1>
  </template>
  <script>
    Polymer({
      is: "saludo-polymer"
    });
  </script>
</dom-module>

Como ves, primero se realiza un import de la librería Polymer, que es una de nuestras dependencias en "bower_components".

Luego ves que todo nuestro componente está dentro de una etiqueta dom-module, en la que declaramos el nombre del componente que se está creando. Además cada componente tiene la parte visual, que es el template, con su HTML y CSS, y la parte funcional y el registro del componente, en el SCRIPT. Observa que el registro de un componente tiene en estos momentos únicamente expresado su nombre. Sigue leyendo este manual para mayores detalles.

Usar un componente Polymer

Un componente Polymer se usa como cualquier otro web component o cualquier otra etiqueta HTML. La única diferencia es que, como el navegador no conoce a priori ese componente que acabamos de crear, tenemos que importarlo.

Esto lo puedes ver en el siguiente listado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>usando componentes</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="elements/saludo-polymer/saludo-polymer.html">
</head>
<body>
  <h1>probando</h1>
  <saludo-polymer>Miguel</saludo-polymer>
</body>
</html>

Somos conscientes que hemos dejado pasar muchos detalles importantes para entender del todo este ejemplo básico, pero no te preocupes porque tienes un excelente manual de Polymer por delante donde se irán aclarando todas las dudas.

Además puedes ver el vídeo que encuentras a continuación donde se ve paso por paso todo lo explicado en este artículo y varias otras cosas adicionales. Te recomendamos invertir 15 minutos de tu tiempo para verlo con calma.