Introducción a los Componentes Web – Qué son y cómo funcionan

Introducción a los Componentes Web – Qué son y cómo funcionan

Para empezar debemos entender que el código reutilizable es la base del diseño web moderno. Con cada framework de frontend y biblioteca Sass, puedes encontrar soluciones a cualquier problema.

Pero los elementos dinámicos reutilizables siguen siendo un trabajo en progreso y son increíbles. Estos elementos se denominan componentes web y dependen de las especificaciones que esperan ser finalizadas por el W3C.

No muchos desarrolladores saben cómo funcionan los componentes web ya que no reciben mucha publicidad. En esta guía, cubriré los detalles de los componentes web explicando cómo funcionan, qué hacen y por qué podrían alterar radicalmente el futuro de la codificación de frontend.

Entonces, ¿qué son los componentes web?

Un componente web es un elemento DOM creado a través de un código reutilizable. Cada componente está destinado a ahorrarles tiempo a los desarrolladores cuando crean sitios web que usan elementos similares en muchas páginas.

Estas características aún son experimentales, pero están programadas para ser adoptadas por el W3C en algún momento cercano.

Componentes web

La idea detrás de los componentes web es crear elementos de interfaz dinámicos sin escribir código JavaScript personalizado o crear sus propias bibliotecas.

Entonces, por ejemplo, si desea insertar un mapa en su página, puede agregar una etiqueta. Esto extraerá automáticamente un código de inserción de Google Maps en su página, pero solo en los navegadores compatibles con estas funciones.

 

En el sitio principal encontrará docenas de elementos pre codificados listos para incrustar en un abrir y cerrar de ojos. Todos estos deben estar instalados y su navegador debe admitir las numerosas tecnologías que alimentan los componentes web.

Si analiza la guía de introducción de Web Components, explica que los componentes están basados ​​en cuatro tecnologías únicas de W3C:

Elementos personalizados: necesarios para agregar nuevos elementos HTML al DOM

    Shadow DOM: las reglas sobre cómo crear un DOM único encapsulado mediante marcado HTML

Importaciones de HTML: le permiten importar código HTML y reutilizar sus componentes en otras páginas

    Plantilla HTML: necesaria para escribir código reutilizable y declarar cómo debería verse

Cada una de estas características está separada y tiene sus propias especificaciones en el sitio web del W3C. Pero juntas, estas especificaciones se unen y crean el concepto idealista de componentes web.

La parte más difícil de entender es cómo un componente puede duplicar el código en cualquier lugar. Todo esto proviene de las importaciones de HTML que todavía están en progreso.

Pero una vez que estas características estén finalizadas, debe poder crear cualquier etiqueta HTML que desee y reutilizarla como un componente web. E incluso podría compartir este código con otros para crear componentes de código abierto. ¡Las posibilidades son prácticamente infinitas!

En última instancia, el objetivo es reducir la complejidad y simplificar el desarrollo. Los desarrolladores de frontend solo quieren resolver problemas y hacer que sus sitios funcionen. La codificación puede ser divertida, pero siempre es un medio para un fin.

Los componentes web están aquí para resolver problemas básicos y ofrecer soluciones más rápidas para los desarrolladores.

¿Qué es el Polymer?

Dado que se necesita mucho código en bruto para construir componentes web, es natural que los desarrolladores quieran facilitar el proceso. Esto se puede hacer a través de frameworks como Polymer, una herramienta de código abierto para el desarrollo de WC.

Básicamente Polymer es un marco escrito sobre las API de componentes web. Es una capa de abstracción para que pueda escribir componentes más rápido con menos código.

Es una de las pocas bibliotecas de WC que hay y es mantenida por el equipo de desarrollo de Google Chrome.

Créalo o no, Polymer ya se usa en algunos productos de Google, como los nuevos Google Sites.

Navegadores y soporte

Es importante para los desarrollares tener soporte en un navegador para el cual quieran desarrollar un programa. No encontrará mucho soporte para navegadores heredados como IE6, pero estos son los navegadores estables actuales:

Google Chrome

    Firefox

    Borde

    Safari 7+

    IE11

    Chrome móvil (Android)

    Mobile Safari (iOS 7+)

Los navegadores más pequeños como Opera pueden no ser compatibles con todo. Pero esta lista es lo suficientemente completa como para que pueda comenzar a aprender Polymer y ver los resultados de hoy.

A %d blogueros les gusta esto: