Regístrate para acceder a más de 15 cursos gratuitos de programación con un simulador

Model-View-Controller (MVC) JS: Desarrollo web

La arquitectura de las aplicaciones web se determina principalmente por la naturaleza de la web, por cómo funciona HTTP. La secuencia solicitud-procesamiento-respuesta es la base sobre la que se ensarta todo lo demás.

Los frameworks van más allá y dividen la aplicación en capas adicionales ya dentro del mismo proceso de procesamiento de la solicitud. Tal división se sugiere por sí misma, sin ella, el código rápidamente se convierte en un revoltijo de solicitudes a la base de datos, generación de HTML y lógica de procesamiento de datos. Hablaremos de esta división en esta lección.

Qué es MVC

La estructura de la aplicación a menudo consta de tres capas. A partir del procesamiento de la solicitud, se destaca naturalmente la capa de plantillas, en base a las cuales se genera el HTML. Esta capa se conoce como View o vista.

Además de este, se destacan otras dos capas:

  • Model — modelo
  • Controller — controlador

El resto se agrega a medida que la complejidad de la aplicación aumenta.

Las tres capas principales se combinan en la abreviatura MVC (Model-View-Controller o Modelo–vista–controlador):

MVC

Hablaremos de esto en esta lección.

El patrón arquitectónico MVC define la estructura principal de la aplicación y facilita el desarrollo y mantenimiento del código. El patrón MVC con algunas modificaciones se usa en todos los frameworks web. Todo está claro con la vista, pero necesitamos entender el modelo y el controlador independientemente.

Cómo funcionan los controladores desde el punto de vista de MVC

Por controladores se entienden los manejadores de solicitudes. Aceptan un objeto de solicitud y devuelven un objeto de respuesta. En el caso de Fastify, los controladores generalmente están representados por funciones anónimas, pero esto no es necesario. Por ejemplo, en los grandes frameworks, el controlador es una clase y los manejadores son sus métodos. Estos métodos suelen llamarse acciones (actions).

Con este enfoque, toda la lógica se concentra en los controladores, que es aceptable en los casos más simples. En todas las demás situaciones, se destaca otra capa, que se llama modelo.

Cómo funciona el modelo desde el punto de vista de MVC

La capa del modelo es responsable de la lógica de negocio de la aplicación y los datos relacionados con ella.

Técnicamente, esta capa se puede presentar de diferentes formas, todo depende del lenguaje de programación específico y las bibliotecas utilizadas. La opción más común es ORM, pero no siempre es así. Además, bastante a menudo, parte de la lógica todavía encuentra su camino en los controladores, incluso con la presencia de una capa de modelo separada.

¿Por qué destacar una capa de modelo separada? El hecho es que dentro de nuestro sitio web implementamos algún dominio que no está relacionado de ninguna manera con el sitio web y el framework utilizado.

Tomemos, por ejemplo, un sitio web para contadores. Si decidimos crear el sitio web utilizando un framework específico, eso de ninguna manera afectará las reglas de contabilidad. En otras palabras, las reglas comerciales de la contabilidad no tienen nada que ver con la programación. Los programadores simplemente expresan el dominio en forma de código.

Esta división de la materia y la programación afecta la estructura del código. Teóricamente, podemos identificar dos capas de código dentro del sitio web:

  • El primero procesa las solicitudes web.
  • El segundo describe el dominio y permite trabajar con él.

En el mejor de los casos, podemos tomar la segunda capa y transferirla a otro framework sin cambios. Pero en la práctica, es muy difícil trazar esta frontera. Por ejemplo, ¿a qué se refiere el envío de un correo electrónico al registrarse, autorizar o recuperar una contraseña?

Esta parte de la aplicación es la mayor dificultad en el código. El modelo no tiene una estructura clara, esto no es un "solicitud-procesamiento-respuesta" clásico. Modelar un dominio es un tema bastante complejo, sobre el cual aún habrá muchos debates.

La relación entre las capas en MVC no es menos importante que la presencia de las propias capas:

MVC Relations

Vamos a describir este esquema en detalle:

  • El modelo vive su propia vida, sin saber nada sobre la existencia del controlador o la vista. Las otras capas MVC la usan para iniciar la lógica de negocio o formar una respuesta HTTP.
  • El controlador inicia varios procesos: inicia la lógica de negocios, es responsable de formar la respuesta e inicia la presentación de las plantillas.
  • La vista no sabe nada sobre otras capas, pero utiliza datos del controlador para formar HTML, JSON o similar.

Materiales adicionales

  1. MVC de forma sencilla: ¿Por qué es como hacer un sándwich? 🥪

Para acceder completo a curso necesitas un plan básico

El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.

Obtener acceso
130
cursos
1000
ejercicios
2000+
horas de teoría
3200
test

Obtén acceso

Cursos de programación para principiantes y desarrolladores experimentados. Comienza tu aprendizaje de forma gratuita

  • 130 cursos, 2000+ horas de teoría
  • 1000 ejercicios prácticos en el navegador
  • 360 000 estudiantes
Al enviar el formulario, aceptas el «Política de privacidad» y los términos de la «Oferta», y también aceptas los «Términos y condiciones de uso»

Nuestros graduados trabajan en empresas como:

Bookmate
Health Samurai
Dualboot
ABBYY