Polymer 1.0

El pasado 28 de mayo fue anunciado la versión 1.0 de Polymer. Polymer es una biblioteca para el desarrollo front-end que combina HTML, CSS y JavaScript para crear componentes web. Estos componentes nos ofrecen encapsulamiento e interoperabilidad.

Polymer está diseñado para hacer más fácil y más rápido a los desarrolladores la creación de componentes web reutilizables. En este artículo explicaremos qué es Polymer.

Contextualizando

Desde hace unos años, se está produciendo un trasvase de responsabilidades entre back-end y front-end. Hasta hace poco, cuando se creaba una web, se procuraba que la lógica estuviese toda en el servidor. Las páginas, ya fuesen JSP, PHP, etc, contenían el código que generan el HTML resultante.

A partir de la aparición del estándar HTML5 con sus API y la continua mejora de JavaScript, se está llevando cada vez más el protagonismo al navegador del cliente. Tecnologías como AJAX, REST, JSON, etc, han ido ampliando y diversificando las posibilidades en la web.

En HTML, disponemos de etiquetas como <button> o <form> que contienen sus propios atributos, métodos y eventos. Gracias a estos simples elementos, cualquier persona puede construir una sencilla página web.

¿Os imagináis poder crear nuestras propias etiquetas?. Elementos personalizados que podemos usar en cualquier parte de nuestro sitio web. Esto, de una forma muy simplificada, es Polymer.

¿Qué es Polymer?

Para entender Polymer, antes tenemos que comprender el concepto de polyfill y web components. Un polyfill es un trozo de código o un plugin que permite tener funcionalidades en aquellos navegadores que nativamente no lo soporten. Los web component son un conjunto de normas que permite la creación de widgets o componentes reutilizables en las aplicaciones web.

Polymer se encuentra dentro de la iniciativa de los web components, impulsado por el grupo de trabajo webApps del W3C. Polymer no son web components, pero se construye apoyándose en las normas de los web components para ayudarse a construir elementos personalizados propios.

En la siguiente imagen podemos ver la estructura en Polymer, donde contamos con las siguientes partes:

• Custom elements. Polymer nos ofrece una serie de componentes preparados para utilizarlos.

• Polymer library. Proporciona la sintaxis declarativa para definir componentes. Por otra parte, nos aporta plantillas, Data binding, etc.

• Web components primitives. Estas normas proporcionan la base sobre la cual construir nuestros componentes personalizados. Polymer utiliza un conjunto de polyfills de la biblioteca webcomponents.js para funcionar en la mayoría de navegadores.

Versión 1.0

La versión 1.0 está preparada para ser usada en producción y ha traído una serie de cambios importantes respecto a la v0.5.

• Soporte offline

• Soporte para recibir notificaciones Chrome

• Nuevo pack de componentes

• Polymer Starter Kit

• Compatibilidad con navegadores de Smartphone

En resumen, gracias a Polymer, podremos dotar de mayor modularidad, cohesión y menor acoplamiento a nuestras aplicaciones web.

Polymer es de lo último relacionado a los web components, por su alcance y características están llamados a convertirse en el nuevo modo en el que se desarrollen las aplicaciones web, tanto para PC o MAC como de los nuevos protagonistas; smartphones, tablets y nuevos dispositivos.

Aunque el potencial de Polymer es alto, no tenemos que olvidar que está en la versión 1.0. Por lo tanto, tenemos que ser conscientes de que no tendremos (aún) todas las posibilidades a nuestro alcance.

Más información | Polymer