Polymer

03/04/2019 Tweet
Polymer

¿Qué es Polymer?

Polymer es una librería destinada a la creación de Web Components. ¿Y qué es esto de los Web Components? Antes de nada vamos a aclarar este concepto.

Web Components

Los Web Components son un conjunto de estándares creados por Google que nos van a permitir crear y utilizar nuevos elementos del DOM independientes con su propio marcado html, sus propios estilos (CSS) y su propia funcionalidad (javascript).

Para entenderlo mejor, son como nuevas etiquetas HTML con estilos, métodos, propiedades y eventos propios. Por ejemplo, podríamos crear un componente banner con el nombre banner-component y utilizarlos en nuestro documento html como si de una etiqueta nueva se tratase. Nos quedaría de la siguiente manera:

<banner-component></banner-component>

Los Web Components están basados en 4 pilares:

Web Components

1. Custom elements: Permite crear elementos nuevos personalizados según necesidades.

2. Templates: Basados en un sistema de plantillas.

3. Shadow DOM: Shadow DOM viene a ser el DOM “oculto", una capa que se introduce dentro del DOM del navegador y que “esconde" nuestros componentes de tal manera que todo elemento o script exterior a esta capa no podrá acceder a sus elementos interiores. Esto quiere decir que tendremos componentes encapsulados cuyas funciones y estilos no van a interferir en el resto de la aplicación.

4. Html Imports: Pueden ser fácilmente importados a nuestros documentos Html.

Los Web Components están basados en los estándares del W3C y la tendencia parece indicar que van a definir la web del futuro.

Para más información sobre Web Components, esta es la página del Proyecto Polymer:

http://webcomponents.org

Entonces qué es Polymer

Podríamos construir Custom Elements usando Web Components pero resultaría bastante costoso. Aquí es donde Polymer entra en juego. Polymer es una librería Javascript creada por Google, basada en los estándares de los Web Components y diseñada para construir Custom Elements de una manera más fácil.

Polymer - para crear Web Components

Polymer está basada en Material Design (normativa de diseño de Google), una interfaz minimalista, sencilla y limpia que favorece sobre todo a la navegación en dispositivos móviles, menos imágenes y menos recursos que descargar por lo que mejora la velocidad y disminuye el consumo de las tarifas de datos.

Además de Polymer existen otras librerías para la construcción de Web Components:

  • X-tag, creada y soportada por Mozilla
  • Bosonic, con la peculiaridad de que da soporte a navegadores no tan modernos como IE9
  • SkateJS, se considera muy rápido.

Polymer no es un framework

Como bien hemos dicho Polymer es una librería javascript basada en los estándares de la W3C pero no un framework como normalmente se piensa.

Por tanto, no se trata de un competidor de AngularJs, EmberJs o BackboneJs, sino de una herramienta que puede servir para complementar a estos frameworks. De hecho, la versión 2 de Angular ya trabaja con Web Components por lo que la integración con Polymer se simplifica.

Al mismo tiempo, Polymer también nos permite construir una aplicación del lado del cliente sin necesidad de usar ningún otro framework. Para ello Polymer nos ofrece Polymer App Toolbox, una colección de componentes, herramientas y templates que nos facilitará esta labor.

En la página de Polymer podemos encontrar una demo de una tienda hecha con esta esta librería:

https://shop.polymer-project.org/

Cada vez se están creando nuevos componentes con la intención de hacer a Polymer más independiente y conseguir funcionalidades que ofrecen frameworks como Angular. Por ejemplo, el poder gestionar rutas de una aplicación mediante un sistema de routing.

Catálogo de elementos Polymer

.

Polymer pone a nuestra disposición de forma totalmente gratuita un repositorio de componentes que podemos utilizar en nuestras aplicaciones.

El catálogo de elementos de Polymer está dividido en 8 secciones:

FeIron Elements

