Arquitectura de Software · Patrón MVC

Laboratorio: del espagueti al MVC

Reciben una aplicación que funciona pero está escrita como código espagueti: las reglas, la pantalla y el almacenamiento mezclados en un solo archivo. La van a separar en Modelo Vista y Controlador, y unas pruebas les dirán si lo hicieron bien. Trabajan en equipo, con JavaScript puro: sin frameworks y sin instalar dependencias.

• Objetivos
• Antes de la clase
• Ruta y tiempos
• Mapa del proyecto
• 0 · Preparación
• 1 · Leer el espagueti
• 2 · El Modelo
• 3 · La Vista
• 4 · El Controlador
• 5 · Tres cambios
• 6 · Medir y entregar
• Entrega y rúbrica
• Problemas frecuentes

Qué van a lograr

• Reconocer la responsabilidad de cada pieza de MVC y trazar el recorrido de una acción del usuario por ellas.
• Diagnosticar código espagueti: encontrar reglas, pantalla y almacenamiento mezclados, y las consecuencias de esa mezcla.
• Refactorizar un script en Modelo, Vista y Controlador sin cambiar lo que hace la aplicación.
• Comprobar la separación con pruebas del Modelo (sin navegador) y con reglas automáticas de arquitectura.
• Extender el sistema con tres cambios, cada uno tocando solo el lugar correcto: una regla, una vista nueva y un almacén distinto.

Antes de la clase

No hay descargas pesadas: todo cabe en unos pocos archivos. Aun así, comprueben su equipo con calma el día anterior.

• Node.js 18 o superior (recomendado 20). Comprueben con node -v. Si no lo tienen, instalen la versión LTS desde nodejs.org. ¿No pueden instalar nada? Hay un Plan B al final de esta guía.
• Git. Comprueben con git --version.
• Visual Studio Code (recomendado) y un navegador moderno (Chrome, Edge, Firefox o Safari 15 o superior).
• Una cuenta de GitHub por integrante. Una persona del equipo crea el repositorio y agrega al resto como colaboradores.
• Equipos de 2 o 3 personas. En pareja trabajen como conductor y navegante y cambien de rol en cada parte.

Ruta y tiempos

Ruta corta (≈ 100 min): partes 0 a 4 y una entrega reducida (secciones 1 y 2 de ENTREGA.md y la salida de npm test). Las partes 5 y 6 quedan como trabajo posterior.

Mapa del proyecto

1. Una persona del equipo abre la plantilla del laboratorio y presiona Create repository from template. Nombre: equipo-N-mvc (cambien N). Visibilidad: Public. Después, en Settings → Collaborators, agrega a sus compañeros.
2. Cada integrante clona el repositorio de su equipo (no la plantilla) y entra a la carpeta:

   git clone https://github.com/SU-USUARIO/equipo-N-mvc.git
   cd equipo-N-mvc

3. Arranquen el servidor (no hay nada que instalar):

   npm start

   La terminal imprime tres direcciones. Déjenla abierta mientras trabajan.
4. Abran http://localhost:3000/espagueti.html y usen la app dos minutos: agreguen una evaluación con nota y otra sin nota, provoquen un error, califiquen, eliminen y recarguen la página.
5. Abran http://localhost:3000/: es la app MVC. Se ve la pantalla pero no hace nada: es lo esperado, la van a construir ustedes.
6. En otra terminal ejecuten las pruebas:

   npm test

   Verán rojo: también es lo esperado. Cada grupo de pruebas es un pedazo del Modelo que falta.

Antes de separar algo hay que entender por qué está mal pegado. Esta parte no escribe código: lee, clasifica y anota.

1. Abran espagueti.html en el editor y lean el <script> completo (≈ 100 líneas). Para cada línea pregúntense: ¿esto son datos y reglas M, dibujar la pantalla V o reaccionar al usuario C?
2. Completen la tabla de 12 fragmentos de ENTREGA.md, sección 1. Si una línea mezcla varios roles, escriban Mezcla y digan cuáles.
3. Hagan estos tres experimentos y anoten qué observan:
   • El cambio de regla. Cambien en el código la nota mínima de 3.0 a 3.5. ¿Cuántos lugares tuvieron que tocar? (Busquen 3.0 con Ctrl + F.) ¿Y si olvidan uno?
   • El nombre raro. En la app espagueti escriban <b>hola</b> como nombre de una evaluación. ¿Qué pasa y por qué?
   • La prueba imposible. ¿Pueden comprobar la regla «los pesos suman a lo sumo 100» sin abrir el navegador? ¿Qué se lo impide?
4. Listen al menos 5 olores de diseño en ENTREGA.md, sección 2: qué consecuencia tiene cada uno cuando el proyecto crece y en qué pieza de MVC viviría su solución.

El Modelo es la pieza más importante y la más fácil de probar, porque no sabe nada de pantallas. Abran src/modelo.js: ya trae las constantes, el constructor y un getter. El resto son TODO que ustedes reemplazan. Las pruebas de pruebas/modelo.pruebas.js son la especificación: léanlas.

