Polymer: una librería para crear componentes web modernos

PolymerPolymer es una librería que nos permite crear componentes web utilizando HTML, CSS y Javascript. Lo interesante de Polymer es que nos permite crear componentes encapsulados los cuales luego pueden ser utilizados como cualquier etiqueta HTML.

Extendiendo la web con nuestros propios componentes

HTML nos provee de manera nativa elementos como <div>, <table> o <input>. Cada uno de estos elementos posee sus propia API de atributos, propiedades, métodos y eventos. Así como también cada uno de estos elementos posee su propio estilo CSS y funcionalidad Javascript.

Al momento de crear nuestros propios componentes tendremos que definir dichas partes, es decir, su aspecto visual con HTML y CSS, y opcionalmente su comportamiento dinámico con Javascript.

Para entender mejor como funciona Polymer, veamos la arquitectura básica de un componente en el siguiente ejemplo.

Supongamos que queremos crear un componente en el cual mostraremos los enlaces a las diferentes redes sociales como el siguiente:

social-media-bar

Y que cuando el componente este listo lo podamos utilizar de la siguiente manera:

<social-media-bar 
    facebookUrl="" 
    twitterUrl="" 
    googlePlusUrl="">
</social-media-bar>

Para ello tendremos que crear un archivo HTML el cual, en este caso, llamaremos social-media-bar.html en el cual crearemos la definición del componente:

<!-- Definición del componente -->
<dom-module id="social-media-bar">
  <template>
    <style>
    .social-media-bar { ... }
    .social-media-bar a { ... }
    .social-media-bar a img { ... }
    </style>
    <div class="social-media-bar">
        <a href="{{facebookUrl}}" target="_blank"><img src="facebook.png" /></a>
        <a href="{{twitterUrl}}" target="_blank"><img src="twitter.png" /></a>
        <a href="{{googlePlusUrl}}" target="_blank"><img src="google-plus.png" /></a>
    </div>
  </template>
  <script>
    Polymer({
      is: 'social-media-bar',
      properties: {
        facebookUrl: String,
        twitterUrl: String,
        googlePlusUrl: String
      }
    });
  </script>
</dom-module>

Una vez definido el componente tendremos que incluirlo con una etiqueta <link> en la página que quisiéramos utilizarlo:

<head>
...
<link rel="import" href="social-media-bar.html">
...
</head>

Aclaración: además de incluir el componente, tendremos que incluir la librería de Polymer en la página

Un vez que el componente esté incluido en la página podremos utilizar la etiqueta recientemente creada de la siguiente manera:

<body>
...
<social-media-bar 
    facebookUrl="http://www.facebook.com/..." 
    twitterUrl="http://www.twitter.com/..." 
    googlePlusUrl="http://plus.google.com/...">
</social-media-bar>
...
</body>

Polymer es un interesante concepto que ofrece una manera muy práctica para extender los componentes nativos de HTML y además nos brinda una nueva manera para organizar y modularizar el código HTML de nuestros proyectos.

Quienes quieran investigar un poco más sobre esta librería los invito a pasar por el sitio web oficial de Polymer: https://www.polymer-project.org.

 

Get in Touch