Los Web Components ofrecen un estándar que va enfocado a la creación de todo tipo de componentes utilizables en una página web,
para realizar interfaces de usuario y elementos que permitan presentar información. Los desarrolladores tienen la tarea de, en base a las herramientas que incluyen los Web Components crear esos nuevos elementos y publicarlos para que las demás personas también los puedan usar.
Facilcloud ofrece la posibilidad de utilizar estos componentes con total libertad, para aprovechar sus ventajas.
En resumen, así como este nuevo estándar facilita la creación de nuevos elementos que enriquecen la web; también está pensado para que se puedan reutilizar de una manera sencilla y extenderse, de modo que se pueda crear unos componentes en base a otros.
Al diseñarse los estándares para los Web Components, también se ha procurado que se pueda trabajar con los componentes de manera aislada; permitiendo que las nuevas piezas se empleen en el contexto de una web, sin que afecten a las ya existentes. Paralelo a esto, se ha tratado de que el proceso de cargar un nuevo componente en una página web, se pueda realizar de manera atómica, es decir en un sólo bloque, en lugar de necesitar el requerimiento de escribir los estilos por una parte, y el javascript por otra.
Ejemplos clásicos de web components
Uno de los más clásicos ejemplos, es un mapa de Google; si no se utilizan los web components, cuando se muestra un mapa en una página web, debe recurrirse a la creación de código en tres bloques: un HTML con el elemento donde se va a renderizar el mapa; un CSS para definir algún estilo sobre el mapa, por ejemplo sus dimensiones; y un Javascript para que se pueda generar el mapa, indicando las coordenadas que se desean visualizar, así como muchos otros detalles de configuración que el mapa necesita.
Otro ejemplo sería un calendario, el cual también necesita de tres partes: HTML para crear el elemento donde se mostrará el calendario; CSS para indicar las dimensiones de ese calendario, colores, entre otros; y Javascript para decir qué mes, día o año se debe mostrar.
Son tres lenguajes diferentes, que se especifican en bloques de código separados y usualmente en archivos separados. Sin los Web Components, para tener todos los bloques agrupados y tener un código único para fusionar todo en un elemento, se usaba generalmente la etiqueta IFRAME, que permite cargar un HTML, CSS y Javascript y reducir su ámbito a un pequeño espacio de la página. Esta técnica se sigue utilizando, pero se está sustituyendo gracias a las bondades de los Web Components.
Adicionalmente, es interesante destacar las distintas especificaciones que se pueden encontrar:
- Custom Elements: describe el método que permitirá crear nuevas etiquetas personalizadas para dar respuesta a cualquier necesidad.
- HTML Templates: incorpora un sistema de templating en el navegador; estos a su vez pueden contener HTML o CSS e inicialmente no se mostrarán en la página. HTML Imports: importa una parte del código que puede usarse en un lugar de la página. Sirve para cargar tanto HTML, CSS o Javascript.
- Shadow DOM: permite tener una parte del DOM oculta a otros bloques de la página para que no interfiera con otros elementos de la misma.
