Qué evolución tendrán Polymer y LitElement

Polymer tiene una corta vida, pero su evolución ha sido meteórica y con un futuro prometedor. Sin embargo, la llegada de LitElement, una clase de programación orientada a objetos JavaScript que podría considerarse su evolución (no en vano comparten creadores) nos hace plantearnos su evolución. La clave de esta historia son los Web Components, que evitan la necesidad de utilizar librerías propietarias utilizando el estándar de JavaScript, mejorando el peso de las aplicaciones y ayudando al navegador a resolver todo por su cuenta.

Factores clave de la evolución de Polymer

• Su filosofía. Sus creadores han fomentado que el navegador realice las tareas siempre por su cuenta.
  • No instalar librerías si el navegador ya lo ofrece.
  • No utilizar código propietario para eventos si JavaScript posee esto en el navegador.
  • Para qué crear animaciones en JavaScript si con CSS lo podemos realizar.

  Todo esto fue lo que creó Polymer hasta su evolución a Polymer 3.

• Versiones de Web Components y Polymer. Algo que ha condicionado su evolución ha sido Web Components y aunque sus comienzos venían impulsados solo por Google, con el tiempo otras empresas decidieron participar hasta convertirlo en un estándar. Su rápida evolución ha propiciado las diferentes versiones de Polymer.
  • En su versión 1 trabajaba con Web Components V0.
  • En la 2 pasó a Web Components V1 (la definitiva del estándar).
  • Polymer 3 suprime para siempre los HTML Imports, para utilizar exclusivamente ES6 Module imports y templates en JavaScript.
• Ser frontend-friendly. La aceptación por la Comunidad no tuvo buen comienzo, ya que Polymer hacía lo mismo que otras librerías, pero por caminos distintos. Por ejemplo, utilizaba Bower como gestor de dependencias, cuando lo habitual era npm o Yarn, o usaba HTML imports, en lugar de importar el código de los componentes mediante Javascript. Además, Polymer pretendía  crear una base que permitiese escribir componentes de manera estándar y utilizar el código en cualquier tipo de proyecto y arquitectura o stack de tecnologías.

Por todo ello, podríamos considerar que, a lo largo del tiempo, Polymer ha sido una especie de banco de pruebas y sus desarrolladores mantienen la idea de que se vuelva un modelo que implementen los propios navegadores, incluso añaden, que el futuro ideal es que la librería desaparezca. Es decir, que todo lo que hace Polymer se pueda realizar con JavaScript nativo.

Y llega LitElement como futuro y presente de Polymer

Fiel a su filosofía, LitElement es liviano y se apoya en las características que tiene JavaScript. Es la base en la que nos ayudamos para crear componentes sobre el estándar Web Components, como vimos en Introducción a LitElement, y su evolución ha creado una serie de productos JavasSript, un Ecosistema propio como:

• LitHTML: Esta librería es rápida y con poco peso, capaz de crear templates basados en JavaScript y cuya actualización es automática en el momento que sus datos asociados se modifican (los valores de los bindings).
• LitElement: Es la clase base en la que se crean Web Components estándar.
• Polymer Library: La librería Polymer tradicional con su versión 3.

Que también completarlos con estos otros:

• PWA Starter Kit: Aplicación progresiva basada en Web Components con LitElement. Funciona con Redux y utiliza los PWA-Helpers de Google.
• Material Web Components: Un buen catálogo de componentes de interfaz de usuario, basados en LitElement.

¿Qué usamos Polymer o LitElement?

Teniendo desarrollado un Web Component con LitElement, lo podremos utilizar en cualquier tipo de proyecto, no importa el stack de tecnologías.

Si somos principiantes en Web Components, LitElement nos lo pone más sencillo que Polymer, ya que es más rápido y ligero.

Como desarrolladores de Polymer, podríamos empezar a escribir los componentes con LitElement. No es nada complicado pasar de una base a otra porque todo se hace de una forma similar. Por ejemplo, podríamos usarlo en:

• Aplicaciones creadas en Polymer 3 y en la que podemos combinar componentes realizados con LitElement, pues son compatibles con Polymer.
• Para aplicaciones y componentes nuevos comenzaremos usando LitElement. Con esto, nuestras aplicaciones gozarán de mayor vida al estar basadas en LitElement.

Publicado el 07/01/2023 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.