Continuando el primer artículo de introducción en el que describimos en que consiste Polymer, en este nuevo artículo veremos como empezar a trabajar y crear nuestro primer proyecto con Polymer. Definiremos un entorno de trabajo con las herramientas adecuadas para facilitarnos en la medida de lo posible todo el desarrollo del proyecto.

Los comienzos siempre son difíciles… y más en el mundo del software. En el caso de Polymer no iba a ser diferente. Cada vez que iniciamos un proyecto hay que montar su estructura de directorios, librerías externas, herramientas de despliegue, de verificación de código…etc, un universo paralelo en toda regla. En este artículo abordaremos la instalación de una serie de herramientas que nos permitirán de manera fácil y amigable crear la estructura del proyecto para así poder empezar a trabajar en el cuanto antes.

El objetivo es disponer de una serie de herramientas que nos hagan más fácil el ciclo de vida del proyecto. Dependiendo de la tecnología esto puede ser más o menos costoso, pero los beneficios a largo plazo en cuanto a productividad son innumerables.

Para agilizar nuestro flujo de desarrollo en Polymer vamos a instalar herramientas que nos permitan:

• Crear la estructura básica del proyecto.
• Poder levantar un servidor de desarrollo de manera fácil y poder probar nuestras aplicaciones.
• Gestor de tareas para lanzar los test o hacer el build.

Comenzamos instalando las aplicaciones que nos servirán para crear la estructura de nuestra aplicación (scaffolding). Los comandos mostrados en este artículo se harán sobre Ubuntu, pero la instalación en cualquier otro sistema operativo es igual de sencilla y solo basta con consultar la documentación de cada una de las herramientas.

Dentro de nuestro desarrollo vamos a utilizar las siguientes aplicaciones:

• Yeoman
• Bower
• Gulp

Como punto de partida estas herramientas nos permitirán crear la estructura básica del proyecto, gestionar nuestras dependencias y lanzar tareas, respectivamente.

Antes de nada necesitamos tener instalado NodeJS en nuestra máquina, para ello ejecutamos el siguiente comando:

sudo apt-get update

sudo apt-get install nodejs-legacy

Ahora instalamos el gestor de paquetes de NodeJS llamado npm.

sudo apt-get install npm

Una vez hecho esto ya tenemos disponible NodeJS en nuestro sistema y habilitado su gestor de paquetes para poder seguir instalando herramientas.

Vamos a proceder ahora a instalar el resto de ellas. Como hemos comentado antes vamos a instalar Yeoman, Bower y Gulp.

El proceso es tan sencillo como ejecutar el comando siguiente que instalará de una sola vez las tres aplicaciones:

sudo npm install -g yo bower gulp

Una vez finalizada la instalación ya tenemos disponibles estas herramientas para empezar a trabajar.

Lo primero que vamos a hacer va a ser crear la estructura básica del proyecto, para ello vamos a utilizar Yeoman. Esta herramienta nos permite generar proyectos base de un buen puñado de tecnologías, entre ellas Polymer. Para ello antes nos tenemos que instalar el generador de proyectos para Polymer que utiliza Yeoman.

Ejecutamos el siguiente comando:

sudo npm install -g generator-polymer

Ahora ya podemos crear fácilmente nuestra estructura del proyecto. Para ello creamos un directorio donde vayamos a tener nuestro proyecto y nos movemos dentro de él.

Un vez dentro del directorio ejecutamos el siguiente comando:

yo polymer

Nos aparecerá un asistente que nos guiará en el proceso de creación. Respondemos a todas las preguntas afirmativamente.

Una vez que el generador haya acabado podemos comprobar que se ha creado una estructura de directorios y ficheros de la siguiente manera:

• index.html: es el punto de comienzo de nuestra aplicación, la página principal.
• styles: Esta es la carpeta dedicada a los estilos que se vayan a aplicar a nuestra aplicación. Contendrá todos los css necesarios.
• test: Aquí van alojados los scripts para testear la aplicación.
• bower_components: En esta carpeta están las dependencias que instalamos a través de Bower (En artículos posteriores veremos como manejar e instalar las dependencias de nuestro proyecto con Bower). Si nos fijamos hay un archivo que se llama bower.json donde están definidas todas las dependencias de nuestra aplicación y que versiones aplica.
• node_modules: Contiene las dependencias específicas de NodeJS.
• .editorconfig: Es el archivo de configuración del editor. Muchos editores como Sublime Text, Brackets o Visual Studio Code lo soportan y podemos especificar diferentes configuraciones para nuestro IDE.
• .jscrc: Contiene la configuración para los estilos de código JavaScript.
• .jshintrc: Configuración de JSHint.
• gulpfile.js: Contiene las tareas que podemos lanzar con Gulp, entre ellas «serve» que nos servirá para lanzar la aplicación.
• package.json: Contiene todas las dependencias y sus versiones que estamos utilizando en el desarrollo de nuestra aplicación.
• wct.conf.json: Contiene toda la configuración de Web Component Tester.

Una vez que tenemos creada la estructura de directorios podemos lanzar la aplicación mediante Gulp.

Ejecutamos:

gulp serve

Este comando nos sirve para un despliegue de la aplicación en un entorno de desarrollo y nos abre directamente el navegador ejecutando la aplicación de ejemplo predefinida que nos ha creado el generador Yeoman para una aplicación de Polymer.

Una vez realizados estos pasos ya tenemos un proyecto base con el que empezar a trabajar. En próximos artículos entraremos a fondo en la creación de una sencilla aplicación a partir del proyecto que acabamos de generar.