Hace poco escribí un artículo dedicado al Polymer Starter Kit en el Manual de Polymer. Sin embargo, varias cosas han cambiado en la nueva versión de este proyecto que voy a comentar ahora.

Lo primero es decir que el Polymer Starter Kit anterior ya no se recomendaría usar, porque la versión actual se apoya en el Polymer CLI, que es una herramienta que agrupa en un único comando todas las herramientas dispersas que tenía Polymer anteriormente. Si quieres usar Polymer CLI (y deberías) el camino más rápido y optimizado de obtener una correcta estructura de aplicación es el Polymer Starter Kit 2.

Básicamente, todo lo dicho anteriormente sobre el Polymer Starter Kit aplica también a esta nueva versión, con la salvedad que no incluye la potentísima tarea de Gulp que antes teníamos disponible. Además ahora usa los app-elements, cuando antes usaba los paper-elements. Pero para los que no conocían de antes este proyecto, vamos a comentarlo poco a poco.

Qué es Polymer Starter Kit

Es un proyecto genérico de PWA (Progressive Web App) desarrollado en Polymer. Sirve para iniciar un proyecto de aplicación Polymer con una serie de ingredientes ya configurados y puestos en marcha, comunes a la mayoría de las aplicaciones. Entre ellos encontramos:

• Un template con la barra lateral app-drawer-layout, que nos sirve para crear ese menú lateral típico de Material Design, que se muestra o se colapsa dependiendo de la resolución de la pantalla del usuario.
• Un sistema SPA (Single Page Application) en el que tenemos varias vistas
• Integración del PRPL Pattern, que enseguida comentaremos con mayor detalle.
• Una arquitectura de archivos de aplicación, que podemos seguir para una estructura adecuada y mantenible de los proyectos.

Además de todo esto, tiene varios ejemplos de componentes y código en general que nos pueden servir de guía de buenas prácticas cuando desarrollamos aplicaciones en Polymer. Si estás comenzando con Polymer todo el código del Polymer Starter Kit 2 te resultará de mucho valor y conviene estudiarlo con detalle, para aprender muchas cosas de interés en el desarrollo con Polymer.

PRPL Pattern

A mi modo de ver, aparte de una buena estructura de proyectos, lo más valioso que nos ofrece el Polymer Starter Kit 2 es el PRPL Pattern. Básicamente es un patrón de creación de aplicaciones y Progressive Web Apps en los que se busca un mayor rendimiento y optimización. Está basado en cuatro conceptos que son las siglas de PRPL:

• Push: los recursos críticos se entregan en la primera carga
• Render: se renderiza solo la URL inicial initial route.
• Pre-cache: se realiza un pre-cacheo de las siguientes principales rutas/componentes.
• Lazy-load: los componentes que no se necesitan en la primera carga, se descargan cuando realmente hacen falta

Realmente los términos incluidos en su nombre describen las características de este patrón, características ideales para cualquier tipo de aplicación web y las SPA en particular. Su principal objetivo es disponer de una correcta optimización, que busca una renderización del contenido lo más rápida posible, que permita a los usuarios comenzar a interactuar con el sitio cuanto antes. Además permite que el resto de contenidos del sitio también tengan una carga muy veloz.

Para que este patrón funcione intervienen diversas tecnologías como los Service Workers y la posibilidad del propio Polymer de cargar componentes de manera asíncrona. Para ello se necesita además un cuidado proceso de "build" de las aplicaciones incluido de casa en las herramientas de Polymer CLI.

Cómo usar el Polymer Starter Kit 2

Realmente, para usar el Polymer Starter Kit 2 necesitas apoyarte en las herramientas del Polymer CLI. Eso ya está explicado en otro artículo anterior de DesarrolloWeb.com, por lo que no vamos a tratarlo aquí de nuevo. Simplemente sigue la lectura con el artículo de Polymer CLI.

App-elements vs paper-elements

Una de las novedades más destacadas en el Polymer Starter Kit 2 es que ahora usan los app-elements, mientras que antes se usaban los paper-elements. Ambos forman parte de los componentes incluidos en el catálogo de elementos de Polymer.

La diferencia superficial de los app-elements es que no están tan ligados a las guías de material design, sino que están más abiertos a la configuración estética por parte del usuario. Por ejemplo, no tienen los colores de las paletas material, no usan la fuente predeterminada, etc.

Pero en el fondo, la mayor ventaja de los app-elements con respecto a los paper-elements es que disponen de un mayor rendimiento. Por dentro están construidos con otro código y consiguen tener un desempeño mejor en el uso de las aplicaciones.

Custom builds

No voy a entrar en detalles, porque realmente es algo avanzado que no todos van a necesitar, pero una de las preguntas típicas que se hacen sobre Polymer es ¿se puede usar ES6? ¿Es posible trabajar con preprocesadores como Sass?

Realmente se puede, mediante los custom builds. Existe la posibilidad de usar hooks en el proceso de bulid en los que ejecutar los correspondientes transpiladores o el pre-procesamiento del CSS. Es algo que vimos con detalle en la clase del Polymer Starter Kit en el Curso de desarrollo de Apps con Polymer y que más adelante me gustaría encontrar el tiempo de describir en un artículo. Aunque de momento con lo que hemos explicado será suficiente para que entiendas el Polymer Starter Kit. Paralelamente, se preveé que en Polymer 2 se incluyan de salida algunas cosas como ES6, por lo que ciertamente en un futuro próximo estos custom builds serán menos necesarios.