Cómo comenzar a trabajar con Web Components

Ya hemos realizado aproximación teórica a los Web Components o componentes web, el nuevo estándar que está cambiando el paradigma de desarrollo front-end. En esta ocasión, queremos llegar un poco más lejos, ofreciendo algunas guías adicionales para dar los primeros pasos en el uso de Web Components.

Librerías para desarrollar Web Components

Dado que Web Components es un estándar cada vez más y mejor soportado por los principales navegadores, no es obligatorio contar con una librería adicional para desarrollar tus propios elementos, sino simplemente Javascript convencional. Sin embargo, para el desarrollo acelerado con Web Components existen diversas librerías que nos facilitan mucho la vida.

Las dos más relevantes en estos momentos son Polymer, promovida por Google, y X-Tag, impulsada por la comunidad Mozilla. Polymer está obteniendo gran apoyo por parte del gigante del buscador, que lo usa para el desarrollo de servicios tan destacados como Google Music. Por ello,  supone una excelente plataforma para desembarcar en el mundo de los Web Components, ya que ofrece muchas ventajas para el desarrollo rápido y la interoperabilidad entre los elementos.

Polyfill

Cuando una navegador no soporta una tecnología, siempre podemos echar mano de un polyfill. Es decir, un parche que permite usar características de navegadores nuevos en navegadores antiguos. En este caso, existe una librería Javascript para dar soporte a los navegadores que aún no han implementado el estándar de los Web Components.  Actualmente, la tecnología tiene soporte nativo total en Chrome y en Opera, sin embargo los demás navegadores solo la soportan parcialmente.

El polyfill para los Web Components lo encontramos en Github. Originalmente formaba parte de Polymer, sin embargo hoy es un proyecto independiente que podemos usar para el desarrollo nativo o para el desarrollo con otra librería. Lo encuentras en esta dirección:

https://github.com/WebComponents/webcomponentsjs

Para usarlo simplemente tenemos que colocar el <script> hacia el archivo webcomponents.js del anterior repositorio, antes de comenzar a usar cualquier parte de los Web Components.

Usar un componente

Para practicar un poco con Web Components vamos a usar un componente creado por otros desarrolladores. Nos permitirá de una manera sencilla realizar iconos de banderas del mundo.

Se trata de un componente realizado con Polymer, pero eso realmente no te debe preocupar porque, para usarlo, es realmente indiferente.

Los iconos de las banderas del mundo vienen de un único sprite CSS, lo que optimiza las conexiones con el servidor. Las dimensiones de los iconos son de 32×32.

Para usar el componente tenemos que instalarlo en nuestro proyecto. Para ello, nos valemos del gestor de paquetes Bower:

bower install dw-flagsprites

Una vez instalados los archivos del componente, podemos usarlos en cualquiera de las páginas del proyecto. Para ello tenemos que realizar dos pasos:

1. Importar el custom element:

<link rel="import" href="/blogbower_components/dw-flagsprites/dw-flagsprites.html">

2. Usar el custom element, indicando el código del país cuya bandera deseas mostrar en el icono:

<dw-flagsprites code="es"></dw-flagsprites>

Como ves, los códigos de los países son estándar, de dos letras como “es”, “fr”, “pt”, etc.

Por supuesto, la etiqueta <dw-flagsprites> no es reconocida por ningún navegador a no ser que se haya realizado el anterior import del código del componente.

De manera opcional, pero muy recomendable, podemos valernos del mencionado Polyfill, de modo que este Custom Element sea compatible con la mayoría de los navegadores existentes en la actualidad.

Para ello, simplemente tememos que colocar el script al .js del polyfill. Esto lo haremos escribiendo esta etiqueta justo antes del import del componente.

<script src="/blogbower_components/webcomponentsjs/webcomponents.js"></script>

El código del componente usado para este ejemplo es muy sencillo y lo encontrarás en Github: https://github.com/deswebcom/dw-flagsprites

 

El único detalle que tendrás que tener en cuenta es el de especificar correctamente las rutas de las librerías, tanto en el <link> del import del elemento como el src del script del Polyfill.

Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
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 *