Sadot Hernández

¿Qué es el patrón de diseño MVC?

PublicadoDecember 11, 2020

Es un patrón de diseño de software comúnmente utilizado para desarrollar la interfaz de usuario que divide la lógica del programa relacionado en tres elementos interconectados.

image

El MVC es un patrón de diseño que separa una aplicación en tres componentes lógicos principales: Modelo, Vista y Controlador, de ahí la abreviatura. Cada componente de la arquitectura está construido para manejar un aspecto de desarrollo específico de una aplicación.

La arquitectura MVC separa la lógica empresarial y la capa de presentación entre sí. Se utilizaba tradicionalmente para interfaces gráficas de usuario (GUI) de escritorio, pero hoy en día se ha vuelto popular para diseñar aplicaciones web y aplicaciones móviles.

Antecedentes del MVC

  • La arquitectura MVC se discutió por primera vez en 1979 por Trygve Reenskaug
  • En 1987 se introdujo por primera vez en el lenguaje de programación Smalltalk
  • Es hasta 1988 cuando, a través de un artículo, es aceptado por primera vez como concepto general
  • En los últimos tiempos, el patrón MVC se usa ampliamente en aplicaciones web modernas

 

Arquitectura MVC

Los diseños de modelos basados ​​en la arquitectura MVC separan la lógica de la aplicación de la interfaz de usuario al diseñar el software. Como su nombre lo indica, el patrón MVC tiene tres capas, que son:

  • Modelo: representa la capa empresarial de la aplicación
  • Vista: define la presentación de la aplicación
  • Controlador: gestiona el flujo de la aplicación

En el contexto de la programación Java, el Modelo consta de clases Java simples, la Vista muestra los datos y el Controlador es el encargado de responder a los eventos. Normalmente, estos eventos son acciones (técnicamente conocidas como peticiones) que usualmente son realizadas por el usuario, aunque también pueden ser peticiones más automatizadas como API’s. Esta separación da como resultado que las solicitudes de los usuarios se procesen de la siguiente manera:

  1. El navegador del cliente envía una solicitud de una página al Controlador presente en el servidor
  2. El Controlador realiza la acción de invocar el Modelo, recuperando así los datos que necesita en respuesta a la solicitud
  3. El controlador luego da los datos recuperados a la Vista
  4. La Vista se renderiza y se envía de vuelta al cliente para que el navegador la muestre

 

Ventajas

La arquitectura MVC ofrece muchas ventajas para un programador al desarrollar aplicaciones, entre las que se incluyen:

  • Varios desarrolladores pueden trabajar con las tres capas (Modelo, Vista y Controlador) simultáneamente
  • Ofrece escalabilidad mejorada, que complementa la capacidad de crecimiento de la aplicación
  • Como los componentes tienen poca dependencia entre sí, son fáciles de mantener
  • Un modelo puede ser reutilizado por múltiples vistas, lo que permite la reutilización de código
  • La adopción de MVC hace que una aplicación sea más expresiva y fácil de entender
  • Ampliar y probar la aplicación se vuelve más fácil
  • Ofrece el mejor soporte para el desarrollo basado en pruebas
  • Funciona bien para aplicaciones web que cuentan con el apoyo de grandes equipos de diseñadores y desarrolladores web
  • Optimización de motores de búsqueda (SEO)
  • Permite la agrupación lógica de acciones relacionadas en un Controlador

Desventajas

  • La navegación de la arquitectura puede ser compleja en algún momento, ya que introduce nuevas capas de abstracción que requieren que los usuarios se adapten a los criterios de descomposición de la arquitectura
  • Para desarrollar una aplicación bajo el patrón de diseño MVC es necesaria una mayor dedicación en los tiempos iniciales del desarrollo. Normalmente el patrón exige al programador desarrollar un mayor número de clases que, en otros entornos de desarrollo, no son necesarias. Sin embargo, esta desventaja es muy relativa ya que, posteriormente, en la etapa de mantenimiento de la aplicación es mucho más mantenible, extensible y modificable que una aplicación que no lo implementa
  • Requiere la existencia de una arquitectura inicial sobre la que se deben construir clases e interfaces para modificar y comunicar los módulos de una aplicación
  • Esta arquitectura inicial debe incluir, por lo menos, un mecanismo de eventos para poder proporcionar las notificaciones que genera el modelo de aplicación; una clase Modelo, otra clase Vista y una clase Controlador genéricas que realicen todas las tareas de comunicación, notificación y actualización que serán luego transparentes para el desarrollo de la aplicación
  • MVC es un patrón de diseño orientado a objetos, por lo que su implementación es sumamente costosa y difícil en lenguajes que no siguen este paradigma
  • Se requiere conocimiento de múltiples tecnologías
  • Mantenimiento de mucho código en el Controlador

Una implementación simple de MVC usando Java

Tendremos los tres siguientes ejemplos:

  1. EstudianteModel: el Modelo
  2. EstudianteView: la Vista para imprimir detalles en la consola
  3. EstudianteController: un Controlador que almacena datos en EstudianteModel y actualiza EstudianteView en consecuencia.

Paso 1: Crear el Modelo

/**
 * The Class EstudianteModel.
 */
public class EstudianteModel {

	/** The rol no. */
	private String rolNo;

	/** The nombre. */
	private String nombre;

	/**
	 * Gets the rol no.
	 *
	 * @return the rol no
	 */
	public String getRolNo() {
		return rolNo;
	}

	/**
	 * Sets the rol no.
	 *
	 * @param rolNo the new rol no
	 */
	public void setRolNo(String rolNo) {
		this.rolNo = rolNo;
	}

