Durante la historia del mundo de la programación, se han desarrollado distintos conceptos teóricos que permiten a los desarrolladores saber qué hacer en distintos escenarios. Uno de estos conceptos es el patrón, una técnica estándar de solucionar ciertos problemas. En este post, te enseñaremos cómo implementar el patrón modelo vista controlador en un proyecto web.
Antes de empezar a implementar el patrón modelo vista controlador
Antes de enseñarte cómo implementar el patrón modelo vista controlador, te recomendamos leer nuestros posts sobre modelo vista controlador e identificar el patrón modelo vista controlador. Estos dos posts te enseñarán los componentes fundamentales de este patrón y cómo reconocerlos en un código ya escrito. Además, es a partir de ese último artículo que lograremos implementar el patrón modelo vista controlador a continuación. Este proceso es diferente a identificar los segmentos de código, pues se refiere a la segmentación de responsabilidades en distintos módulos. Es decir, en distintos archivos que luego se comunicarán entre sí.
¿Cómo implementar el patrón modelo vista controlador?
Una vez has logrado identificar las distintas secciones de tu código que ejercen las responsabilidades de modelo, vista y controlador, es momento de segmentarlo para realmente implementar el patrón.
El primer paso para implementar el patrón modelo vista controlador es crear los distintos archivos en donde ubicaremos nuestro código. En el caso de nuestro ejemplo, estos archivos serán todos de tipo .js, pues nuestro código lo hemos escrito en este lenguaje de programación.
El primer archivo que crearemos será el del modelo. Nuestro ejemplo maneja los datos de un array “tweets” porque estamos simulando un listado de Twitter. Por ello, nuestro primer archivo se llamará TweetService.js. ¿Por qué service? Pues porque normalmente identificamos como servicios a los archivos que ofrecen datos, ya sea porque llaman a un APIRest, localStorage o alguna otra fuente de datos. Dentro de este archivo, hemos declarado las siguientes líneas de código:
export default {
getTweets ( ) {
const tweets = [
{
handler: "user01",
content: "Algo que publico en Twitter.",
created_at: "2022-01-31",
},
{
handler: "user02",
content: "Contenido del tweet del usuario 2",
created_at: "2022-01-29",
},
{
handler: "user03",
content: "Contenido del tweet del usuario 3",
created_at: "2022-01-30",
},
];
return tweets;
};
};Con este simple paso, hemos logrado separar el controlador de nuestro modelo. El siguiente paso para implementar el patrón modelo vista controlador es separar la vista también. Para esto, crearemos un nuevo archivo llamado TweetView.js. Dentro de este archivo crearemos una función que controle la creación de la vista de un tweet, que en nuestro anterior post hemos creado con una plantilla de tipo template string. A continuación, te mostramos las líneas de código que hemos decidido meter en este archivo:
export function setView (tweet) {
const currentTime = new Date (tweet.created_at);
const tweetTemplate =
<h1> ${tweet.handler} </h1>
<p> ${tweet.content} </p>
<p> ${currentTime} </p>
;
return tweet;
}Como siempre, te recomendamos pensar muy bien los nombres de las funciones, variables y propiedades que crees en tu código. Esto garantizará que cuando veas estos elementos llamados en otros lugares del código sepas exactamente qué hacen sin necesidad de leer sus líneas cada vez. Además, crear nombres simples facilitará el proceso de llamar a estos componentes múltiples veces, evitando a su vez errores de nomenclatura.
Ahora, el siguiente paso para implementar el patrón modelo vista controlador es crear un archivo con un nombre que nos recuerde que el código sobrante es el controlador del MVC. En nuestro caso, hemos decidido llamar a este archivo tweetsController.js. Recuerda que aquí insertaremos el código que controla el paso del modelo de los datos a la vista.
El último paso para implementar el patrón modelo vista controlador en tu proyecto será llamar a los distintos archivos que has creado desde tu index.js, pues es este el archivo al que estará llamando tu código HTML.
Ahora que sabes cómo implementar el patrón modelo vista controlador en un proyecto web, ¡es hora de que apliques este conocimiento en tus propios proyectos! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde aprenderás a desarrollar todo tipo de proyectos para la web con diversas herramientas y lenguajes de programación como JavaScript (para back y frontend), HTML, CSS y JSX. ¡Anímate a dar el siguiente paso en tu formación e inscríbete ya para triunfar en el mercado laboral!