A este conjunto forman parte elementos genéricos pensados en la mayoría de los casos para ser utilizar junto con otros. Por ejemplo aquí encontramos, iconos, inputs, textarea que crecen, label, colapsables, dropdown, listas, …

MdPaper Elements : Aquí encontramos un conjunto de elementos visuales que implementan la línea estética y funcional del "Material Design" de Google, por lo que ya nos ofrecen una buena base para poder hacer aplicaciones bastante atractivas visualmente. Por ejemplo: botones, checkbox, diálogos, tabs, toolbars, tooltips,…

GoGoogle Web Components: Nos ofrece un catálogo de componentes para incluir API’s de Google abstrayéndonos de cómo funcionan por dentro. Por ejemplo, nos van a servir para albergar mapas de Google, calendarios, acceder a documentos de Drive,…

AuGold Elements: Estos están enfocados al comercio electrónico, sobre todos para dar formato y validar campos de formulario.

NeNeon Elements: Nos permiten crear animación en componentes.

PtPlatinum Elements: Aquí encontramos elementos relacionados con la operativa de aplicaciones para móviles: poder trabajar offline, trabajo con notificaciones, comunicación a través del bluetooth del dispositivo,…

MoMolecules: Aquí encontramos elementos para contener otras librerías javascript.

En la página oficial de Polymer se puede ver el listado completo:

https://elements.polymer-project.org/

Polyfill de Polymer

Los Web Components son una tecnología estándar, por lo que no necesita una librería adicional Javascript para que funcione. Sin embargo, cada navegador se toma su tiempo a la hora de implementar un estándar web y que sea 100% utilizable.

Si queremos compatibilidad con navegadores que aún no implementan este estándar hay usar un Polyfill. El mismo equipo de Polymer creo un Polyfill para intentar dar soporte de todos los navegadores: webcomponent.js.

En esta tabla de Jon Rimmer podemos ver la compatibilidad de los elementos principales del estándar en los diferentes navegadores. Podremos ver que sólo Chrome y Opera los implementa totalmente.

http://jonrimmer.github.io/are-we-componentized-yet/

Polymer Support

Conclusiones: ventajas y desventajas

Ventajas

  • Permite crear componentes independientes, reutilizables y encapsulables. Como consecuencia de esto tenemos 3 grandes ventajas:
    • Se puede integran independientemente del framework o plataforma que se utilice sin interferir en los estilos o en la funcionalidad del resto
    • Si se decidiera cambiar no hay que modificarlos en todos los sitios donde se utilice por lo que es más mantenible.
    • Nos permite compartirlos fácilmente a la comunidad para utilizarlos en otros proyectos y/o aplicaciones sin miedo a que vayan a interferir en la funcionalidad o en el aspecto de otros ya existentes. Por ejemplo, hay empresas, como Google, que publican sus propios Web Components para facilitar el uso de sus APIs y servicios (el mapa es uno de ellos). http://googlewebcomponents.github.io/
  • Te permite crear Single Page Aplication (SPA) escalables. Polymer App Toolbox proporciona los componentes, herramientas y templates para construir aplicaciones desde la parte Front.
  • El hecho de que Polymer esté apoyada por Google y que esté basado en los estándares de la W3C, nos indica que tiene mucho margen para crecer y una larga vida.

Desventajas

  • Cuando se trata de desarrollar web complejas, Polymer necesita complementarse con otras herramientas para llegar a ser un entorno de trabajo íntegro, como puede ser AngularJS.
  • El código generado es poco limpio. El marcado de un nuevo componente suele generar un marcado más complejo al ser renderizado por el navegador. Por ejemplo, los elementos paper-checkbox no son inputs como tales, se generan divs. Además, al estar encapsulados no se puede acceder para ser enviado por un submit.
  • Necesita de un Polyfill para ser compatible con todos los navegadores.
  • El hecho de que Web Components es un estándar que todavía está en proceso de desarrollo hace que sea probable que aplicaciones hoy hechos con Polymer tengan que sufrir modificaciones a medida que las especificaciones cambien.