	/**
	 * Gets the nombre.
	 *
	 * @return the nombre
	 */
	public String getNombre() {
		return nombre;
	}

	/**
	 * Sets the nombre.
	 *
	 * @param nombre the new nombre
	 */
	public void setNombre(String nombre) {
		this.nombre = nombre;
	}

	/**
	 * To string.
	 *
	 * @return the string
	 */
	@Override
	public String toString() {
		StringBuilder builder = new StringBuilder();
		builder.append("EstudianteModel [rolNo=").append(rolNo).append(", nombre=").append(nombre).append("]");
		return builder.toString();
	}

}

El código se explica por sí mismo. Consiste en funciones para obtener/establecer el número de rol y los nombres de los estudiantes. Llamémoslo “EstudianteModel.java”.

Paso 2: Crear la Vista

/**
 * The Class EstudianteView.
 */
public class EstudianteView {

	/** Logger. */
	private static final Logger logger = LoggerFactory.getLogger(EstudianteView.class);

	/**
	 * Obtener detalle estudiante.
	 *
	 * @param nombreEstudiante the nombre estudiante
	 * @param estudianteRolNo the estudiante rol no
	 */
	public void obtenerDetalleEstudiante(String nombreEstudiante, String estudianteRolNo) {

		logger.info("Estudiante: ");
		logger.info("Nombre: {}", nombreEstudiante);
		logger.info("Rol No: {}", estudianteRolNo);

	}

}

Esto es simplemente para imprimir los valores en la consola. Llamemos a esto “EstudianteView.java”.

/**
 * The Class EstudienteController.
 */
public class EstudienteController {

	/** The model. */
	private EstudianteModel model;

	/** The view. */
	private EstudianteView view;

	/**
	 * Instantiates a new estudiente controller.
	 *
	 * @param model the model
	 * @param view  the view
	 */
	public EstudienteController(EstudianteModel model, EstudianteView view) {
		this.model = model;
		this.view = view;
	}

	/**
	 * Sets the nombre estudiante.
	 *
	 * @param nombre the new nombre estudiante
	 */
	public void setNombreEstudiante(String nombre) {
		model.setNombre(nombre);
	}

	/**
	 * Gets the nombre estudiante.
	 *
	 * @return the nombre estudiante
	 */
	public String getNombreEstudiante() {
		return model.getNombre();
	}

	/**
	 * Sets the estudiante rol no.
	 *
	 * @param rolNo the new estudiante rol no
	 */
	public void setEstudianteRolNo(String rolNo) {
		model.setRolNo(rolNo);
	}

	/**
	 * Gets the estudiante rol no.
	 *
	 * @return the estudiante rol no
	 */
	public String getEstudianteRolNo() {
		return model.getRolNo();
	}

	/**
	 * Actualizar vista.
	 */
	public void actualizarVista() {
		view.obtenerDetalleEstudiante(model.getNombre(), model.getRolNo());
	}

}

Llamemos a esto “EstudianteController.java”. Un vistazo superficial te dirá que este Controlador es el único responsable de llamar al Modelo para obtener o establecer los datos y, a continuación, actualizar la Vista. Ahora, echemos un vistazo a cómo está unido todo esto.

Paso 4: Crear clase Main

/**
 * The Class App.
 */
public class App {

	/**
	 * The main method.
	 *
	 * @param args the arguments
	 */
	public static void main(String[] args) {

		// Buscar el registro del estudiante basado en su número de lista de la base de
		// datos
		EstudianteModel model = recuperarEstudianteDeBaseDeDatos();

		// Crear una vista: para escribir los detalles del estudiante en la consola
		EstudianteView view = new EstudianteView();
		EstudienteController controller = new EstudienteController(model, view);
		controller.actualizarVista();

		// Actualizar modelo de datos
		controller.setNombreEstudiante("John");
		controller.actualizarVista();
	}

	/**
	 * Recuperar estudiante de base de datos.
	 *
	 * @return the estudiante model
	 */
	private static EstudianteModel recuperarEstudianteDeBaseDeDatos() {

		EstudianteModel student = new EstudianteModel();
		student.setNombre("Robert");
		student.setRolNo("10");
		return student;

	}

}

Esto se llama “App.java”. Como puedes ver, recupera los datos del estudiante de la base de datos o una función (en este caso estamos usando una función para establecer los valores) y los inserta en el modelo EstudianteModel. A continuación, inicializa la vista que habíamos creado anteriormente.
Además, también inicializa nuestro controlador y lo une al modelo y a la vista. El método actualizarVista() forma parte del controlador que actualiza los detalles del alumno en la consola.

Step 5: Resultado

Si todo va bien, el resultado debería ser:

[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Estudiante:   
[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Nombre: Robert  
[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Rol No: 10  
[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Estudiante:   
[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Nombre: John  
[main] INFO org.zademy.ejemplo.mvc.EstudianteView - Rol No: 10  

Has implementado correctamente la arquitectura MVC mediante Java, aunque para una aplicación sencilla. Sin embargo, simple, esta aplicación es suficiente para demostrar la arquitectura MVC.

Después de tanto decir y hacer, es difícil enfatizar más la arquitectura MVC en cualquier aplicación web / de escritorio en estos días. Proporciona un nivel completamente nuevo de modularidad a su código, lo que lo hace mucho más legible y fácil de mantener. Por lo tanto, si deseas escalar a nuevas alturas en tu carrera como desarrollador de aplicaciones, hacerte con la arquitectura MVC y su funcionamiento debe ser tu principal prioridad.

Referencias