Desde que Polymer está con nosotros han ocurrido muchas cosas. La promesa de los Web Components ha pasado de ser simplemente eso, una promesa, para convertirse en una realidad. El desarrollo basado en componentes se ha generalizado entre la inmensa mayoría de librerías y frameworks Javascript y la posibilidad de obtener esa misma funcionalidad (creación de elementos personalizados) de manera nativa gracias a Web Components resulta sin duda muy atractiva.

A pesar de todo lo anterior, lo cierto es que el uso de Polymer todavía no se ha disparado entre la comunidad de desarrolladores frontend, o al menos no tanto como cabría esperar. Aunque Polymer hoy es el motor de productos en Google tan importantes como YouTube, de aplicaciones de bancos tan relevantes como BBVA o ING, pasando por compañías de la talla de Coca-Cola, todavía había diversos aspectos que no acababan de cuadrar para la mayoría de las personas dedicadas al desarrollo frontend con Javascript.

Pues bien, Polymer 3.0 ha llegado para romper finalmente con toda la fricción anterior, para una mayoritaria adopción del estándar de Web Components en general y la librería Polymer en Particular. Ayer liberaron finalmente la release 3.0 y os vamos a contar las principales novedades, todas ellas pensadas para facilitar el uso de esta tecnología en el marco del desarrollo actual.

Problemas y sus soluciones en Polymer 3.0

Vamos a comenzar por resumir los puntos por los cuales Polymer no había penetrado, hasta ahora, como se esperaba en el mercado de desarrollo frontend y las soluciones aportadas gracias a la versión 3.x.

Polyfills

Hasta hace poco existía la necesidad de usar Polyfills para cubrir las carencias de los navegadores con respecto al estándar de Web Components. La necesidad de usar Polyfills producía que el conjunto de Javascript necesario para ejecutar Polymer pesase tanto como un framework.

Hoy Web Components se puede usar sin Polyfills en Chrome, Safari, Firefox, Opera y en mayor parte sobre Edge también, por lo que estamos hablando ya de un soporte nativo generalizado.

Bower vs npm

En versiones anteriores de Polymer se decidió usar Bower como gestor de dependencias y sin embargo, npm se ha convertido en el estándar para las dependencias frontend. Esta situación provocaba que, aquellos equipos de desarrollo decididos a usar Polymer tuvieran que lidiar con la necesidad de usar dos gestores de dependencias, lo que era poco deseable.

Finalmente Polymer 3.0 se ha pasado a npm, por lo que ahora es posible quitarse de en medio a Bower, un software que hasta sus propios desarrolladores habían jubilado.

HTML Imports

Esta especificación de Web Components nunca llegó a recibir el apoyo de la comunidad. Ya existe un sistema de carga de módulos Javascript, por lo que los fabricantes de navegadores no apoyaron la creación de un segundo sistema para la carga de módulos HTML.

La solución ha sido pasarse a los ES6 Modules, que es la tendencia en la mayoría de frameworks Javascript actuales. Gracias a ello, importar un componente Polymer requiere exactamente el mismo proceso que importar cualquier otro módulo de Javascript y por tanto es posible usar componentes Polymer, usando el mismo tooling que viene siendo habitual en los desarrollos Angular, React, etc.

Los tres epígrafes anteriores son los principales puntos que Polymer 3.0 por fin ha solucionado, de los cuales se beneficia no solo la librería de Google, sino todo el ecosistema del estándar Web Components en general.

Qué hay de nuevo en Polymer 3.0

Como se ha dicho, las principales novedades de esta versión de Polymer se basan en solucionar los problemas de adopción relatados anteriormente:

• Usa npm como sistema gestor de dependencias
• Usa Javascript Modules, en lugar de HTML Imports

Hoy todos los navegadores actuales son capaces de importar Javascript ES6 modules de manera nativa! esto permite que los desarrolladores puedan trabajar con Polymer sin necesidad de trabajar con transpiladores de manera intermedia, de modo que cualquier cambio en el código se pueda ejecutar directamente en el navegador, sin tener que esperar el transpilado del código, o a la generación de bundles, lo que significa mayor agilidad durante el desarrollo.

Con respecto a los Javascript ES6 modules también se ha tenido que resolver un problema, ya que los módulos generalmente se importan por nombre y los navegadores requieren que se haga por URL. Esto no es un inconveniente en frameworks como React o Angular, que usan WebPack para solucionar este asunto en la etapa del transpilado, incluso en etapa de desarrollo. En Polymer 3.0, que no requiere transpilado (al menos en etapa de desarrollo), es el Polymer CLI quien se hace cargo. Sin embargo, gracias a que Polymer 3 permite importar los módulos por nombre, habilita perfectamente el uso de sistemas como WebPack para integrar Polymer en conjunto con otras tecnologías y frameworks, con cero coste operacional.

