Los Web Components son un conjunto de estándares que, en pocas palabras,
nos permiten crear y utilizar elementos HTML personalizados. Éstos se están trabajando a través de la W3C, y aterrizan en los navegadores mientras hablamos.
Constan de cuatro especificaciones:
- Custom elements: Nos permite definir nuevos elementos HTML.
- Templates: Sistema de plantillas nativas en el navegador.
- Shadow DOM: DOM scope.
- HTML Imports: Carga de documentos HTML.
HTML proporciona un conjunto de elementos como
<table>, <button> e <input>. Cada elemento tiene su propio estilo y su propia API de atributos, propiedades, métodos y eventos.
Cualquiera puede usar esos elementos para construir una sencilla página web. Pero son limitados. Con los Web Components,
se puede ampliar el “vocabulario” de HTML con elementos propios. El único requisito es que el elemento tenga, como mínimo, un guión. Las etiquetas de una sola palabra quedan reservadas.
Pongamos un ejemplo para entenderlo mejor. ¿Quién no ha tenido que añadir un mapa a una web? La documentación oficial de Google Maps explica que para insertarlo, es necesario escribir lo siguiente:
[html]
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
[/html]
Con un Web Component, sería suficiente con importarlo y luego declararlo así:
[html]<google-map latitude="44.5403" longitude="-78.5463" zoom="8"></google-map>
[/html]
No está nada mal, ¿verdad?
El único inconveniente es que no todos los navegadores soportan las especificaciones. Pero eso se resuelve rápidamente con
webcomponents.js.
Sin embargo, trae muchas más ventajas a la web moderna. Gracias a que podemos encapsular todo en componentes,
el código es más fácil de mantener; ya que los componentes están hechos para ser reutilizables.
Y además de ser reutilizables, se pueden compartir. Ahora la comunidad también podrá crear y compartir nuevos elementos para que cualquier persona los use. Por ello surgen proyectos como
customelements.io, una colección de Web Components. También hay empresas como Google que
publican sus propios Web Components para facilitar el uso de sus APIs y servicios. El ejemplo del mapa es uno de ellos.
Polymer
Polymer
es una librería diseñada para facilitar la creación de componentes para la web moderna. Y ante las discusiones iniciales sobre qué es Polymer, vamos a recalcar que Polymer
no es un framework. Por lo tanto, no va a competir con Angular.js, Ember.js, Backbone.js, Knockout.js, etc. Lo ideal sería que trabajaran de la mano.
Podríamos construir custom elements usando directamente las primitivas de Web Components, pero sería mucho más costoso.
Polymer proporciona una sintaxis declarativa que hace que sea más sencillo definir custom elements. Y añade características como
templating,
two-way data binding y observación de propiedades para ayudar a construir elementos reutilizables con menos código.
Se construye encima de los estándares de los Web Components para ayudar a construir
custom elements propios.
Todo esto suena muy bien, pero seguro que te estás preguntando qué nivel de compatibilidad tiene con los navegadores y si Polymer está listo para ser usado en producción. Hay buenas respuestas para ambas preguntas.
La compatibilidad no es completa en todos los navegadores. Pero mientras éstos no terminan de adoptar los estándares, existe el proyecto
webcomponents.js, que aumenta la compatibilidad de manera sustancial. Además, está hecho por el mismo equipo de Polymer.
Y en el último Google I/O se presentó la versión 1.0 de Polymer, ¡lista para usar en producción!
Por último, el equipo de Polymer también ha realizado un
catálogo de elementos listos para ser usados: tabs, peticiones ajax, iconos, notificaciones, offline, animaciones, etc.
Así que no esperes más, ¡y manos a la obra!
Crear y usar Web Components con Polymer
Ya sabemos bien lo que son los Web Components y Polymer. Así que iremos directo al grano. Primero aprenderemos a usar elementos ya creados, y luego a crear los propios.
Cómo usar un Web Component
Este primer paso es recomendable, pero no obligatorio. Consiste en importar el
polyfill, para aumentar la compatibilidad en navegadores antiguos. Y se hace así:
[html]<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>
[/html]
Lo segundo que tenemos que hacer es importar el elemento que queramos usar. Para el ejemplo usaremos el de
google-maps:
[html]
<link rel="import" href="components/google-map/google-map.html">
[/html]
Y finalmente lo usamos:
[html]
<google-map latitude="42.7999285" longitude="-8.017728" zoom="8"></google-map>
[/html]
Sólo con eso, habremos conseguido un hermoso mapa como este:
Cómo crear un Web Component con Polymer
Siguiendo los convenios, lo primero que vamos a hacer es crear un directorio con el nombre del Web Component que queremos crear. Y dentro de él, un fichero HTML con el mismo nombre. Para nuestro ejemplo vamos a hacer una tarjeta de contacto, por lo que quedará así:
[html]contact-card/contact-card.html[/html]
Dentro escribiremos lo siguiente:
[html]
<link rel="import" href="../polymer/polymer.html">
<dom-module id="contact-card">
<script>
Polymer({
is: 'contact-card'
});
</script>
</dom-module>
[/html]
Primero se importa Polymer, y luego se usa la etiqueta
dom-module y el script de
Polymer(). Tanto el
id como el
is deben de tener como valor el nombre del Web Component.
Listo, ya está creado. Pero por ahora está vacío. Ahora añadamos contenido.
[html]
<link rel="import" href="../polymer/polymer.html">
<dom-module id="contact-card">
<template>
<img src="{{image}}">
<span>{{name}}</span>
</template>
<script>
Polymer({
is: 'contact-card',
properties: {
name: String,
image: String
}
});
</script>
</dom-module>
[/html]
Dentro de la etiqueta
dom-module, creamos una etiqueta
template con el contenido. Usaremos como variables las propiedades que declaramos en el script. En este momento, actuará el data binding.
Ahora que ya tenemos nuestro Web Component con contenido, ¿qué tal si le añadimos un poco de estilo?
[html]
<link rel="import" href="../polymer/polymer.html">
<dom-module id="contact-card">
<style>
:host {
background-color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
display: inline-block;
width: 200px;
}
img {
display: block;
height: 200px;
width: 200px;
}
span {
display: block;
padding: .5em .2em;
text-align: center;
}
</style>
<template>
<img src="{{image}}">
<span>{{name}}</span>
</template>
<script>
Polymer({
is: 'contact-card',
properties: {
name: String,
image: String
}
});
</script>
</dom-module>
[/html]
Para ver los resultados, primero tenemos que importarlo con el siguiente código:
[html]
<link rel="import" href="components/contact-card/contact-card.html">
[/html]
Y ahora lo usamos:
[html]
<contact-card name="Abdón Rodríguez Davila" image="abdonrd.jpg"></contact-card>
[/html]
Y obtendremos lo siguiente:
Ahora ya lo sabes, crea tus Web Components y compártelos con toda la comunidad.
