MVC de forma sencilla: ¿Por qué es como hacer un sándwich?"
Los sitios web modernos son interactivos y dinámicos: responden a las acciones del usuario, procesan sus solicitudes y muestran resultados. Esto es cómo funcionan muchos servicios en línea, como la banca en línea o los cines en línea. Para crear sitios web interactivos y dinámicos, generalmente se utiliza el patrón arquitectónico MVC. Explicaremos en términos sencillos en qué consiste este modelo.
¿Qué es el modelo MVC: teoría
Una página estática en HTML no puede responder a las acciones del usuario. Para una interacción bidireccional, se necesitan páginas web dinámicas. MVC es la clave para comprender el desarrollo de aplicaciones web dinámicas, por lo que un desarrollador debe conocer este modelo.
MVC significa "modelo-vista-controlador" (del inglés model-view-controller). Es una forma de organizar el código que implica separar los bloques responsables de resolver diferentes tareas. Un bloque se encarga de los datos de la aplicación, otro se encarga de la apariencia visual y otro controla el funcionamiento de la aplicación.
MVC significa "modelo-vista-controlador" (del inglés model-view-controller). Es una forma de organizar el código que implica separar los bloques responsables de resolver diferentes tareas. Un bloque se encarga de los datos de la aplicación, otro se encarga de la apariencia visual y otro controla el funcionamiento de la aplicación.
Componentes de MVC:
- Modelo: este componente se encarga de los datos y define la estructura de la aplicación. Por ejemplo, si estás creando una aplicación de lista de tareas, el código del componente model definirá la lista de tareas y las tareas individuales.
- Vista: este componente se encarga de la interacción con el usuario. Es decir, el código del componente "view define la apariencia visual de la aplicación y las formas de utilizarla.
- Controlador: este componente se encarga de la conexión entre model y view. El código del componente controller define cómo responde el sitio web a las acciones del usuario. Básicamente, es el cerebro de la aplicación MVC.
Desglose de MVC utilizando el ejemplo de una tienda de sándwiches
Ahora analicemos el patrón MVC utilizando el ejemplo de una tienda de sándwiches.
Imagina que has llegado a una tienda o cafetería donde puedes pedir un sándwich. En el menú hay sándwiches de atún, pavo y jamón. Tú pides un sándwich de pavo. El vendedor te entiende al instante. Se gira hacia la cocina y le dice a los cocineros que preparen un sándwich de pavo.
Los cocineros tienen a su disposición varios ingredientes: atún, pavo, jamón, queso, lechuga y otros ingredientes que se agregan a los sándwiches. Ellos seleccionan solo lo necesario para tu sándwich de pavo. Recibes tu pedido.
La compra de un sándwich se puede describir utilizando MVC:
Imagina que has llegado a una tienda o cafetería donde puedes pedir un sándwich. En el menú hay sándwiches de atún, pavo y jamón. Tú pides un sándwich de pavo. El vendedor te entiende al instante. Se gira hacia la cocina y le dice a los cocineros que preparen un sándwich de pavo.
Los cocineros tienen a su disposición varios ingredientes: atún, pavo, jamón, queso, lechuga y otros ingredientes que se agregan a los sándwiches. Ellos seleccionan solo lo necesario para tu sándwich de pavo. Recibes tu pedido.
La compra de un sándwich se puede describir utilizando MVC:
- Modelo (Model): la cocina donde el cocinero prepara el sándwich
- Vista (View): el sándwich terminado que disfrutas
- Controlador (Controller): el vendedor o el barman que toma el pedido y lo pasa a la cocina
Cuando pediste el sándwich de pavo al barman, ya te imaginabas cómo sería el sándwich terminado. Eso es la vista.
De la misma manera, puedes imaginar la interacción con un sitio web. Por ejemplo, cuando entras a un sitio web y decides ver una sección específica, ya te imaginas lo que esperas ver: una lista de artículos, imágenes o información relevante.
Cuando haces clic en esa sección, se envía una solicitud al servidor. La solicitud pide mostrar ese contenido. Esto es similar a pedir un sándwich de pavo. Esto es el controlador.
En el servidor, se procesa tu solicitud. El programa extrae de la base de datos los textos o datos correspondientes para mostrar la lista. Esto se parece a lo que hacen los cocineros cuando preparan tu sándwich en la cocina. Esto es el modelo.
Finalmente, el servidor reúne toda la información y te la muestra en la pantalla, igual que el barman te entrega tu sándwich listo. Esto es nuevamente la vista.
De la misma manera, puedes imaginar la interacción con un sitio web. Por ejemplo, cuando entras a un sitio web y decides ver una sección específica, ya te imaginas lo que esperas ver: una lista de artículos, imágenes o información relevante.
Cuando haces clic en esa sección, se envía una solicitud al servidor. La solicitud pide mostrar ese contenido. Esto es similar a pedir un sándwich de pavo. Esto es el controlador.
En el servidor, se procesa tu solicitud. El programa extrae de la base de datos los textos o datos correspondientes para mostrar la lista. Esto se parece a lo que hacen los cocineros cuando preparan tu sándwich en la cocina. Esto es el modelo.
Finalmente, el servidor reúne toda la información y te la muestra en la pantalla, igual que el barman te entrega tu sándwich listo. Esto es nuevamente la vista.
El patrón MVC en el desarrollo web real: cómo funciona el controlador
El controlador maneja las solicitudes entrantes. En un framework, esto puede implicar definir URL específicas a las que el usuario accede al hacer clic en un enlace o al presionar un botón. Veamos esto en un ejemplo de un sitio web que muestra al usuario una lista de sus amigos:
Al hacer clic en el enlace website(.)com/profile/ ->
devuelve profilewebsite(.)com/friends/ ->
devuelve friendswebsite(.)com/friend={userName}/ ->
devuelve el perfil de un amigo específico
Modelo
El modelo se encarga de los datos que se almacenan y procesan en el servidor.
User: { userName: { firstName, lastName }, friends }
Vista
Es una plantilla HTML que el servidor devuelve después de procesar la solicitud. Si la solicitud se procesa correctamente, obtienes una página web con una lista de amigos. Si la solicitud es incorrecta, se muestra una página de error 404.
<ul>
<li>Friend 1: {friendList[0].userName}</li>
<li>Friend 2: {friendList[1].userName}</li>
<li>Friend 3: {friendList[2].userName}</li>
...
</ul>
Conclusión
MVC es un enfoque de diseño de aplicaciones que implica separar el código en bloques de modelo, vista y controlador. El controlador maneja las solicitudes entrantes. El modelo recupera la información necesaria de la base de datos para cumplir con solicitudes específicas. La vista define el resultado de la solicitud que recibe el usuario.
Este es una traducción adaptada del artículo What is MVC, and how is it like a sandwich shop?
Este es una traducción adaptada del artículo What is MVC, and how is it like a sandwich shop?
Leer otros artículos de Blog
Lee otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.