Aproximación práctica a Polymer

Hace ya unas semanas realizamos un aproximación teórica a Polymer, la librería para agilizar el desarrollo con Web Components. En esta ocasión, nos centraremos en los aspectos más prácticos, como su relación con AngularJS, sus elementos y desarrollo declarativo.

Sólo por refrescar la memoria, diremos que Polymer es una librería desarrollada por Google para el desarrollo front-end que combina HTML, CSS y JavaScript para crear Web Components de forma rápida, sencilla y eficaz y permite desarrollar nuevos componentes gracias a su amplio catálogo de elementos.

El Javascript estándar, basado en especificaciones de la W3C, es la clave para el funcionamiento de esta libreria, aunque es cierto que no es MVC, Polymer se ajusta tan solo a la arquitectura para crear componentes aislados que se pueden distribuir, reutilizar y combinar entre sí.

¿Existe competencia entre Polymer con AngularJS o semejantes?

Se podría perfectamente construir una aplicación basada en Polymer sin usar ningún otro framework del lado del cliente y esto es porque en el core de la librería, sumado al catálogo de elementos de Polymer, se encuentran muchas de las funcionalidades que nos ofrecen los frameworks Javascript MVC y que, además, salen cada poco nuevos componentes que le permiten realizar cosas típicas que se hacen con otros como Angular.

La diferencia con respecto a otros es que está construido encima de las especificaciones de los Web Components gracias a basarse en estándares de la W3C.

Elementos qué contiene Polymer

  • Completo sistema de Polyfills. Estos dan soporte al estándar de Web Components a navegadores que todavía no lo han incluido.
  • Kit de desarrollo para crear sus propios componentes.
  • Una extensa librería de elementos ordenados en diferentes grupos, que nos ayudarán a realizar nuestros propios proyectos.

Desarrollo declarativo

Por medio de la declaración de elementos con etiquetas HTML, conseguiremos realizar las tareas que necesitamos. Por ejemplo, podremos implementar por medio de un Custom element un icono, sin necesidad de tener una imagen asociada a una URL en el atributo src:

<iron-icon icon="icons:alarm"></iron-icon>

Aunque esto es sencillo, imagina que un panel lateral se colapsa automáticamente en pantallas de dimensiones reducidas y que podemos desplegarlo para que nos muestre su contenido.

<paper-drawer-panel>
   <div drawer> Panel lateral </div>
   <div main> Panel del cuerpo </div>
 </paper-drawer-panel>

Con Polymer, podrás escribir una conexión Ajax simplemente con un Custom Element:

<iron-ajax  url$="https://restcountries.eu/rest/v1/name/spain"></iron-ajax>

Con el kit de desarrollo también podrás realizar un nuevo componente desde cero, o basándote en otro que haya sido creado por la comunidad. Una vez creado, podrás utilizarlo tantas veces como quieras, sin tener que escribir una sola línea de código en Javascript.

Catálogo de elementos

A grandes rasgos, podríamos dividir los elementos de Polymer  en varias secciones:

  • Fe: Iron Elements. Forman parte del core y están pensados para usarlos en conjunto con otros. Por ejemplo encontraremos iconos, que se podrían utilizar de forma aislada en una página, pero seguramente serán combinados con otros para hacer barras de navegación, listas, etc.
  • Md: Paper Elements. Es una lista de interfaces de usuario valiosos para multitud de modelos de proyectos
  • GO: Google Web Components. Es un catálogo de componentes que forman un wrapper a diversas API de Google.
  • Au: Gold Elements. Se utilizan para el comercio electrónico, formularios, validación en tarjetas de crédito, etc.
  • Ne: Neon Elements. Nos ayudan a dotar de efectos especiales y animación en componentes.
  • Pt: Platinum Elements. Nos encontramos elementos que nos ayudan con la operativa de aplicaciones para móviles. Podremos, por ejemplo, trabajar offline y operar con la página sin conexión.
  • Mo: Molecules. Se usan mediante la arquitectura de los Componentes Web y son envoltorios de librerías de terceros.

Desde la página oficial de Polymer podrás explorar el catálogo completos de elementos de esta librería y descargártela. En próximos artículos, seguiremos profundizando más en Polymer desde un aspecto todavía más práctico. Si acabas de empezar con esta librería, te puede resultar útil nuestro tutorial Cómo poner a punto Polymer Starter Kit.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *