web components (1): templates

Comienzo con esta entrada una serie sobre los web components y polymer. En esta entrada veremos uno de los fundamentos de esta tendencia revolucionaria: los templates.

archivado en: JavaScript / 28 Diciembre, 2015 / taller:

En el momento de escribir estas líneas, finales de 2015, el siguiente episodio de la saga protagonizada por javaScript y html5 son los web components, una tecnología formidable que por fin vamos a poder llevar a la realidad profesional ahora que Microsoft ha dejado de dar soporte a las versiones del Explorer previas a la 11 (música de fondo: el himno de la alegría).

En esencia, un web component es una etiqueta que contiene en sí misma todo el html, las css y el js necesario para funcionar. Para entendernos, es una especie de plugin de jQuery plug & play, es decir, que se enchufa una etiqueta y ahí está un slider, una tabla dinámica, un lo que sea... Por ejemplo, bastaría con escribir algo así para que en una página se muestre un mapa de google:

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers></google-map>

Para hacernos una idea de lo que puede suponer esto, podemos pensar en un bootstrap formado por miles de piezas aún más sofisticadas y fáciles de manejar. Las aplicaciones van a ser más reutilizables, escalables y fáciles de mantener. Más importante aún: Ya no vamos a necesitar esperar a que la w3c, a su ritmo de mamut, lógico por otra parte, prepare una especificación de html para manejar etiquetas acordes a las demandas que van surgiendo en el mundo web; sino que nosotros mismos vamos a poder crear las que necesitemos en cada momento. Internet se convertirá en una red de moléculas de código autosuficiente que interactuarán entre sí para formar webs cada vez más complejas. El tema es fascinante.

Su curva de aprendizaje es alta, aunque con cierta base de javaScript no debería suponer mucho esfuerzo, sobre todo si ya nos hemos pegado con algún frame js más o menos sofisticado. (Y no, no tiene sentido utilizar jQuery en este caso).

Por otra parte, es importante destacar que en teoría los web-components no vienen a sustituir a los grandes frames js, como angular, sino a complementarlos. Son una especie de extensión del html compatible con el marco en que estemos desarrollando una página o aplicación web, aunque también es cierto que quizás los hagan innecesarios en muchos casos, al menos los colosales (angular, ember, meteor...), ya que gran parte de la lógica va incluida en la propia etiqueta. En cualquier caso, aún no he trabajado personalmente con web components y angular, cuya confluencia en la versión 2 de este frame no está clara, por lo que de momento no tengo clara mi opinión sobre este tema.

Hay tres grandes librerías para trabajar con web components: polymer de google, x-tag de mozilla y bosonic, que es un transpilador, palabreja que vendría a significar un conversor de código para que algo funcione en navegadores antiguos. En esta serie hablaré de la primera, pero primero es importante que entendamos cómo funcionan, aunque sea por encima, las cuatro grandes especificaciones de html y javaScript en las que se basa la arquitectura de los web components. Estas son:

  • los templates,
  • el shadow DOM
  • los custom elements
  • y los html imports.

Bueno, quizás antes que nada lo mejor será hablar de la tostadora del Explorer.

Compatibilidad

Según indican en la web webcomponents.org, referencia fundamental sobre la materia, en el momento de escribir estas líneas, solo Opera y Chrome soportan bien las cuatro especificaciones mencionadas; a Firefox le falta poco y el Explorer aún se encuentra a años luz incluso con su versión más moderna (IE Edge), aunque según dicen, parece que van a ponerse pilas de una vez.

wc-browser-suport

Dont panic! Para estas situaciones existen los denominados polyfils, apaños de código que permiten utilizar alguna característica no soportada por algún navegador. De esta manera, mediante polyfils, polymer es compatible incluso con la versión más antigua de la tostadora que quedará viva en breve, la 10 (de todas maneras, personalmente creo que toda la comunidad debería ponerse de acuerdo para dejar de dar soporte a la tostadora, el mayor obstáculo que existe para la evolución de las tecnologías web, pero ese es otro tema).

wx-polymer-polyfil

Sin embargo, como antes de ver polymer me interesa que entendamos bien sus fundamentos, para lo que sigue vamos usar otro polyfil, el que proponen en webcomponents. Se instala en un periquete con bower:

bower install webcomponentsjs

Y luego solo hay que enlazar el archivo lite en la página donde se vayan a usar los wc.

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

En cualquier caso, como en la vida profesional lo normal es que usemos alguna librería que lleve los polyfils de fábrica, para esta entrada basta con probar las cosas en el chrome, a ser posible en su versión experimental conocida como Canary.

Bueno, pues ahora ya sí, vamos al lío ^^.

Templates

El mecanismo de los templates (plantillas) es muy parecido al que utilizan las librerías de plantillas que existen desde hace años, como handlebars o jade: se lee el contenido de la plantilla, se trabaja si fuera necesario y el resultado se inserta en algún lugar del DOM. En un ejemplo muy sencillo:

<body>

<template id="miPlantilla">

<p>Soy una plantilla formidable</p>

</template>
<script>

// Leemos la plantilla

var miTemplate = document.getElementById("miPlantilla").content;

// Creamos el nodo

var clone = miTemplate.cloneNode(true);

// Lo insertamos en el DOM

document.body.appendChild(clone);

</script>

¿Por qué clone?

A los que estén acostumbrados a usar algún sistema de plantillas o trabajar con el .html() de jQuery, quizás les resulte extraño esta manera de insertar el html, pues normalmente se hace directamente, sin clonar nada. Algo así con handlebars, por ejemplo.

var source = document.getElementById("mi-plantilla").innerHTML;

var template = Handlebars.compile(source);

var compiledTemplate = template(data);

$('#js-mi-contenedor').html(compiledTemplate);

Sin embargo, esto no lo podemos hacer así con las template nativas, dado que lo que devuelve .content es un «DocumentFragment», una especie de abstracción del documento que hay que transformar en nodos, para lo cual contamos con dos estrategias principales:

a) Una es mediante el método que hemos visto, cloneNode(), que recibe un parámetro booleano opcional, true o false, si queremos o no que sea una copia profunda, esto es, que se clonen además los hijos que contiene la referencia clonada. En nuestro caso, lo normal es que indiquemos true.

b) Otra es mediante el método importNode(), que también recibe el mismo parámetro booleano true o false para indicar si queremos o no que se copien los hijos y otro indicando el documentFragment a importar. Este método cumple el mismo cometido que cloneNode(), pero con nodos que están más allá del documento, como los que se encuentran en un iframe o, precisamente, en una template.

<div id="jurasic-era"></div>

<template id="plantillaDinosaurios">

<p>Soy un triceratops</p>

</template>

<script>

var miTemplate = document.getElementById("plantillaDinosaurios").content;

var contenedor = document.getElementById("jurasic-era");

var nodosListos = document.importNode(miTemplate, true);

contenedor.appendChild(nodosListos);

</script>

Bueno, por hoy está bien. Sigo con el tema en próximas entradas, pero antes de cerrar os dejo unas recomendaciones sobre la materia.

Para saber más

  • Kumar Patel, Sandeep. Learning Web Component Development. Packt, 2015.
  • Overson, Jarrod; Strimpel, Jason. Developing Web Components. O'Reilly, 2015.
  • Vídeo-tutoriales de Escuela IT.
  • Además, en webcomponents.org encontrarás numerosos artículos específicos.

|| Tags: ,

valoración de los lectores sobre web components (1): templates

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (8 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*