Ejemplo práctico de cómo crear nuestro Web Component con Polymer

1. Descargar Polymer

Sin entrar en demasiados detalles, existen tres formas para empezar con Polymer:

2. Damos nombre a nuestro componente

Podemos llamar a nuestro componente como queramos, la única condición es que lleve un guión en su nomenclatura. Las etiquetas con una sola palabra quedan reservadas para diferenciarse de las ya existentes en el propio HTML.

Con este nombre vamos a llamar a la template del componente y vamos a referenciarlo en nuestra aplicación.

En nuestro ejemplo vamos a llamarlo banner-component.

3. Creamos la plantilla (template)

La plantilla va a ser un documento con extensión html que como hemos dicho, tiene que tener el mismo nombre que el nombre de nuestro componente. En nuestro caso será banner-component.html.

  1. Lo primero que tenemos que tener en esta template es la llamada a Polymer mediante un import:

    <link rel="import" href="polymer.html">

    Podríamos importar una sola vez Polymer dentro de nuestro documento Html pero, puesto que lo que queremos crear son componentes independientes, tiene más sentido que a cada Web Component le hagamos el import de Polymer.

  2. Una vez hecho esto lo siguiente que tenemos que hacer es definir nuestro componente. Esto lo hacemos utilizando la etiqueta dom-module. Con el atributo id indicaremos el nombre de nuestro componente:

    <dom-module id="banner-component"></dom-module>

  3. Entre estas etiquetas irá todo lo necesario para nuestro componente:

    • marcado: identificado con etiquetas <template></template>. En su interior encontraremos marcado Html que será el que el navegador visualizará cuando invoquemos a nuestro componente.
    • estilos: identificado con <style></style>. Aquí daremos estilos a nuestro componente como si de una hoja de estilos se tratase.
    • javascript: identificado con las etiquetas <script></script>. Dentro de ésta, a parte de la funcionalidad del componente lo primero que tenemos que hacer es registrarlo y configurar sus propiedades. Esto lo hacemos de la siguiente manera: 
                    Polymer({
                is: ‘banner-component’,
                properties: {
                  title: String,
                  image: String
                }
              });

    Las properties son como variables que luego podremos utilizar en nuestro marcado.

  4. El resultado de nuestra template podría ser el siguiente:

  <link rel="import" href="polymer.html">

  <dom-module id="banner-component">

      <style>
        img { border:2px solid #cdcdcd; }
        h1 { font-size: 20px; text-align: center; }
      </style>

      <template>
        <img src="{{image}}" />
        <h1>{{title}}</h1>
      </template>

      <script>
        Polymer({
          is: "banner-component",
          properties: {
            title: String,
            image: String
          }
        });
      </script>

  </dom-module>

3. Invocamos a nuestro componente desde nuestra aplicación:

  1. Antes de nada, no debemos olvidarnos de incluir el polyfill de Polymer para compatibilizar nuestro componente con todos los navegadores: 

    <script type="text/javascript" src="webcomponents-lite.min.js"></script>

  2. Hacemos el import de nuestro componente:

    <link rel="import" href="banner-component.html">

  3. Añadimos el componente como si de una etiqueta html se tratase en nuestro documento. Dentro de esta etiqueta podremos añadir unos atributos cuyo nombre corresponderán a las propiedades que hemos definido en nuestra template y cuyo valor será visualizado en el componente.

  4. El resultado es el siguiente:

  <!DOCTYPE html>
  <html>
    <head>
        <title>Banner Component</title>
        <script type="text/javascript" src="webcomponents-lite.min.js"></script>
        <link rel="import" href="banner-component.html"> 

    </head>
    <body>
          <banner-component 
              image="banner.png" 
              title = "Ejemplo Web Component">
          </banner-component >
    </body>
  </html>

Referencias

Tweet Subir | Volver al listado