¿Qué es Polymer? Introducción

Como bien es sabido por todos, el lanzamiento de Material Design por parte de Google para su sistema operativo móvil (Android) hace unos años, fue algo que marcó un antes y un después . Dicho lanzamiento y su posterior implementación en aplicaciones propias inició la unificación de las interfaces de sus servicios web y móviles, interacciones, animaciones, etc…

Se alejaba de aspectos complejos y recargados , sombreados dentro de los iconos y bajo éstos también a fin de, a mi parecer, intentar acercarse a un fallido 3D o al menos intentar “levantar” dichos iconos de la pantalla para hacerlos más “cercanos”.

[BANNER_SUSCRIPCION]

Material Design inició la etapa de las interfaces minimalistas, sencillas y limpias, que hoy día imperan en la mayoría de aplicaciones disponibles , así como supo llegar a más dispositivos al no requerir tanto procesador para dibujar correctamente todas esas sombras y capas de cada icono o elemento de interfaz. Su estilo de “papel y lápiz” (fondos planos, sin sombras, sólo un color sólido y la fuente que acompaña) y sus animaciones fluidas e intuitivas lo llevaron a conquistar el apartado UI.

Google al contemplar como su sistema de interfaz habría logrado el éxito esperado, y tras estabilizar y casi estandarizar el desarrollo de aplicaciones con su AngularJS, presentó poco después Polymer Project, una librería de utilidades que aplican el concepto Material Design al entorno web para agilizar el desarrollo de proyectos webs (páginas web en sí, aplicaciones web…), dejando todo el proceso de presentación al propio navegador y ahorrando así tráfico innecesario de datos hacia el servidor.

Las ventajas de esto son obviamente para los navegadores móviles , donde al tener una carga más liviana de datos, las tarifas de datos móviles rendirán más en lo que a navegación se refiere, por no hablar de la velocidad de carga y movilidad por la web, que mejora sobremanera como podemos ver en este link de ejemplo.

La librería que ofrece Polymer nos facilitará la creación de componentes para nuestros proyectos web , facilitándonos una serie de ítems a usar, que diferenciaremos en:

Componentes Material Design

Similares a los encontrados en algunos frontend frameworks como Bootstrap o Foundation, los “paper elements” (elementos de papel, que es como los llaman sus desarrolladores) incluyen multitud de elementos base sobre los que trabajar o directamente importar:

• p aper-button
• paper-checkbox
• paper-dialog
• paper-input
• paper-item
• paper-progress
• paper-radio-button
• p aper-radio-group
• paper-slider
• paper-tab
• paper-tabs
• paper-toggle-button

Su integración en el código no podría ser de otra forma que no fuese así de simple :

<paper-button label=”flat button”></paper-button>

<paper-button label=”raised button” raisedButton></paper-button>

Aquí un ejemplo de interfaz con el uso de los elementos de Polymer:

Además a diferencia de lo que se nos limita en frameworks como los mencionados, encontramos objetos al estilo Google como las notificaciones pop-up (paper-toast), los menús mediante deslizamiento (paper-menu-button) o los avisos flotantes (paper-fab), que darán a nuestros proyectos un aspecto mucho más integrado en un dispositivo móvil, y más actual desde un navegador de pc.

Efectos Material Design

Para poner un poco de consonancia entre las diferentes partes de nuestra web app , deberemos normalizar el aspecto, iluminación y sombreados en toda la interfaz para homogeneizar la UI y mejorar la experiencia de usuario.

Polymer facilita esta tarea ofreciendo todos sus elementos tipo “paper” anidados en contenedores <div> a los que poder aplicar el aspecto que deseemos, y desde el mismo código observar de una forma muy simple de qué forma se muestra cada objeto.

Por ejemplo con paper-shadow podremos aplicar diferentes niveles de sombreado (también se podrá usar para definir el aspecto de otros elementos HTML), favoreciendo así destacar una información por encima de otra y contextualizar al usuario. Además, la modularidad de estos componentes nos facilitará resaltar de varias formas los objetos , usando por ejemplo el atributo raisedButton, que sombreará uniformemente el objeto al que refiera en el momento en el que éste sea pulsado o clicado.

Transiciones

No cabe duda que una de las características que más atraerá o alejará a los usuarios serán las animaciones o efectos de transición entre menús o secciones de nuestra aplicación. En este apartado Polymer nos ofrece su mejor punto de trabajo , ya que al integrar todos sus componentes en el navegador (y no desde el servidor), la respuesta que recibe el usuario es muy fluida, cuidando así el tráfico de datos generado.

En este apartado Polymer otorga una gran variedad de elementos para gestionar dichas transiciones entre cuadros de diálogo, botones, menús… El núcleo de Polymer para este apartado (core-animated-pages) será el encargado de administrar dichas acciones, por lo que deberemos integrarlo en nuestro proyecto cuando se nos solicite durante la creación del mismo.

En Material Design, las “hero transitions” son la forma más común de pasar de una sección a otra, convirtiendo el elemento seleccionado de la página origen en un objeto al inicio de la página destino. Es un efecto atractivo y funcional, aunque para moverse dentro de una misma categoría puede favorecer más un efecto de fundido entre el inicio y el destino, visto como algo menos separatista.

No obstante, además de ofrecer esta completísima librería modular para nuestros proyectos, Polymer ha lanzado recientemente un App Tools ; una herramienta con la que, no sólo modificaremos las interfaces, interacciones, animaciones y demás, si no que podremos crear complejas y escalables aplicaciones web haciendo uso únicamente de los módulos y objetos que incorpora (claro está, podremos importar aquellos que consideremos oportunos, pero esta utilidad ofrece todo lo necesario para esta tarea).

Hablando de cifras, en su inicio, durante un periodo de dos años Polymer alcanzó la cifra de 2000 módulos y objetos de libre utilización gracias a una comunidad de desarrolladores de casi 800 personas. Desde que Google acogió Polymer, en sólo un año dicha cantidad de módulos ha superado ya los 4000 elementos, por lo que su ritmo de crecimiento le augura un futro muy prometedor.