En Polymer, desde la versión 1.x, existe una interfaz de línea de comandos disponible para resumir muchas de las acciones típicas del flujo de trabajo de un proyecto. Esto no es nuevo para ti, pues ya introdujimos las herramientas de Polymer CLI en un artículo anterior del Manual de Polymer 3.

En este caso vamos a explicar una alternativa interesante, que será fundamental para una gran cantidad de desarrolladores deseosos de usar Polymer en cualquier tipo de sitio web: Webpack. Con Webpack podemos realizar todo tipo de acciones y tareas en el flujo de trabajo de proyectos frontend. En resumen, todo lo que puedes hacer con Polymer CLI lo puedes realizar también con Webpack, ajustando mejor las tareas a las necesidades de tu proyecto.

Por qué usar Webpack con Polymer (3.x)

Seguro que más de uno se preguntará, si tenemos Polymer CLI, ¿Para qué necesitamos usar Webpack? Es sin duda una buena pregunta y necesita alguna explicación.

Si conoces Polymer 1 o Polymer 2, ya tendrás una idea exacta de lo que te ofrece y seguro que sabrás sacarle todo el partido al CLI, así como conocerás sus limitaciones. Para quien no tenga toda esa experiencia, hay que señalar que las opciones de trabajo con el CLI son bastante restringidas a la creación de proyectos de elementos o aplicaciones PWA. Es decir, sirven para determinados tipos de proyectos y realizan su trabajo con las tecnologías que el equipo de Polymer decide. No es que tenga nada de malo, pero en muchas ocasiones el flujo de trabajo en un proyecto hace imposible ceñirse a cómo el Polymer CLI hace las cosas.

Polymer CLI nos permite algunas cosas como estas:

• Crear proyectos de elementos
• Crear proyectos de Progressive Web Apps
• Iniciar un servidor de desarrollo
• Producir el build de una aplicación, para llevar a producción.

Pero no permite personalizar mucho su comportamiento, por lo que sería difícil o imposible hacer otra serie de acciones, como las siguientes:

• Usar Typescript como lenguaje
• Gestionar el build de componentes para usar en sitios web y no aplicaciones web
• Mezclar el flujo de trabajo de Polymer con el flujo de trabajo de otros frameworks y librerías, como Angular, React, Vue, etc.
• Usar PostCSS u otras herramientas de compilación del CSS
• Disponer de un servidor de desarrollo con live reload o hot reload.

Para todo esto, y mucho más, podemos usar Webpack. El único detalle es que tendrás que trabajar un poco más, o usar otros gestores de aplicaciones Polymer diferentes del CLI oficial.

Me parecen fundamentales del listado anterior un par de puntos:

Primero el uso de Polymer en el flujo de trabajo de aplicaciones realizadas con otros frameworks. Recordemos que Polymer se presenta a sí mismo como un complemento a cualquier tecnología de desarrollo frontend y no necesariamente una alternativa. Todos los frameworks principales del momento usan Webpack para los procesos del flujo de trabajo, por lo que debemos saber agregar a Polymer y Web Components dentro de ellos.

Segundo, la posibilidad de usar componentes de Polymer en otro tipo de proyectos, que no sean necesariamente una Progressive Web App. Imagina que estás haciendo un sitio en WordPress, Laravel, o simplemente en PHP sin usar un CMS o framework concreto. En este caso no te servirá el proceso de build que te ofrece el CLI, o tendrás que buscarte la vida para adaptar tus archivos producidos de manera algo manual.

Webpack resuelve todas estas necesidades y usarlo no resulta complejo. Incluso es muy posible que ya conozcas Webpack y gracias a que hoy Polymer 3 trabaja con npm e imports ES2015, podrás realmente comenzar a usar esta potente librería y su catálogo de componentes en cualquier proyecto que desees.

Proyectos que combinan Webpack con Polymer

El hecho de Polymer haberse pasado a npm y abandonado los imports HTML, ha resultado fundamental para aumentar la adopción por parte de los desarrolladores. Muchas personas con experiencia en Webpack han generado proyectos donde se comienza a usar Polymer de manera similar a cómo se trabaja con otros frameworks. Queremos compartir algunos de ellos con vosotros, pues es muy posible que ya resuelvan vuestras necesidades y ahorren mucho tiempo de desarrollo e investigación. En último caso, te servirán de inspiración si tienes que usar Webpack en un proyecto, junto con Polymer, personalizando hasta el último detalle de los procesos de desarrollo y producción.

Polymer-webpack-loader

Este proyecto está realizado por el mismo equipo de Polymer y permite usar componentes de Polymer en lugares donde actualmente se está usando WebPack. Está pensado para usar en componentes almacenados en archivos ".html", por tanto es un proyecto para componentes Polymer 2.x y no 3.x (en Polymer 3 los componentes se escriben en archivos Javascript). Creía importante destacar este proyecto porque está realizado por el propio equipo de Polymer y quizás en un futuro próximo exista un loader para componentes Polymer 3, o actualicen este loader para que también te sirva para componentes que vienen desde archivos .js.

https://webpack.js.org/loaders/polymer-webpack-loader/

Polymer Skeleton

Este proyecto me parece fundamental para aquellos que necesiten aprender a integrar Polymer 3 con Webpack. Es básicamente una especie de boilerplate de un proyecto realizado con Polymer 3, que usa Webpack para realizar las tareas, en lugar del CLI. Trabaja con Webpack 4, te ofrece ya un servidor de desarrollo con hot reload, PostCSS integrado, etc. El modo de trabajo sería clonar el proyecto y comenzar a desarrollar sobre esa base de código.

https://github.com/PolymerX/polymer-skeleton

PolymerX-CLI

Este CLI es un conjunto de herramientas para producir proyectos Polymer con templates como el comentado en el punto anterior, Polymer Skeleton. Es de los mismos creadores, pero es más reciente y llega un poco más lejos. Básicamente lo que nos ofrece es un nuevo CLI para generar proyectos desde línea de comandos, basados en Polymer 3, pero usando Webpack en lugar del CLI. Nos permite hacer todos los comandos que conocemos del Polymer CLI, pero trabaja con Webpack por debajo. Es un proyecto muy reciente y seguramente evolucionará en breve, por lo que hay que tenerlo presente

https://github.com/PolymerX/polymerx-cli

Polymer 3 Webpack starter kit

Aquí nos encontramos ante un clon del Polymer Starter Kit, que han modificado para que trabaje con Webpack en lugar del CLI. La estructura de aplicación, el lazy load de componentes están realizados con el mismo esquema del creado por el equipo de Polymer, por lo que te será muy familiar si ya lo conoces. Es muy interesante porque te ofrecerá nuevas guías sobre cómo configurar Webpack para usarlo en un proyecto de Polymer como el que puedes haber usado para otros proyectos.

https://github.com/Dabolus/polymer3-webpack-starter-kit

Conclusión

Ahora que ya conoces los beneficios de usar Webpack con Polymer 3 habrás podido entender la cantidad de posibilidades que se abren ante nosotros, al poder llevar el poder de Web Components a todo tipo de proyectos.

Si te interesaron las posibilidades, en el siguiente artículo te vamos a explicar cómo montar tu propio flujo de desarrollo de Polymer + Webpack, que puede ser interesante en el caso que lo te sirvan ninguno de los proyectos mencionados en el punto anterior, y sobre todo imprescindible cuando quieres usar componentes Polymer o Web Components nativos en sitios web tradicionales o en sitios donde ya vienes usando otros frameworks. Mientras tante, te recomendamos leerte el Manual de Webpack, pues necesitarás aprender varias cosas en él antes de ponerte manos a la obra para integrar Polymer 3.