¿Qué es MVC y en qué se parece una tienda de sándwiches?

En la Internet actual, los sitios web tienden a ser interactivos, dinámicos y cumplen algún tipo de función. Pueden ser más que una página HTML y CSS estática. Aquí es donde entra en juego el patrón arquitectónico Model View Controller (MVC).

La interacción del usuario permite casos de uso que serían imposibles con solo una página cargada estáticamente. Por eso, en el desarrollo web moderno, es importante comprender cómo se crean las páginas dinámicas. Quizás la clave de esto es la familiaridad con el patrón arquitectónico MVC.

Si es un principiante en el desarrollo web, palabras como "patrón arquitectónico" pueden parecer abrumadoramente complejas y abstractas. Pero la idea general detrás de MVC es realmente muy intuitiva. Haré todo lo posible para explicarlo de esa manera en este artículo.

¿Es importante comprender MVC?

En mi opinión, la respuesta a esta pregunta es sí.

MVC es importante de entender porque es la estructura básica sobre la que se construyen la mayoría de las aplicaciones web. Lo mismo ocurre con las aplicaciones móviles y los programas de escritorio.

Hay muchas variaciones en torno a la idea básica de MVC. El concepto inicial fue creado alrededor de 1978 en Xerox PARC por Trygve Reenskaug. Su objetivo era ayudar al usuario final a manipular y controlar un sistema informático subyacente de una manera más visual e intuitiva.

MVC logra esto al permitir que un usuario interactúe con una interfaz de usuario. Esto permite la manipulación y el control del sistema.

El concepto de alto nivel

Sin usar palabras sofisticadas, ahora explicaré la idea básica detrás de MVC a través de un caso de uso simple.

Imagina que estás en una tienda de sándwiches. Te acercas al mostrador y miras el menú.

Decides que quieres el sándwich de pavo (de hecho, ya puedes imaginarte mordiéndolo). Entonces le dices al empleado tu orden.

El empleado sabe exactamente lo que quiere cuando pide el sándwich de pavo. Se vuelve hacia la estación de preparación de sándwiches y les dice a las personas allí lo que necesitan saber para cumplir con su pedido.

El equipo de sándwiches tiene muchos recursos a su disposición. Jamón, pavo, atún, ensalada y queso pueden ir en los sándwiches. Ellos toman los ingredientes necesarios para su pedido y los ensamblan en el sándwich de pavo que ha pedido.

Una vez que el sándwich está completo, se lo entregan. Ahora tienes el sándwich de pavo que querías.

Una explicación

En este ejemplo anterior, había tres objetos separados y distintos que representan una parte en nuestro MVC:

  • La estación para hacer sándwiches (modelo)
  • El sándwich terminado que recibiste al final (Ver)
  • El empleado (controlador)

Cuando ordenó su sándwich, tenía una idea clara de lo que esperaba que fuera el resultado final: un sándwich de pavo ( ver ).

Esto es lo mismo que cuando estás en un sitio web. Por ejemplo, en Facebook puede presionar el botón 'Amigos' para ver una lista de sus amigos. Es de esperar que aparezca su lista de amigos y ya puede visualizarla en su mente.

Cuando presiona el botón 'Amigos', realiza una solicitud a los servidores de Facebook. La solicitud es para servirle con su lista de amigos, tal como le pidió su sándwich al empleado ( controlador ).

Su solicitud llega a los servidores de Facebook. Golpea su controlador, que intenta resolverlo. Luego toma a todos tus amigos de una base de datos, al igual que el fabricante de sándwiches ( modelo ) toma todos los ingredientes.

Estos recursos (los datos de su lista de amigos) se ensamblan en una respuesta. Esto es similar a cómo la sandwichera ensambló todos los ingredientes en un bocadillo terminado ( ver ).

Esta lista de amigos se le envía para que la consuma, como estaba el sándwich al final de su pedido.

Resumen

El empleado es el controlador:

  • Conoce todas las combinaciones posibles de sándwiches que puedes pedir.
  • Él recopila su información y envía una orden para que se resuelva

Los sandwiches son los modelos:

  • Saben qué elementos se necesitan para armar su sándwich terminado

El bocadillo es la vista:

  • Es la 'cosa' que finalmente recibe el usuario final

Usando un marco web

Controlador:

El controlador maneja las solicitudes entrantes. En un marco web, esto sería una declaración de URL específicas que se asignan a una funcionalidad específica que compone su solicitud.

Example URLswebsite.com/profile/ --> returns your profilewebsite.com/friends/ --> returns list of friendswebsite.com/friend={userName}/ --> returns specific friend

Modelo:

Así es como se ven sus datos en el back-end.

User:- userName- firstName- lastName- friends

Ver:

Esta es la plantilla HTML que se devuelve después de que se resuelva su solicitud. Si la solicitud tiene éxito, debería obtener una página con sus amigos. De lo contrario, es posible que obtenga una página 404 "No encontrado".


    
  • Friend 1: {friendList[0].userName}
  • Friend 2: {friendList[1].userName}
  • Friend 3: {friendList[2].userName}
  • ...

Conclusión

Al interactuar con un sistema, que suelen ser capaces de C rear, R etreive, T pdate y D objetos de elete en la base de datos subyacente. Esto a menudo se abrevia como " CRUD ". Aquí, hemos analizado la recuperación de datos.

I did not explain here how a user can modify the data in the database (the C, U and D in CRUD). Usually, you are able to add, update and delete things on a website.

The functionality for this is pretty much the same as explained above. The difference is, your data is attached to your request to the controller.

I hope that you now have a clearer understanding of what MVC architecture is and how it might work.

If you thought this explanation was helpful, or have any questions or thought about how to improve this article, please feel free to comment!