Patrón de diseño Modelo Vista Controlador (MVC)

UMLSin duda este es uno de los patrones de diseño mas utilizados cuando desarrollamos una pagina web sin embargo puede que no estemos consciente de que es si.

El patrón MVC se ha convertido en un estándar para el desarrollo de aplicaciones que permite separar la aplicación entres capas que aunque estén relacionadas no siempre tiene por que estar juntas. Estas capas son la Vista, el Controlador y el Modelo y a continuación explico que es cada uno.

Modelo: El modelo representa la información como tal, representan los datos con los que la aplicación esta trabajando, ya sea los datos de una tabla, un formulario, etc. Podríamos decir que el modelo es la información la cual el usuario puede visualizar en pantalla.

Por ejemplo este texto que estas leyendo en este momento es el modelo.

Vista: Esta es la representación gráfica o pantalla que estas viendo en este momento, La vista requiere del Modelo para mostrar la información en la pantalla.

Controlador: El controlador es el puente entre la vista y el modelo, ya que desde el controlador podemos hacer operaciones que cambien el modelo lo cual representa un cambio en los datos de la vista.

 

El patrón MVC lo podrías ver de la siguiente manera:

MVC

Fig.1: Patrón MVC – Las lineas continuas son asociaciones directas y las punteadas don indirectas.

Como podemos ver en la fig1 el controlador tiene una asociación con la vista y el modelo, ademas la vista tiene una asociación con el modelo.

Por lo cual cuando el usuario realiza una operación lo hace a través del controlador el cual realiza operaciones sobre el modelo y luego notifica a la vista para que actualice la información que vemos en pantalla, Cuando el modelo es actualizado este puede arrojar eventos que notifican a la vista para que se actualice es por eso que existe la linea punteada entre ambos.

La vista tiene una relación indirecta con el controlador debido a que existen implementaciones de MVC en las cuales la vista no tiene acceso al Modelo por lo cual toda la información la obtiene a través del controlador.

La siguiente figura muestra como los componentes interactúan

MVCFlow

Pasos

  1. El usuario realiza un operación en la pantalla como presionar un botón.
  2. El controlador recibe la petición de realizar una acción
  3. El modelo es actualiza por medio del controlador el cual puede agregar,actualizar o borrar información.
  4. La vista es actualizada con los cambios realizados al modelo.
  5. El usuario recibe las actualizaciones en pantalla.
  6. FIN.

Espero que esta breve explicación de lo que es MVC les sea de utilidad.

 

Ya está a la venta mi nuevo libro “Introducción a los patrones de diseño“, en donde expongo los 25 patrones de diseño más utilizados y explicados desde un enfoque del mundo real, con ejemplos que pueden ser aplicados en tus proyectos. Sin duda es unos de los libros más completos de patrones de diseño en español.

Artículos relacionados

Patrón de diseño Command El patrón de diseño Command es muy utilizado cuando se requiere hacer ejecuciones de operaciones sin conocer realmente lo que hacen, estas operaciones...
Introducción a los patrones de diseño (video) https://youtu.be/rrcCv8wwnlE En esta charla explicaré la importancia de los patrones de diseño, así como las ventajas que te traerá en tu crecimien...
Patrón de Diseño Factory Esta entrada formara parte de un conjunto de entradas dedica específicamente a explicar los diferentes patrones de diseño que existe. El patrón de di...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

Deja un comentario

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