La API que deben construir

Las reglas y sus mensajes exactos

Las pruebas comparan el mensaje tal cual. Validen en este orden: nombre, peso, nota y, al final, la suma de pesos.

Cómo se calcula el resumen

Paso a paso

1. 2A · Agregar y validar (≈ 10 min). Implementen agregar. Pistas: String(nombre ?? '').trim(); Number.isFinite(peso); el id sale de this.#siguienteId++ y solo se consume si todo salió bien; guarden el nombre ya limpio. Ejecuten npm run test:modelo: el grupo A debe quedar completo.
2. 2B · Calificar y eliminar (≈ 5 min). Les conviene un método privado #buscar(id) (lanza R6) y otro #validarNota(nota) que también reutilice agregar. Grupo B en verde.
3. 2C · Resumen (≈ 8 min). Sigan la tabla de fórmulas. Grupo C en verde.
4. 2D · Observer y persistencia (≈ 7 min). suscribir guarda la función en el Set de suscriptores y devuelve cómo quitarla. #cambio() —que deben llamar al final de cada orden que sí cambió algo— guarda en el almacén y avisa a todos los suscriptores. Grupo D en verde.

Listo cuando: los grupos A, B, C y D están en verde y el Modelo no menciona document, window, alert ni localStorage. Hagan commit: Parte 2: Modelo.

La Vista presenta y escucha; no decide. El HTML estático (formulario, tabla, resumen) ya está en index.html: la Vista lo rellena y avisa qué hizo el usuario. Abran src/vista.js.

1. 3A · Constructor (≈ 3 min). Guarden en this.#el los elementos que van a usar (los id están en el comentario). Suscríbanse al Modelo —modelo.suscribir(...)— para redibujarse sola y llamen a this.render() una vez.
2. 3B · Eventos que la Vista ofrece (≈ 6 min). alAgregar, alEliminar y alCalificar reciben un manejador (una función) y lo llaman cuando el usuario actúa. La Vista no decide qué hacer: solo avisa. alEliminar ya viene escrito en vista.js como ejemplo resuelto; hagan los otros dos igual:

   alEliminar(manejador) {
     // Un solo escuchador en la tabla (delegación de eventos): sirve para todas las filas.
     this.#el.tabla.addEventListener('click', (evento) => {
       const boton = evento.target.closest('button[data-eliminar]');
       if (boton) manejador(Number(boton.dataset.eliminar)); // el id viaja en data-eliminar
     });
   }

   Para alAgregar escuchen submit del formulario (y evento.preventDefault()); para alCalificar, el evento change de la tabla con el id en data-nota.
3. 3C · Órdenes que obedece (≈ 3 min). leerFormulario() devuelve { nombre, peso, nota } con el texto escrito; limpiarFormulario(), mostrarError(mensaje) y limpiarError() son de una línea.
4. 3D · Dibujar (≈ 8 min). render() lee this.#modelo.evaluaciones y this.#modelo.resumen() y actualiza la pantalla:

Listo cuando: las filas y el resumen se dibujan, y npm run arquitectura muestra el grupo Vista pasiva completo. Commit: Parte 3: Vista.

El Controlador es el más pequeño y el que más tienta a convertirse en un «cajón de sastre». Su trabajo: leer → ordenar → reaccionar. Abran src/controlador.js.

