🤔 ¿Qué es la arquitectura MVC?
La arquitectura MVC es un patrón arquitectural que nos dicta cómo estructurar cada componente de nuestro software, las responsabilidades de cada uno y las relaciones entre ellos.
Básicamente, evita que hagamos una ensalada de espagueti (todo mezclado). Nos dicta cómo dividir nuestro software en componentes según la finalidad de cada uno, estructurando nuestro código de manera funcional y modular.
Funcional porque cada bloque de código se ubicará dentro del componente según su función o rol. No podrás mezclar el código de la parte visual (estilos, colores, fuentes, imágenes) con la parte de los datos (código SQL) ni con la parte lógica que controla la interacción entre estos otros dos componentes.
Modular porque consistirá en módulos que funcionarán tanto por separado como íntegramente en nuestro software como un sistema. Es decir, dentro del controlador se importará el modelo de datos que estará en un archivo o varios aparte, y lo mismo sucederá con las vistas.
📊 El flujo de MVC (con una analogía)
Para que lo veas más claro, imagina que vas a un restaurante:
- El cliente (usuario) mira el menú (la Vista) y hace un pedido.
- El camarero (Controlador) recibe el pedido, va a la cocina y pide los ingredientes.
- La cocina (Modelo) prepara los datos (ingredientes) y el camarero te trae el plato (respuesta).
Así, cada parte tiene su trabajo y no se mezclan. Ahora veamos cada capa en detalle.
🏛️ Modelo – La lógica de datos
La capa del Modelo en nuestra arquitectura MVC es aquella que se encarga de trabajar con los datos. Normalmente encontraremos mecanismos para acceder a la información y actualizar los datos en la fuente de almacenamiento, que bien podría ser una base de datos relacional (MySQL, PostgreSQL) o no relacional (MongoDB).
Podemos pensar en el modelo como un «mapa» que conecta nuestra aplicación con la base de datos. En frameworks como Flask, esto se hace a menudo con SQLAlchemy (un ORM, o «Object-Relational Mapper»), que nos permite escribir código Python en lugar de SQL.
Ejemplo real de un modelo (con SQLAlchemy)
En un proyecto Flask con SQLAlchemy, un modelo de datos para la tabla «Usuarios» podría verse así:
Este modelo define:
- Qué columnas tiene la tabla (
id,nombre,apellido, etc.). - Qué tipo de datos acepta cada columna (
String,Integer, etc.). - Restricciones (como
nullable=False, que significa que el campo no puede estar vacío).
Cada modelo suele tener también métodos para realizar operaciones sobre los datos: crear, leer, actualizar y eliminar (conocidas como CRUD).
CRUD son las siglas de:
- Create (Crear) – Añadir un nuevo registro.
- Read (Leer) – Obtener registros existentes.
- Update (Actualizar) – Modificar un registro.
- Delete (Eliminar) – Borrar un registro.
Estas cuatro operaciones son la base de cualquier aplicación que maneje datos.
🖼️ Vista – Interfaz de usuario
La Vista es lo que el usuario ve. Es la interfaz que muestra la información y permite la interacción. Su única responsabilidad es mostrar información (que recibe del controlador) y enviar acciones del usuario (como clics o envíos de formularios) al controlador.
La Vista NO contiene lógica de negocio ni acceso a datos. Eso es responsabilidad del modelo y del controlador, respectivamente.
🌐 Vistas en aplicaciones web (Flask / Django)
En el desarrollo web, las vistas suelen estar compuestas por dos tecnologías fundamentales:
- HTML (HyperText Markup Language): Es un lenguaje de etiquetado (NO de programación). Se utiliza para estructurar el contenido de una página web: títulos, párrafos, imágenes, enlaces, formularios, etc. El navegador interpreta estas etiquetas y las muestra al usuario.
- CSS (Cascading Style Sheets): Es un lenguaje de estilos que define cómo se ve el HTML: colores, fuentes, tamaños, márgenes, posiciones, animaciones, etc. Permite separar el contenido (HTML) de la presentación (CSS), lo que facilita el mantenimiento y la consistencia visual.
En frameworks como Flask o Django, las vistas se construyen utilizando plantillas (templates). Estas plantillas son archivos HTML que pueden incluir código dinámico (por ejemplo, con el motor de plantillas Jinja2 en Flask) para mostrar datos variables que llegan desde el controlador.
Ejemplo de plantilla HTML con Jinja2 (Flask)
<!DOCTYPE html>
<html>
<head>
<title>{{ titulo }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/estilos.css') }}">
</head>
<body>
<h1>Bienvenido, {{ usuario.nombre }}!</h1>
<p>Esta es tu lista de tareas:</p>
<ul>
{% for tarea in tareas %}
<li>{{ tarea.descripcion }} - {% if tarea.completada %}✅{% else %}⏳{% endif %}</li>
{% endfor %}
</ul>
<form action="/agregar" method="POST">
<input type="text" name="nueva_tarea" placeholder="Nueva tarea...">
<button type="submit">Agregar</button>
</form>
</body>
</html>
En este ejemplo, las llaves dobles {{ ... }} y las etiquetas {% ... %} son propias de Jinja2. Permiten insertar datos dinámicos (variables, bucles, condicionales) dentro del HTML. El archivo CSS se enlaza con url_for('static', filename='css/estilos.css'), que es la forma de Flask de referenciar archivos estáticos.
📌 Nota sobre CSS en Flask/Django: Los archivos CSS se guardan en la carpeta static/ (por convención en Flask) o static/ (en Django). Así se mantienen separados de las plantillas HTML, siguiendo la filosofía de separación de responsabilidades.
🖥️ Vistas en aplicaciones de escritorio (PyQt / Tkinter)
En aplicaciones de escritorio, la vista también existe, pero no es HTML/CSS. En su lugar, utilizamos librerías gráficas que crean ventanas, botones, etiquetas, campos de texto, etc. El concepto es el mismo: la vista es la interfaz que el usuario ve y con la que interactúa.
- Tkinter: Es la librería gráfica estándar de Python. Es sencilla pero limitada en cuanto a diseño visual.
- PyQt / PySide: Son bindings de Python para la biblioteca gráfica Qt. Permiten crear interfaces modernas y profesionales, con soporte para CSS (sí, ¡CSS también se usa en aplicaciones de escritorio con Qt!) para estilizar los componentes.
En ambos casos, la vista recibe datos del controlador y los muestra, y envía eventos (como clics en botones) al controlador para que los procese.
| Entorno | Tecnología | Ejemplo |
|---|---|---|
| Web | HTML + CSS (con plantillas dinámicas) | Flask + Jinja2, Django + DTL |
| Web (dinámico) | HTML + CSS + JavaScript (SPA) | React, Vue, Angular (con APIs en Flask) |
| Escritorio | Librerías gráficas (widgets) | PyQt5, Tkinter, wxPython |
Nota sobre HTML y CSS: No voy a enseñar HTML y CSS en profundidad en este blog, porque considero que son conocimientos básicos que puedes adquirir en MDN o en tutoriales de YouTube. Sin embargo, en los ejemplos prácticos usaremos plantillas sencillas con Jinja2 (el motor de plantillas de Flask) y algo de CSS básico para que se vea presentable.
Nota sobre HTML y CSS: No voy a enseñar HTML y CSS en profundidad en este blog, porque considero que son conocimientos básicos que puedes adquirir en
🧠 Controlador – El cerebro que conecta Vista y Modelo
El Controlador es el cerebro de la aplicación. Es el que:
- Recibe las solicitudes del usuario (por ejemplo, una URL a la que navega o un formulario que envía).
- Decide qué modelo consultar o modificar.
- Decide qué vista mostrar como respuesta.
En Flask, los controladores suelen ser funciones asociadas a una ruta (URL) mediante el decorador @app.route().
Ejemplo mínimo de controlador en Flask
from flask import Flask, render_template
app = Flask(__name__)
# Controlador para la página de inicio
@app.route('/')
def inicio():
# Aquí podríamos consultar un modelo...
# Luego renderizamos una vista (plantilla HTML)
return render_template('index.html')
# Controlador para la página de registro
@app.route('/registro', methods=['GET', 'POST'])
def registro():
if request.method == 'POST':
# Aquí el controlador recibe los datos del formulario
# y llama al modelo para guardarlos en la base de datos
# ...
return "¡Usuario registrado con éxito!"
# Si es GET, mostramos el formulario de registro
return render_template('registro.html')
Como ves, el controlador no hace directamente SQL, ni genera HTML directamente. Delega esas responsabilidades al modelo y a la vista, respectivamente. Eso es lo que hace que el código sea ordenado, mantenible y reutilizable.
💡 La regla de oro de MVC es:
Cada capa tiene UNA y SOLO UNA responsabilidad.
Si mezclas, tu código se convierte en un espagueti imposible de mantener.
❌ Lo que NO debes hacer (errores típicos)
- 🔴 Poner código SQL en el controlador → El controlador solo debe orquestar, no saber cómo se guardan los datos.
- 🔴 Escribir lógica de negocio en la vista (HTML/Jinja2) → La vista solo muestra datos, no los procesa.
- 🔴 Hacer consultas a la base de datos desde la vista → La vista no debe saber ni que existe una base de datos.
✅ Lo que SÍ debes hacer (la receta del éxito)
- 🟢 El Modelo → Solo se encarga de los datos (consultas, validaciones, CRUD).
- 🟢 El Controlador → Recibe peticiones, llama al modelo, elige la vista y devuelve la respuesta. Nunca escribe SQL.
- 🟢 La Vista → Solo muestra información (HTML, CSS, Jinja2). Nunca procesa datos ni hace consultas.
🔑 Beneficios de respetar las capas MVC:
- ✅ Mantenible: Puedes cambiar la base de datos sin tocar la vista.
- ✅ Escalable: Puedes añadir nuevas funcionalidades sin romper lo que ya funciona.
- ✅ Reutilizable: Puedes usar el mismo modelo en diferentes controladores.
- ✅ Testeable: Puedes probar cada capa por separado (¡los tests son más fáciles!).
🎯 Recuerda: El MVC no es una religión, es una herramienta. Pero si la usas bien, tu código te lo agradecerá (y tú también, cuando tengas que volver a él dentro de 6 meses).
💎 Ejemplo de software desarrollado usando esta arquitectura MVC
He desarrollado software utilizando esta arquitectura y puedes verlo en acción funcionando en el dominio de mi empresa de desarrollo de software y sitios webs aquí: Fractalika Digital
Cuando visitas este sitio web está funcionando una aplicación en Python desarrollada con el framework Flask siguiendo esta arquitectura. Y por dentro se ve algo así:
MVC no es una moda — es la diferencia entre un proyecto que puedes mantener y uno que terminarás odiando. Estas son sus tres capas y los beneficios reales que obtienes al aplicarlo.
🧩 Responsabilidades de cada capa
| Capa | Responsabilidad | Ejemplo en Flask |
|---|---|---|
| 📦 Modelo | Gestión de datos: conexión a BD, consultas, validaciones, lógica de datos. | Clases SQLAlchemy (db.Model) |
| 🖼️ Vista | Interfaz de usuario: HTML, CSS, JS (lo que ve el usuario). NUNCA contiene lógica de negocio. | Plantillas Jinja2 (.html) |
| 🎮 Controlador | Orquesta la aplicación: recibe peticiones, llama al modelo, elige la vista y devuelve la respuesta. | Funciones con @app.route() |
🔑 Regla de oro: Cada capa tiene UNA y SOLO UNA responsabilidad. Si mezclas, tu código se convierte en espagueti.
🚀 Beneficios reales de aplicar MVC
| Beneficio | ¿Qué significa para ti? | Impacto en tu proyecto |
|---|---|---|
| 🧹 Mantenibilidad | Puedes modificar una capa sin romper las otras. | ✅ Cambiar la base de datos (de MySQL a PostgreSQL) sin tocar una línea de la vista. |
| 📈 Escalabilidad | Puedes añadir nuevas funcionalidades sin reescribir todo. | ✅ Añadir una nueva ruta o un nuevo modelo sin afectar lo que ya funciona. |
| 🤝 Trabajo en equipo | Varios desarrolladores pueden trabajar en paralelo sin pisarse. | ✅ Un desarrollador trabaja en el modelo, otro en la vista y otro en el controlador. Sin conflictos. |
| 🧪 Testeabilidad | Puedes probar cada capa por separado (tests unitarios). | ✅ Pruebas automáticas que te avisan si algo se rompe antes de que llegue a producción. |
| ♻️ Reutilización | Puedes usar el mismo modelo en diferentes controladores o proyectos. | ✅ Un modelo de «Usuario» que sirve para registro, login, perfil, etc. Sin duplicar código. |
| 🧠 Claridad mental | Sabes exactamente dónde buscar cada cosa. | ✅ Cuando algo falla, sabes si es problema de datos, de lógica o de presentación. Menos tiempo perdido. |
💡 La lección más importante: MVC no es una religión, es una herramienta. Pero si la usas bien, tu código te lo agradecerá (y tú también, cuando tengas que volver a él dentro de 6 meses).
🎯 Resumen final: Aprender MVC es invertir en tu futuro como desarrollador. No es solo teoría, es la base de cualquier aplicación profesional.
¿Qué es un framework y por qué lo necesitamos?
Un framework (o «marco de trabajo») es un conjunto de herramientas, librerías y convenciones que te facilitan el desarrollo de software. Es como un andamio: te da una estructura base sobre la que construir, para que no tengas que empezar desde cero cada vez.
En Python, los frameworks más populares para desarrollo web son:
- Flask – Un microframework ligero y flexible. Ideal para APIs, proyectos pequeños o cuando quieres control total.
- Django – Un framework completo («batteries included») que ya trae ORM, autenticación, panel de administración, etc. Perfecto para aplicaciones grandes y robustas.
Ambos frameworks pueden adaptarse a la arquitectura MVC (o variantes como MVT en Django). Pero, ¿qué es MVC?
Un framework es un conjunto de herramientas y reglas que te facilitan el desarrollo. Te da una estructura base para construir tu aplicación sin empezar de cero. Ejemplo: Flask o Django.
Un patrón de diseño es una solución reusable a un problema común en el diseño de software. Es como un molde que te dice cómo organizar tu código. Ejemplo: MVC (Modelo-Vista-Controlador).
¿Cómo se relacionan? Un framework puede implementar uno o varios patrones de diseño. Por ejemplo, Flask y Django no son MVC por sí mismos, pero pueden usarse siguiendo MVC (o sus variantes, como MVT en Django).
En los siguientes tutoriales, usaremos el framework Flask aplicando el patrón de diseño MVC (Modelo-Vista-Controlador) para estructurar nuestro código de forma profesional y mantenible. 🚀
🚀 Próximos pasos
En la siguiente entrada, pondremos en práctica esta arquitectura con un proyecto real en Flask. Aprenderemos a:
- Crear un proyecto Flask con estructura MVC.
- Definir modelos de datos con SQLAlchemy.
- Crear vistas con Jinja2.
- Implementar un controlador que conecte todo.
¡Prepárate porque esto se pone bueno! 💻🚀
📅 Última actualización: agosto 5, 2026