Polymer 3.0 ya está aquí

Desde que apareció en 2013, Polymer se ha convertido en una de las novedades más destacadas entre las tendencias de Desarrollo Web, ya que esta librería JavaScript basada en el estándar de los Web Components agiliza gran parte de las tareas de desarrollo frontend. Sin embargo, y a pesar de encontrarse  detrás de numerosas aplicaciones y populares aplicaciones web,  su uso todavía no se ha extendido de forma mayoritaria entre los equipos técnicos debido a algunos inconvenientes detectados. Ya desde su versión 2.0, que analizamos hace unos meses, los ha limando, pero la nueva versión 3.0 está cargada de novedades que convencerán a los más escépticos y que analizamos a continuación.

Antes de analizar propiamente la nueva versión de Polymer, recopilemos algunos problemas que se habían detectado en las versiones anteriores:

  • Polyfills. Polyfills existía para cubrir las necesidades de los navegadores que no soportaban los Web Components, pero hoy dichos componentes web ya se pueden utilizar sin Polyfills en Chrome, Safari, Firefox, Opera y en mayor parte sobre Edge.
  • Bower vs npm. Bower se utilizaba como el gestor de dependencias de Polymer. Sin embargo, npm se ha convertido en el modelo para las dependencias frontend, por lo que los desarrolladores han jubilado Bower.
  • HTML Imports. Esta especificación no llegó a recibir el apoyo de la comunidad, por lo que la solución ha sido pasarse a los ES6 Modules, que es la preferencia en el conjunto de frameworks Javascript actuales. Con esto, la importación de un componente de Polymer es igual que importar cualquier otro módulo de Javascript.

Novedades de Polymer 3.0

Las principales novedades se basan en solucionar los problemas de adopción descritos anteriormente, es decir, npm como sistema administrador de dependencias y Javascript Modules, en vez de HTML Imports.

De manera nativa, los navegadores importan Javascript ES6 modules, permitiendo a los desarrolladores trabajar con Polymer sin transpiladores de manera intermedia. Esto viene a decir que cualquier cambio en el código se ejecuta directamente en el navegador, lo que permite más fluidez en el desarrollo.

Javascript ES6 modules también ha tenido que resolver una dificultad,  ya que los módulos se importan por nombre y los navegadores lo solicitan por URL. Gracias a que Polymer 3 permite importar los módulos por nombre, concede el uso de sistemas como WebPack para integrar Polymer en conjunto con otras tecnologías y frameworks, sin coste operacional. Esto constituye un avance que indudablemente, estábamos esperando en esta versión. A continuación, os ofrecemos más detalles acerca de los cambios producidos en esta versión:

  • Polymer-modulizer. Polymer-modulizer es una herramienta  que se encarga del trabajo mecánico de pasar los custom elements que usan HTML Imports a Javascript Modules. Desde la versión 2 hasta la 3, podremos solucionar la mayor parte de las necesidades de migración de componentes y aplicaciones.
  • HTML templates dentro de JavaScript. Se integran las templates dentro del propio código JavaScript, pues ahora el código de los componentes habita en archivos JavaScript y no en los archivos HTML. Polymer 3 usa los ES6 template String, proporcionando la escritura de cadenas con templates en varias líneas y permitiendo intercalar expresiones de forma nativa. Sin embargo, las templates de HTML se mantienen por motivos de compatibilidad.
  • LitElement. Una de las novedades más importantes y que afecta al rendimiento es LitElement. La interpretación de las templates se realiza mediante JavaScript, aprovechando ahora las capacidades nativas de la plataforma Web. Es el componente principal sobre el que se crean nuestros propios elementos personalizados, aunque que convive con PolymerElement 3.0.
  • Nuevo catálogo de componentes.  Material-Components es una mejora del propio equipo de Google y que se presenta de manera conjunta con Material Design para usar en las tres plataformas principales: Android nativo, iOS nativo y Web. Este catálogo sustituye a Paper Elements, que es el que utiliza las guías de diseño de Material Design 2. La novedad es que hace posible que los temas gráficos se apliquen muy fácilmente y que se adapten de manera cómoda a cada sitio web.
  • PWA Starter Kit.  PWA Starter Kit sustituye a Polymer Starter Kit, ofreciéndonos una nueva template para iniciar el desarrollo de una Progressive Web App, basado en Polymer 3.0 y LitElement. Las novedades que tiene PWA Starter Kit son las siguientes:
    • Varias plantillas de diferentes aplicaciones, con variantes y adaptables.
    • Hace uso de componentes nuevos que se basan en Material Web Components.
    • Propone comandos para test, build y distintas operaciones para desarrollo.
    • Utiliza un patrón unidireccional de data-binding, montado encima de la librería Redux.

Esta nueva versión de Polymer cumple con todas las expectativas que ya prometían las versiones anteriores. El hecho de que sea de código abierto y que pueda adaptarse a todo tipo de aplicaciones y sitios web le está aportando la importancia que merece en el mercado.