Polymer-modulizer

Afortunadamente, el equipo de Polymer ha trabajado en una herramienta llamada "polymer-modulizer", que se encarga del trabajo mecánico de pasar los custom elements que usan HTML Imports a Javascript Modules.

Esta herramienta permite resolver de manera automática la prácticamente totalidad de las necesidades de migración de componentes y aplicaciones, desde Polymer 2.0 a Polymer 3.0. No funciona desde Polymer 1.x, ya que en esa versión de la librería no se usaban clases ES6 para implementar los custom elements.

HTML templates dentro de Javascript

Otra de las principales novedades de Polymer 3.0 es la introducción de los templates dentro del propio código Javascript. Esta necesidad viene dada porque ahora el código de los componentes vive en archivos Javascript y no en archivos HTML.

Para ello, Polymer 3 usa los ES6 template String, permitiendo escribir cadenas con templates en varias líneas y pudiendo interpolar expresiones de manera nativa.

Los templates HTML sin embargo se mantienen en Polymer 3 por motivos de compatibilidad hacia atrás, de modo que haya un camino suavizado de migración entre componentes 2.x a 3.x, facilitado también por el mencionado polymer-modulizer.

LitElement

Esta es una de las novedades de Polymer 3.0 más importantes en lo que respecta al rendimiento. Ya que ahora la definición de los templates se realiza mediante Javascript, el equipo de Polymer ha trabajado en una nueva manera de definir estos templates, que aproveche en mayor medida las capacidades nativas de la plataforma web.

LitElement en Polymer 3.x es el componente base, sobre el que se extiende para crear nuestros propios elementos personalizados. No es el único, ya que convive con el PolymerElement 3.0.

La diferencia entre LitElement y PolymerElement es que LitElement hace uso de la librería Lit-HTML y PolymerElement hace uso de templates HTML declarativos dentro de Javascript. PolymerElement existe por razones de compatibilidad hacia atrás pero por motivos de rendimiento se recomienda usar LitElement, el cual es nuevo en Polymer 3.0.

No voy a entrar a describir los motivos que hacen que LitElement obtenga mayor performance que otras librerías de vistas Javascript, incluso de algunas realmente rápidas como Inferno, ya que es algo que ya hemos explicado en el artículo de Lit-HTML.

Nuevo catálogo de componentes

En este caso la mejora no depende directamente del equipo de Polymer, sino del equipo de Material Components en Google. Igual que la Release de Polymer 3.0, anunciada en Google IO 2018, en este mismo congreso se ha dado a conocer Material-Components, que es una hornada de componentes Material Design que se han presentado de manera conjunta para usar en las tres plataformas principales: Android nativo, iOS nativo y Web.

Este nuevo catálogo de componentes, que sustituye a los conocidos "Paper Elements" usa las guías de diseño de Material Design 2. Su principal novedad es la posibilidad de aplicar fácilmente temas gráficos, para conseguir que el aspecto de las aplicaciones Material Design puedan ser fácilmente adaptables al Look & Feel propio de cada empresa o sitio web.

Los componentes de Material-components-web están realizados en Polymer 3.0 y usan LitElement. Sin embargo, estos detalles de implementación son realmente indiferentes para los desarrolladores, ya que puedes usar estos componentes en cualquier framework o librería popular, gracias a la interoperabilidad de WebComponents, como React, Angular, Vue…

PWA Starter Kit

Mención especial merece el nuevo PWA Starter Kit, que sustituye a Polymer Starter Kit. Básicamente nos ofrece un template nuevo para comenzar el desarrollo de una Progressive Web App, basado en Polymer 3.0 y LitElement. El PWA Starter Kit viene con diversas novedades que explicaremos en futuros artículos, pero que básicamente se pueden resumir en:

• Existen diversas plantillas de aplicaciones, con unas y otras variantes, adaptables a un público mayor.
• Usa componentes nuevos, basados en el mencionado Material Web Components
• Ofrece comandos para test, build y otras operaciones para desarrollo.
• Usa un patrón unidireccional de data-binding, montado encima de la librería Redux.

Conclusión

Como muchos otros desarrolladores, en DesarrolloWeb.com estábamos ansiosos por la llegada de Polymer 3.0, que han lanzado ayer mismo, durante el Google IO 2018. Por fin tenemos esta nueva versión de la librería, que esperamos que lleve el mundo de Web Components y Polymer a la relevancia que merece, por ser un estándar abierto y por adaptarse a todo tipo de aplicaciones web y sitios web.

En el siguiente artículo vamos a poner manos en el código y a presentar un Hola Mundo en Polymer 3, así podrás ver de manera práctica algunas novedades de esta librería y la implementación de Web Components.