Polymer, la librería para agilizar el desarrollo con Web Components
Nos encontramos en un momento en el que no paran de aparecer nuevas propuestas de tecnologías, frameworks y librerías para el desarrollo front-end. Una de las últimas y más versátiles alternativas que se ha sumado a esta corriente es Polymer, “un nuevo tipo de librería Javascript”, tal y como se define a sí misma.
Su principal diferencia frente a otras librerías y frameworks, es que Polymer está basada en el estándar de los Web Components, una tecnología que está revolucionando el desarrollo web. Ya hemos hablado anteriormente del estándar de los Web Components, tanto desde el punto de vista teórico como desde el punto de vista más práctico, así que hoy toca centramos en esta librería, que nos facilita mucho la vida de cara al trabajo con Web Components.
Sólo con Web Components resulta difícil realizar las cosas de una manera ágil. Esta es una sensación común para las personas que se introducen en esta nueva tecnología, que se acentúa si el programador llega a Web Components después de haber conocido otras herramientas más intuitivas, como podrían ser AngularJS o ReactJS.
Bajo este marco, Polymer cobra todo su sentido. Por un lado, nos permite aprovechar algo tan importante como es el nuevo estándar de Web Components, que nos acerca un nuevo paradigma para el desarrollo front-end. Por otro, nos ofrece herramientas para un desarrollo rápido y amigable, con recursos tan útiles como el binding, doble binding, interpolación de datos en plantillas HTML, acceso al DOM, etc.
Polymer, además, es una librería que se puede usar en combinación con muchas otras tecnologías. Hay librerías que se comportan bien para aplicaciones de gestión, otras para interfaces gráficas, otras simplemente sirven para manipular el DOM… Con Polymer, sin embargo, podríamos abarcar un amplio abanico de posibilidades y crear componentes de todo tipo, que podemos incorporar en cualquier proyecto, independientemente del stack de tecnologías que ya se estén usando.
¿Qué incluye Polymer?
Polymer ofrece tres elementos distintos a los desarrolladores para la construcción de aplicaciones o sitios web.
- Herramientas para el desarrollo de Web Components de un modo ágil.
- Un catálogo de componentes listos para usar en cualquier proyecto, fáciles de integrar incluso sin necesidad de conocer la librería.
- Un Polyfill que, instalado como script en una página web, permite que los navegadores que aun no son compatibles con el estándar de los Web Components lo entiendan y lo procesen correctamente. Este Polyfill actualmente está separado de la propia librería Polymer, por lo que podría ser usado para cualquier desarrollo, incluso sin Polymer.
Partes de un componente Polymer
Un componente Polymer tiene dos partes fundamentales que tenemos que definir durante su creación:
- Template: Es el HTML o DOM local que tendrá un componente. Contendrá todos los elementos que se verán en la página cuando usemos ese componente. Puede ser una sola etiqueta o un conjunto de ellas y habitualmente también contendrá un CSS para personalizar su aspecto. Esta parte es opcional, puesto que podría haber componentes que no tienen representación alguna dentro de la página web.
- Script: Es el script Javascript necesario para darle funcionalidad. Como mínimo en la parte del script tendremos lo que se llama el registro del componente.
Un componente básico Polymer
Ahora vamos a ver cuál sería el código mínimo necesario para la creación de un componente Polymer. Este listado encontrarás que tiene algunas cosas adicionales a las partes del componente señaladas en el anterior punto, pero en seguida las explicamos.
<!-- Importar polymer -->
<link rel='import' href='bower_components/polymer/polymer.html'>
<!-- Definir el componente -->
<dom-module id='mi-elemento'>
<template>
<p>DOM local</p>
</template>
<script>
Polymer({
is: 'mi-elemento',
});
</script>
</dom-module>
Como ves, en el listado comenzamos con la etiqueta
Luego encuentras una etiqueta
Luego tenemos el <template>, que es el HTML y CSS del componente. En el listado anterior hay únicamente un párrafo e incluso podría estar vacío el template, pero podríamos tener algo más complejo como esto:
<template>
<style>
div{
color: red;
}
</style>
<div>
Este es el contenido del <b>componente</b>
</div>
</template>
Por último tenemos el <script> para poder registrar el componente. Se hace con la función Polymer (¡Ojo con la P mayúscula!) e indicando como parámetro un objeto. Ese objeto incluirá muchas de las cosas que un componente necesita para funcionar, pero de momento lo único que le estamos mandando es el nombre del componente en una propiedad llamada is dentro del objeto pasado a la función Polymer.
Polymer({
is: 'mi-elemento',
});
El código del componente lo pondrás en un archivo HTML independiente, al que generalmente nombrarás con el mismo nombre del componente. En este caso sería: mi-elemento.html.
Cómo usar este componente
Con esto, tenemos ya nuestro componente creado y solo nos queda usarlo. Para ello, tendremos que crear una página de demo. Será un archivo HTML común, en el que agregaremos el import para poder traernos el código del componente.
<link rel='import' href='mi-elemento.html'>
Luego ya solo será usar el componente, mediante una etiqueta con su nombre.
El código HTML completo de la página de demo quedaría algo así:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>elemento demo</title> <link rel='import' href='mi-elemento.html'> </head> <body> <mi-elemento></mi-elemento> </body> </html>
Solo te quedaría abrir este archivo, pero recuerda una cosa muy importante: para poner en marcha una página que realiza imports (y que funcione bien) tienes que abrirla mediante un servidor web. Es decir, mediante https://. Puedes obtener un servidor web por cualquier mecanismo, como un paquete de Nodejs, las propias polymer-cli o un Apache en local o incluso subiendo los archivos a un servicio de hosting.
Recomendaciones SEO para Polymer
El SEO nos trae de cabeza en más de una ocasión a todos los profesionales del Desarrollo Web y, generalmente, es una de nuestras principales preocupaciones cuando nos enfrentamos a un nuevo proyecto en Internet que ponemos en marcha con una tecnología que se sale de lo habitual. En caso de utilizar Polymer, la librería para agilizar el desarrollo con Web Components de la que hemos hablado en más de una ocasión, hay algunas recomendaciones que conviene seguir para que Google interprete bien su contenido y nuestros proyectos indexen de forma óptima en sus resultados.
Polymer y Web Components son SEO Friendly
Con Polymer se pueden crear Custom Elements de Web Components como etiquetas nuevas que expanden el HTML y que podemos usar en cualquier proyecto web. Por lo que se puede usar en cualquier sitio, incluyendo en las páginas que tienen un CMS ya optimizado para buscadores, como por ejemplo WordPress. Si Polymer es bueno o no para el SEO va depender de cómo sea el sitio donde se aplique y no de la librería o de Web Components en general.
Server Side Rendering, la mejor opción
Lo deseable para el SEO en Polymer es que el sitio disfrute de server side rendering. Es decir, que la página se fabrique del lado del servidor y que se sirva el contenido en cada URL. Así funciona cualquier lenguaje de cara al servidor, pues en HTML se realiza la página y el contenido se envía al cliente, tal y como hacen la mayoría de los CMS. El problema es que cada vez más servicios se basan en las páginas SPA para realizar aplicaciones y usan sistemas de routing basados en JavaScript, por lo que el propio navegador se encarga de procesar la URL y obtener los datos con los que construir por el HTML y pintar la página, así que ya no dispondríamos del deseado server side rendering.
Las páginas que usan el routing de Polymer se ejecutan siempre sobre la principal o el mismo index.html. Las rutas se comunican desde ese Javascript y muestran unos componentes u otros, y como no hay realmente contenido original en cada ruta (lo genera javascript) no es tan beneficioso para el SEO. La solución para resolver esto pasa por utilizar frameworks JavaScript más avanzados, como pueden ser Angular, VueJS o los basados en la librería React. Con esta nueva capa podremos crear una página del lado del servidor con contenido original y así Google será capaz de indexar mejor nuestro sitio.
Aunque no existe una solución genérica para facilitar el server side sendering en una app realizada con el sistema de routing de Polymer, existen algunas alternativas:
- Polymer en sitios clásicos. Usar Polymer en un sitio habitual, que tenga programación del lado del servidor y genere HTML para cada URL.
- Hacer uso de frameworks que faciliten el server side rendering. Usar frameworks, como Angular o React, puede parecer retórico y poco óptimo al cargar librerías distintas, pero resulta viable y funcional si queremos resolver el problema del SEO.
- Herramientas de terceros. Probando herramientas de terceros, incluso si dispones de Server Components o artículos de blogs, puedes desarrollar por tu cuenta el sistema de renderizado del lado del servidor.
La apuesta de Google
Polymer es una librería creada y apoyada por Google, algo que ya de por sí resulta interesante. Sin embargo, no es su única propuesta para el desarrollo front-end, ya que antes de Polymer, Google ya había presentado AngularJS, framework que se ha introducido con mucha fuerza en España y el resto del mundo.
Ambas son fantásticas alternativas, que merece la pena conocer y tener muy en cuenta, pero parece que, a la hora de la verdad, Google prefiere Polymer. Los nuevos productos de la compañía del buscador están construidos encima de Polymer y la propia empresa a través de sus ingenieros ha declarado que la tendencia va a continuar así. Un ejemplo de ello es el servicio Google Music.
También la componetización es una apuesta clara en relación al desarrollo front-end. Consiste en la creación de las aplicaciones web en base a componentes, modulares y reutilizables, con la ventaja de que Polymer aprovecha la característica nativa de los navegadores modernos Web Components, mientras que los demás hacen la guerra por su cuenta.
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.
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.