¿Qué es el patrón mediador en web components?

Autor: | Última modificación: 27 de abril de 2023 | Tiempo de Lectura: 2 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabes qué es el patrón mediador en web components? Si quieres aprender en qué consiste este elemento dentro del sector del desarrollo web y la programación, te invitamos a seguir leyendo este post.

¿Qué es el patrón mediador en web components?

Dentro el trabajo con la programación en código y el desarrollo web, existen muchos conceptos que nos ayudan a vislumbrar cuál es la importancia y la relación entre los elementos y los componentes. Uno de estos conceptos es el del patrón mediador.

El patrón mediador es un patrón de comunicación muy habitual dentro de los web components, donde el padre se encarga de entablar el lugar y el momento para la comunicación entre dos componentes hijos. El padre, por lo tanto, es el patrón mediador.

Ejercicio práctico sobre el patrón mediador

En teoría, puede que el patrón mediador (el padre que establece la comunicación entre los hijos) se parezca a cualquier otro tipo de herramienta que podemos integrar dentro del desarrollo de web components. Para aclarar sus particularidades, te traemos una ejemplificación de la importancia de esta herramienta dentro del desarrollo web y la creación de los web components.

El ejercicio sobre el que hablaremos a continuación consiste en la creación de una aplicación web de to do a partir de web components. En la planificación que hemos realizado para cada uno de los componentes, que puedes encontrar en diferentes artículos del blog, realizamos el modelado de tres componentes. El más amplio está compuesto por otros web components, el de items list app, el cual se encarga de renderizar todo el proceso. Mientras tanto, en su interior aparecen los web components de input action y list item.

En este caso, el web component más amplio, es decir, el items list app, es el que se puede considerar el padre o el patrón mediador, ya que es el que permite la comunicación entre los distintos web components.

Una posible comunicación entre estos se da cuando el elemento sent text aparece en el contexto de list item, con lo que crea un nuevo elemento, y se lo pasa como contenido al otro componente. Es decir, de izquierda a derecha o de input action a list item. Un componente lo genera o dice qué texto debería aparecer (input actión) y el otro componente lo pinta (list item).

A continuación, puedes ver una representación gráfica, realizada en diagrams.net, que te permite responder a la pregunta sobre qué es el patrón mediador en web components. El patrón mediador se plantea como un lugar o medio en el que dos componentes web, es decir, input action y list item, se comunican entre sí.

¿Qué es el patrón mediador en web components?

¿Cuál es el siguiente paso?

Ya que te hemos respondido a la pregunta acerca de qué es el patrón mediador en web components, estarás ansioso por seguir profundizando en este tema. Como todavía queda mucho más por aprender, te recomendamos revisar el temario de nuestro Desarrollo Web Full Stack Bootcamp. Esta formación intensiva e íntegra de gran calidad te permitirá potenciar tus habilidades y transformarte en un profesional exitoso en cuestión de meses. ¡Entra ya y pide más información para descubrir cómo cambiar tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado