¿Qué es un componente web?

Como seres humanos, somos parte del mundo y de la naturaleza, el paradigma orientado a objetos busca siempre representar el mundo real, el desarrollo de software mismo siempre se usa en busca de solucionar problemas reales de nuestro entorno.

Antes de explicar que es un componente web me gustaría mucho compartir contigo esta información sobre diseño atómico y espero que lo relaciones con el mundo real, especialmente el mundo de los átomos, moléculas y organismos, analiza un poco, te darás cuenta que la naturaleza nos enseña mucho, pues creo firmemente que está diseñada de una manera superior y que el ser humano puede aprender mucho de este gran sistema. El mundo mismo es un sistema, el universo es un sistema.

Piensa en como los átomos se comunican y forman moléculas, como las moléculas también se comunican y forman organismos y como estos últimos también se comunican y forman organismo más complejos hasta crear grandes sistemas. No quiero confundirte con estos temas, yo tampoco sé bien de lo que hablo, pero teniendo una noción de estos componentes podemos encontrar su relación con la programación orientada a objetos, programación funcional y en si cualquier paradigma de programación, y claro también en el diseño de aplicaciones web, y con ello aprender a diseñar mejor nuestros sistemas computacionales.

Imagina los átomos, las moléculas y las células que forman un órgano, como los pulmones forman parte del sistema respiratorio, y como este último forma parte de un ser humano. El cerebro se encarga de indicarle a los pulmones cuando contraerse y cuando expandirse sin que nosotros seamos conscientes de esos movimientos. ¿Te das cuenta de la comunicación entre el cerebro y los pulmones?

Tambien los pulmones se comunican con otro componente llamado corazón. Los pulmones limpian la sangre llena de dióxido de carbono y agregan oxígeno, es en ese momento en que esa sangre rica en oxígeno se envia al corazón, el corazón bombea la sangre a todas las partes de nuestro cuerpo. ¿Te das cuenta de todas las comunicaciones que existen entre componentes (organos)?

Dicho todo el rollo anterior y después de darle por lo menos un vistazo al diseño atómico, nos damos cuenta de la importancia de los componentes que conforman el diseño de algo más complejo y en nuestro caso los componentes con los que construimos nuestras aplicaciones web.

Entonces, ¿Qué es un componente web? Un componente web es lo mismo que explicamos en los párrafos anteriores solo que con el contexto de aplicaciones web.

Diseño atómico, átomos, moléculas, organismos y plantillas
Diseño atómico, átomos, moléculas, organismos y plantillas

Es decir, en lugar de nariz, tenemos elementos de entrada como input, textarea o select por mencionar algunos. En lugar de sistema respiratorio tenemos un componente Suma de números que permite recibir dos números, sumarlos y mostrártelos en la aplicación a través del DOM. Es un ejemplo tal vez tonto, pero que explica claramente la relación de los componentes y el mundo real, tomando como ejemplo nuestro sistema respiratorio.

¿Cómo empezar a utilizar los componentes web?

Ahora, la creación de componentes web está basado en 4 principales tecnologías, estándares de la web que nos permite crear componentes reutilizables y encapsular su funcionamiento, pero al mismo tiempo permiten la comunicación entre ellos para crear sistemas robustos. También recientemente se está introduciendo módulos de Javascript a través del tag script, este último debe sustituir a los HTML imports.

  • Custom elements o elementos personalizados
  • Shadow DOM, DOM en las sombras.
  • HTML Templates, Plantillas HTML.
  • HTML imports, importar componentes a través del tag <link rel="import">
  • <script type="module">, cargando módulos usando el tag script.

Estos estándares aún no están completamente implementados en los navegadores web modernos, pero existen actualmente librerías como polymer y x-tag que te permiten crear componentes sin preocuparte por las tecnologías que aun no funcionan o por las que no funcionan a un 100%.

Actualmente el soporte para navegadores es el siguiente:

Lista de tecnologías y navegadores web para poder soportar componentes web nativamente
Lista de tecnologías y navegadores web para poder soportar componentes web nativamente

La imagen fue tomada de webcomponents.org, y si quieres saber más a detalle sobre el soporte de los navegadores, aquí te dejo la lista:

También existen frameworks como Angular y Vue, y librerías como React, que se basan en componentes, que aunque no ocupen los 4 estándares principales, se utilizan para crear aplicaciones web robustas. Aquí hay un compendio inicial de algunos de ellos:

Custom Elements Everywhere

Custom Elements Everywhere
Making sure frameworks and custom elements can be BFFs 🍻

Siguiente artículo sobre el tema:

Custom Elementos o Elementos HTML personalizados.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *