Dokier - Digital Experience Dokier - Digital Experience Dokier – Digital Experience – Blog

Como implementar HTML5 Imports

Si estás desarrollando un proyecto web, sin duda necesitarás trabajar con diferentes recursos que dotarán de funcionalidades a tu nuevo proyecto. Desde las hojas de estilo CSS, librerías javascript a frameworks para desarrollo como Boostrap, los desarrolladores nos valemos de dichas herramientas para crear sitios web que logren un equilibrio perfecto entre el diseño, la usabilidad y performance.

El problema se presenta cuando comenzamos a abusar de la inserción de estos recursos, ya que para cargar cualquiera de estos elementos se requiere el uso de etiquetas separadas, lo que implica varias llamadas al servidor, disminuyendo considerablemente la tan añorada performance.

Por estos motivos la W3C nos ha regalado HTML Imports, un nuevo Tag HTML5 que nos permite importar componentes de interfaz de usuario de una forma más eficiente, permitiendo optimizar los recursos de carga del navegador.

Estructura Básica

La implementación de HTML import es muy fácil, solo debemos añadir un enlace en el head de nuestro documento con una etiqueta <link>,  un atributo rel=”import” y un href que incluya la ruta de acceso al archivo HTML que contiene el todos los elementos que necesitamos, desde fuentes web, scripts, hojas de estilo, frameworks, etc.

<head>
  <link rel="import" href="grupo_elementos.html">
</head>

Este método nos permite un gran margen de maniobra, permitiéndonos trabajar con más de un <link rel=”import”>, en caso de ser necesario. Pero ustedes se preguntarán, que pasa si tengo la librería Jquery incluida en ambas url´s de importación. Bueno…una de las virtudes de esta técnica es que cuando se realiza una petición, en caso de que la misma se encuentre duplicada, el navegador solo la incluye una vez.
Aquí podrán apreciarlo mejor:

HTMLImports

Otro punto a tener en cuenta es la utilización del atributo “async”. Este atributo permite que la carga de del archivo ubicado en url de importación, se realice en forma simultánea al resto del documento HTML, dándonos un pequeña pero muy importante ventaja a la hora de obtener una mejor performance. HTML Imports no trae activado por defecto las características de este atributo, por lo cual está en nuestras manos el poder de su utilización.

<head>
  <link rel="import" href="grupo_elementos.html" async >
</head>

Todo desarrollador debe tomar en cuenta que estas nuevas técnicas traen consigo un período de adaptación, ya que como de costumbre, no todos los navegadores interpretan las nuevas oportunidades tecnológicas que nos brinda este gran universo web. Hasta el momento HTML imports tiene soporte en las últimas versiones de Opera y en Chrome desde su versión 31. De todas formas requiere habilitar la función en chrome://flags/ y habilitar “Enable HTML Imports”. También existe un Polyfill(script para brindar soporte) para a aquellos navegadores que no tiene la posibilidad de ejecutar esta función.
Aquí les dejo dónde encontrar esta fantástica alternativa: https://github.com/polymer/HTMLImports

Hasta aquí hemos visto la utilización básica de HTML imports, este Tag trae consigo una gran cantidad de utilidades que de a poco iremos descubriendo, pero si quieres aprender más sobre esta nueva herramienta, puedes consultar sitios de gran referencia como:

http://w3c.github.io/webcomponents/spec/imports/

http://www.html5rocks.com/en/tutorials/webcomponents/imports/?redirect_from_locale=es

Dejar un comentario

Login to your account

Can't remember your Password ?

Register for this site!