1. 4A · Registrarse en la Vista (≈ 8 min). En el constructor llamen a vista.alAgregar, vista.alEliminar y vista.alCalificar. Recuerden que la Vista entrega texto, pero el Modelo espera números: un texto vacío en la nota significa null (sin nota).
2. 4B · Errores (≈ 8 min). Armen un método privado (por ejemplo #intentar(orden)) que ejecute la orden al Modelo y, si lanza un ErrorDeReglas, le pida a la Vista que muestre el mensaje y que se redibuje (así el campo vuelve al valor que el Modelo sí aceptó). Si la orden sale bien, limpien el error; y al agregar, también el formulario. Los errores que no son de reglas no se esconden: se vuelven a lanzar.
3. 4C · Comparar (≈ 4 min). Repitan en http://localhost:3000/ (borren antes los datos: F12 → Application → Local Storage → Clear) esta lista y comprueben que obtienen exactamente lo mismo que en espagueti.html:

Listo cuando: la lista da igual en las dos versiones y npm test muestra en verde los grupos de arquitectura Modelo puro, Vista pasiva y Controlador delgado. Commit: Parte 4: Controlador.

Aquí se cobra la separación. Cada cambio debe tocar solo las piezas que le corresponden. Hagan un commit por cambio y peguen git show --stat HEAD en ENTREGA.md, sección 5: es la prueba de que no tocaron de más.

5A · Una regla nueva: nombres únicos Modelo 8 min

Dos evaluaciones no pueden llamarse igual (sin importar mayúsculas ni espacios sobrantes). Mensaje exacto: Ya existe una evaluación con ese nombre. Las pruebas del grupo E ya están escritas: háganlas pasar.

5B · Una segunda vista: el termómetro Vista 12 min

Otra forma de mostrar el mismo Modelo: una barra que se llena según el acumulado, con una línea en la nota mínima. Creen src/termometro-vista.js con esta forma (los estilos .termometro, .relleno, .linea y .leyenda ya existen y index.html trae el contenedor #termometro):

import { NOTA_MINIMA, NOTA_MAXIMA } from './modelo.js';

export class TermometroVista {
  constructor(raiz, modelo) {
    // 1. Crea la barra: un div.termometro con un div.relleno y un div.linea, y debajo un p.leyenda.
    //    La línea siempre va en NOTA_MINIMA ÷ NOTA_MAXIMA × 100 % (style.left).
    // 2. Suscríbete al Modelo y dibuja una primera vez.
  }

  render() {
    // relleno.style.width = acumulado ÷ NOTA_MAXIMA × 100 %   (sin pasar de 100 %)
    // leyenda: "3.25 de 5.0 · la línea marca el mínimo para aprobar (3.0)"
  }
}

Móntenla en src/main.js con una línea (más su import): new TermometroVista(document.getElementById('termometro'), modelo);

5C · Otro almacén: sesión en vez de localStorage Almacén 5 min

Agreguen a src/almacen.js la clase AlmacenSesion, igual a AlmacenLocal pero con sessionStorage (sobrevive a recargar, pero se pierde al cerrar la pestaña). Cámbienlo en main.js: new NotasModelo(new AlmacenSesion('notas.v1')). Comprueben: recargar conserva los datos; cerrar la pestaña y volver a abrir, no.

Retos opcionales bonus

• Cambien la nota mínima a 3.5: ¿cuántos archivos tocaron? (Debe ser uno: la constante NOTA_MINIMA.) ¿Qué cambió en el termómetro sin que lo programaran?
• Agreguen una tercera vista: una lista «Lo que falta» con las evaluaciones sin nota. ¿Qué archivos toca?
• Intenten romper la arquitectura a propósito: agreguen document.title = 'x' en modelo.js y ejecuten npm run arquitectura. ¿Qué prueba lo detecta y con qué mensaje?

1. Todo en verde. Ejecuten npm test: deben pasar las 54 pruebas (39 del Modelo y 15 de arquitectura). Peguen el resultado en ENTREGA.md, sección 4.
2. Dibujen el flujo de «agregar una evaluación», desde que el usuario presiona Agregar hasta que ve la fila nueva, marcando en cada paso el archivo y el método que actúa (ENTREGA.md, sección 3). Pista: son al menos siete pasos y pasan por las tres piezas, el almacén y las dos vistas.
3. Reflexionen sobre las cinco preguntas de ENTREGA.md, sección 6. Con sus palabras, no las de la presentación.
4. Suban todo:

   git add -A
   git commit -m "Entrega del laboratorio MVC"
   git pull
   git push

Entrega y rúbrica

Entreguen el enlace del repositorio del equipo (público). Todo lo escrito va en ENTREGA.md.

• npm test en verde: 54 de 54 pruebas.
• Tres commits para la Parte 5, cada uno con su git show --stat en ENTREGA.md.
• Mapa de responsabilidades (12 fragmentos) y al menos 5 olores.
• Diagrama del flujo con archivos y métodos.
• Reflexión completa, con respuestas propias.

Problemas frecuentes

# macOS / Linux
PORT=3001 npm start
# Windows PowerShell
$env:PORT=3001; npm start
# Windows cmd (las comillas evitan que se cuele un espacio al final)
set "PORT=3001" && npm start

Vocabulario

Modelo

La pieza que guarda los datos y las reglas del negocio. No sabe nada de pantallas.

Vista

La pieza que muestra el estado del Modelo y avisa lo que hace el usuario. No decide reglas.

Controlador

La pieza que traduce lo que hace el usuario en órdenes para el Modelo y decide qué mostrar si falla.

Observer

Patrón de diseño: un objeto avisa de sus cambios a quien se haya suscrito, sin conocerlo. Así el Modelo actualiza las Vistas sin depender de ellas.

Almacén

Quien guarda y carga los datos (memoria, localStorage, un servidor…). El Modelo solo conoce su «contrato»: cargar() y guardar().

Raíz de composición

El único lugar (main.js) que crea las piezas y las conecta. Las demás las reciben.

Olor de diseño

Una señal en el código de que algo está mal estructurado, aunque funcione.

Refactorizar

Mejorar la estructura del código sin cambiar lo que hace.

Prueba de arquitectura

Una regla de diseño que una máquina revisa sola (en inglés, fitness function): por ejemplo, «el Modelo no usa el DOM».

Acoplamiento

Cuánto depende una pieza de otras. Menos acoplamiento = cambios más baratos.