Modelo vista controlador

Autor: | Última modificación: 13 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

El mundo de la programación tiene más teoría de la que solemos esperar. Normalmente creemos que programar es simplemente escribir líneas de código y entender el propósito de cada cosa que escribimos. Sin embargo, también hay acciones más grandes que nos permiten resolver diversos problemas que nos encontramos al programar proyectos. En este post, te enseñaremos qué es el modelo vista controlador, un patrón de diseño software para las interfaces de usuario.

¿Qué es modelo vista controlador?

Cuando hablamos de modelo vista controlador nos referimos a un patrón de programación. Ahora, ¿qué es un patrón de programación? Pues es una forma estándar de resolver un problema. Esto quiere decir que hay cientos de patrones en el mundo de la programación, pues hay muchas formas estándar de resolver problemas.

Los patrones de programación son independientes al mundo del desarrollo web. Da igual si estamos hablando de Java, de Python o de JavaScript. En realidad, el mundo de los patrones de diseño es muy amplio. Solo de este patrón en particular ya se despliegan otros tres, conocidos como MVVM (modelo vista modelo de vista), MVP (modelo vista presentador) y MVW (modelo vista whatever).

El modelo vista controlador es conocido como el patrón MVC y se usa comúnmente a la hora de implementar interfaces de usuario. Su función principal es separar de forma clara la visualización del usuario con el modelo de datos, con el fin de evitar el acoplamiento de código. Para ello, define tres secciones importantes, aclaradas en su propio nombre. Estas son:

Modelo

La sección de modelo en el patrón MVC se refiere a los datos. Es decir, con lo que vas a trabajar, independientemente de dónde provengan. En este sentido, no importa si son parte de una base de datos, de un archivo JSON o de las acciones de un usuario en un formulario. La procedencia de un dato no va a cambiar el modelo vista controlador.

Vista

La sección de vista en el patrón MVC se refiere a la presentación final que le hacemos al usuario. Es decir, lo que está viendo en el navegador.

Controlador

La sección de controlador en el patrón MVC actúa como una especie de pegamento, pues es el encargado de gestionar o de mediar entre la sección de modelo y la sección de vista. Es decir, el controlador es el que va a gestionar la lógica y va a evitar el acoplamiento entre la vista y el modelo.

Para conocer más sobre el patrón MVC, te recomendamos ir a la página oficial de Mozilla Developer Network. Allí encontrarás un glosario donde se describe el patrón MVC.

Con nombres y apellidos

Para entender el modelo vista controlador con más facilidad podemos pensar en un ejemplo. Así, podemos darle nombres y apellidos a cada una de estas secciones. Pensemos en un escenario en el que tenemos un endpoint:

  • Entonces, la sección de la vista sería lo que le estamos proporcionando al usuario en la API. Es decir, los resultados de nuestro endpoint.
  • La sección del controlador sería el handler que le pongamos a nuestro endpoint. Por ejemplo, tenemos un /cars en el que, con un método get, obtenemos coches. En este sentido, este «obtener coches» es nuestro controlador.
  • Finalmente, la sección de modelo o capa de datos es el modelado de datos que para nosotros representa un coche. Si pensamos en términos de objetos literales, podríamos tener propiedades como matrícula, modelo, año, marca, etc.

Ten presente que el modelo vista controlador es apenas un patrón que se ajustará a las necesidades de cada proyecto. Es decir, el patrón se va a adaptar o va a identificar distintas piezas según dónde lo utilices. Por ello, aunque ahora le hemos puesto nombres y apellidos, cambiarán según tu proyecto.

¿Te animas a seguir aprendiendo?

Ahora que sabes exactamente qué es y cómo funciona el modelo vista controlador, ¡es hora de aplicarlo en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás a dominar lenguajes de programación y diversas herramientas que te convertirán en un experto. ¿Te animas a seguir aprendiendo con nosotros? ¡Pide ya más información!

👉 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