En el mundo de la programación, existen muchos patrones que nos permiten determinar la estructura de nuestro proyecto y solucionar problemas recurrentes. Uno de los patrones más usados es el MVC, también conocido como modelo vista controlador. En este post, te enseñaremos qué hace la vista en el patrón MVC para que así sepas cómo usarla en tus propios proyectos.
Como puedes leer en nuestro post sobre el modelo vista controlador, el patrón MVC es una solución muy usada en el desarrollo web para descomponer nuestros proyectos en distintos módulos. En este sentido, la segmentación de responsabilidades es una de las ventajas del patrón MVC.
El patrón MVC, como su nombre indica, se compone de tres segmentos: el modelo, la vista y el controlador. De manera muy breve, te podemos explicar que el modelo se refiere a los datos con los que se ejecuta un proyecto y la vista a la interpretación de estos datos en el navegador (lo que ve el usuario final), mientras el controlador es el punto de conexión entre estos dos. Sin embargo, reconocer cada uno de estos segmentos es un poco más complejo y requiere de más profundidad.
En otro post te hemos explicado qué hace un controlador en el patrón MVC, a continuación te explicaremos qué hace la vista en el patrón MVC.
¿Qué hace la vista en el patrón MVC?
Lo que hace la vista en el patrón MVC es tomar los datos del modelo y pintar con ellos en el navegador. En nuestros posts sobre identificar el patrón modelo vista controlador e implementar el patrón modelo vista controlador, te hemos mostrado un ejemplo en el que la vista toma una serie de datos y los transforma usando un string template. Es decir, toma una serie de datos y los ordena en etiquetas HTML. A este proceso se le llama HTML dinámico.
HTML dinámico
La vista en el patrón MVC puede tener un rol dinámico o un rol estático. Cuando trabajamos con un HTML dinámico, es decir, aquel que tendrá que cambiar en tiempo de ejecución a partir de los datos del modelo o a la interacción del usuario, debemos crear la vista en el patrón MVC en un archivo nuevo. Entonces, crearemos un archivo view.js para construir la vista usando datos de una API que cambian constantemente.
¿Qué es un view.js? Este archivo es un tipo de vista que recibe un dato y construye un HTML para devolverlo al controlador. Este es el caso del ejemplo manejado en los artículos anteriores, en los que se trabaja con datos creados por el usuario que se construirán en el navegador en tiempo de ejecución.
HTML estático
El HTML estático es aquel que no cambia con la interacción del usuario. Te ponemos un ejemplo para comprenderlo mejor.
Supongamos que tenemos el formulario que hemos creado en nuestro post sobre crear un formulario de registro en HTML. Ahora, queremos controlar el comportamiento de este formulario desde nuestro código JavaScript. Para ello, hemos creado un SignupController.js que tomará el nodo HTML de form y ejecutará la lógica requerida sobre este formulario.
A continuación, te mostramos las líneas de código que insertamos en este controlador, en las que solo creamos una clase y le pasamos el elemento form necesario para que controle este formulario.
export class SignUpController {
constructor (formElement) {
this.formElement = formElement;
}
}
El siguiente paso normalmente sería anclar la vista a este controlador, sin embargo, antes de crear un nuevo archivo JS, debemos preguntarnos cómo de necesario es. En realidad, cuando hablamos de HTML estático estamos diciendo que no es necesario crear una vista en tiempo de ejecución. Es decir, que lo que se ha creado en el desarrollo es lo que se verá en el navegador, sin cambio alguno.
Un formulario de registro es un tipo de HTML estático, en el que la vista en el patrón MVC es el propio nodo HTML. Por esto, no hay necesidad de crear un nuevo archivo view.js, pues no se necesita pintar un HTML de forma dinámica, sino usar el propio nodo HTML a controlar como archivo de vista.
Ahora que sabes exactamente qué hace la vista en el patrón MVC, ¡te invitamos a probar este y otros patrones en tus propios proyectos! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás patrones, lenguajes y herramientas fundamentales para este ejercicio. ¿Quieres convertirte en todo un profesional? ¡Pide información ahora y descubre cómo alcanzar tus metas!
