Actualización: En 2016 se presentó la versión 2 del Polymer Starter Kit. La mayoría de las informaciones contenidos en este artículo siguen vigentes, en cuanto a la descripción del PSK, no obstante, su instalación ahora depende de Polymer CLI y es mucho más sencilla. Esa y otras novedades se explican con detalle en el artículo de Polymer Starter Kit 2.

En este artículo vamos a dar una pequeña receta para iniciar un nuevo proyecto con Polymer Starter Kit. Veremos que usando Yeoman se facilita extremamente la labor. Iremos dando los pasos progresivamente con explicaciones y consejos.

Primero que nada, tendremos que ponernos en antecedentes, por si acaso no todos los lectores conocen las herramientas con las que vamos a trabajar.

• Polymer: es una librería para el desarrollo con el estándar Web Components. Te permite desarrollar rápidamente custom elements, que son como etiquetas HTML personalizadas.
• Bower: es un gestor de paquetes que se usa para descargar y mantener actualizadas las dependencias de un proyecto web.
• Yeoman: es una serie de puntos de inicio, con estructuras de carpetas y archivos con código que te pueden servir de base para comenzar proyectos, o todo tipo de piezas de software que realizas habitualmente al desarrollar un sitio web o aplicación. Básicamente, mediante comandos de consola, te ahorra muchas tareas repetitivas en el desarrollo, generando lo que se conoce como "scaffolding".
• Gulp: es una herramienta para la automatización de tareas de todo tipo relacionadas con el desarrollo web. Optimiza archivos, compacta, minimiza, procesa preprocesadores... y todo lo que se te ocurra! Te ahorra mucho trabajo con tareas repetitivas que no necesitarás realizar nunca más manualmente.

Polymer es una librería que generalmente te descargarás para aquel proyecto donde la necesitas. Lo haces con Bower y suponemos que ya lo conoces. Si no, comienza por el artículo donde explicamos Bower.

Yeoman lo instalas generalmente de manera global en tu ordenador. Lo haces con el comando npm:

npm install -g yo

Puedes encontrar más información en la página de Yeoman: http://yeoman.io/

Recetas de Yeoman para desarrollar con Polymer

Ahora que tienes Yeoman, puedes obtener los generadores de Polymer, que te ahorrarán diversas tareas repetitivas. Las recetas para Yeoman se instalan por separado. El comando para obtener los generadores de Polymer es el siguiente:

npm install -g generator-polymer

Encontrarás cuatro recetas útiles, que instalas con el comando "yo" (abreviación de Yeoman) y el nombre de la receta, por ejemplo:

yo polymer

Las recetas, o generadores, que obtienes dedicados a Polymer son los siguientes:

polymer
Esta receta es la que inicia un nuevo proyecto basado en Polymer Starter Kit. En seguida hablaremos de ella.
polymer:element (o polymer:el)
Esta receta comienza un nuevo elemento de Polymer., lo coloca en la carpeta de elements (app/elements) y te pregunta si deseas incluir el import en el archivo elements.html
polymer:seed
Este sirve para que puedas crear un elemento de Polymer, con todo lo necesario para que puedas distribuirlo vía Bower. Entre todas las cosas que te ofrece encuentras el archivo para hacer el demo, el bower.json para distribuirlo, una página de ayuda del componente
polymer:gh
Te genera el sistema para publicar en "github pages" el contenido de trabajo con el elemento.

La página del proyecto de recetas Yeoman, donde encontrarás bastante información sobre estos generadores para Polymer, la tienes en Github: https://github.com/yeoman/generator-polymer

Iniciar el proyecto instalando Polymer Starter Kit

Ahora tenemos todo lo que nos hace falta para instalar Polymer Starter Kit (PSK) de la manera más cómoda, mediante los siguientes pasos.

1.- Creas una carpeta para el proyecto

2.- Abres una ventana de terminal y por línea de comandos te sitúas dentro de la carpeta de proyecto que acabas de crear

3.- Lanzas el comando para generar el Polymer Starter Kit

yo polymer

En este punto Yeoman se pondrá a trabajar para instalar un nuevo proyecto basado en el PSK. Pero antes te hará un par de preguntas sencillas sobre si quieres que te instale un sistema para testing de componentes y si quieres que te adjunte en las carpetas unos documentos con diversas ayudas ante operativas comunes en el trabajo de un sitio con Polymer.

Luego comenzará a descargar todos los archivos y colocarlos en la carpeta creada.

4.- Nuestro sitio ya está generado. Te recomendamos echar un vistazo a las carpetas del proyecto. Más adelante daremos una descripción completa de cada cosa, pero de momento es interesante que repares que existe una carpeta llamada "app" que es donde está toda la aplicación. las carpetas que están por fuera de "app" contienen cosas importantes, pero que no formarían parte de tu sitio web.

Dentro de "app" encontrarás el index.html que es el punto de entrada a esta aplicación. Recuerda que es una aplicación SPA (single page application) por lo que solo está ese archivo html como página y todas las secciones del sitio se muestran sobre ese mismo fichero, intercambiando lo que serían las vistas.

5.- Ahora podemos poner en marcha el proyecto y verlo en un navegador. Existen una serie de tareas Gulp para realizar esto de una manera cómoda. solo tienes que correr, desde la carpeta de tu proyecto, el siguiente comando.

gulp serve

Eso realizará toda una serie de acciones que describiremos más adelante y a continuación abrirá directamente en tu navegador la página donde está desplegada la aplicación durante la etapa de desarrollo.

Si no ocurriese nada observa que al ejecutar "gulp serve" aparece un mensaje donde se indica la URL donde debes acceder para visualizar el sitio, tanto desde tu ordenador local como desde otro ordenador o dispositivo en tu red local.

Local: http://localhost:5000
External: http://192.168.1.102:5000

6.- Desplegar en un servidor. Realmente esto no es una tarea que tengas que hacer ahora, pero seguramente te lo estés preguntando, o te lo preguntes en breve. Para desplegar la aplicación no se sube la carpeta "app" a un servidor web. Esos son solo los archivos fuente de tu proyecto. En realidad lo que se sube es la carpeta dist, que contendrá los archivos a distribuir en el entorno de producción, correctamente optimizados para poder distribuirse de la mejor manera en un entorno web. Inicialmente esa carpeta estará prácticamente vacía, pero puedes generar tales archivos a través de tu código fuente con otra tarea de Gulp. Simplemente usas el comando:

gulp

7.- Inicia Git. Otra cosa que deberías hacer ahora que comienza tu proyecto es iniciar el repositorio Git. Observa que dentro del proyecto hay un archivo llamado ".gitignore" (oculto en Mac y Linux por comenzar por ".") que indica que este proyecto ya está pensado para gestionar sus versiones con Git.

git init

Con esto tienes la información que necesitas para poder iniciarte en el Polymer Starter Kit, todo un regalo de buenas prácticas para el desarrollo con Web Components y Polymer.