Patrón arquitectónico MVC

Si alguna vez has oído hablar de patrones arquitectónicos en programación, probablemente también hayas oído hablar de MVC. 😎 Pero, ¿qué es y por qué es necesario? Vamos a verlo juntos, y trataré de hacerlo de la manera más simple y clara posible.

/

¿Qué es MVC? 🤔

MVC significa Model-View-Controller (Modelo-Vista-Controlador). Es un patrón arquitectónico que ayuda a organizar tu código para que sea más fácil de desarrollar y mantener.

MVC divide la aplicación en tres componentes principales:

• Modelo — almacena datos y lógica para trabajar con ellos.

• View (Vista) — es responsable de mostrar los datos al usuario.

• Controller (Controlador) - vincula el Modelo y la Vista, gestiona las acciones del usuario y determina qué datos enviar a la Vista.

  

¿Por qué necesitas MVC? 🤓

El objetivo principal de MVC es hacer que el código sea comprensible y compartir la responsabilidad. Por ejemplo, si necesita cambiar la lógica de trabajo con los datos, los cambios se realizan en Model, y el código responsable de mostrar en la pantalla (View), permanece intacto. Esto simplifica el desarrollo y hace que el código sea más legible y fácil de mantener.

MVC se utiliza a menudo en el desarrollo web para separar la interfaz de usuario de la lógica de los procesos de negocio. Esta división permite que varios desarrolladores trabajen en paralelo en un sistema: alguien se ocupa de la interfaz, alguien de la lógica de trabajo con los datos.

Análogos de MVC

Además de MVC, existen otros patrones arquitectónicos, como:

• MVP (Model-View-Presenter): Similar a MVC, pero el controlador ha sido reemplazado Presenter — funciona más estrechamente con View.

• MVVM (Model-View-ViewModel): Un patrón que se usa a menudo en aplicaciones de escritorio y móviles, especialmente con marcos como Angular o Vue.

Todos estos patrones tienen un objetivo: dividir la responsabilidad entre las partes del código para simplificar su soporte.

¿Cómo funciona MVC? 🔍

Veamos cómo funcionan los componentes principales de MVC con un ejemplo sencillo.

Imagina una aplicación para notas. Te permite crear notas, mostrarlas y eliminarlas.

1. Modelo

El modelo es responsable del almacenamiento y la gestión de los datos. En nuestro ejemplo, esta será una lista de notas:

class NoteModel {
  constructor() {
    this.notes = [];
  }

  addNote(note) {
    this.notes.push(note);
  }

  getNotes() {
    return this.notes;
  }

  deleteNote(index) {
    this.notes.splice(index, 1);
  }
}

Aquí tenemos una clase NoteModel, que permite añadir, eliminar y recibir notas.

2. View (Vista)

La vista es responsable de mostrar los datos al usuario. Por ejemplo, mostrará nuestras notas en la pantalla:

<div id="app">
  <input type="text" id="noteInput" placeholder="Enter a note...">
  <button onclick="addNote()">Добавить заметку</button>
  <ul id="noteList"></ul>
</div>

View suele ser HTML, que muestra los datos y en el que el usuario introduce nuevos datos.

3. Controller (Controlador)

El controlador lo une todo. Acepta la entrada del usuario e interactúa con el Modelo para cambiar los datos o mostrarlos.

const model = new NoteModel();

function addNote() {
  const input = document.getElementById('noteInput');
  const note = input.value;
  if (note) {
    model.addNote(note);
    input.value = '';
    updateView();
  }
}

function updateView() {
  const noteList = document.getElementById('noteList');
  noteList.innerHTML = '';
  model.getNotes().forEach((note, index) => {
    const li = document.createElement('li');
    li.textContent = note;
    li.onclick = () => {
      model.deleteNote(index);
      updateView();
    };
    noteList.appendChild(li);
  });
}

Aquí Controlador gestiona la interacción entre View y Model. Cuando el usuario añade una nota, Controller llama a los métodos del modelo y actualiza la vista.

MVC en marcos 📚

Muchos frameworks populares utilizan la arquitectura MVC. Veamos algunos ejemplos de cómo se implementa MVC en los marcos modernos.

1. Backend: Ruby on Rails

Ruby on Rails es un marco popular para desarrollar la parte del servidor de las aplicaciones web que sigue los principios de MVC.

• Model: En Rails, los modelos suelen estar vinculados a una base de datos y gestionan los datos de la aplicación.

• View: Las vistas son plantillas HTML que muestran datos al usuario.

• Controller: Los controladores reciben solicitudes de los usuarios, las procesan utilizando modelos y devuelven vistas.

Ejemplo de controlador en Ruby on Rails:

class NotesController < ApplicationController
  def index
    @notes = Note.all
  end

  def create
    @note = Note.new(note_params)
    if @note.save
      redirect_to notes_path
    else
      render :new
    end
  end

  private

  def note_params
    params.require(:note).permit(:content)
  end
end

2. Frontend: Angular

Angular es un marco para el desarrollo de la parte del cliente, que también implementa la arquitectura MVC a través de MVVM (Model-View-ViewModel), que es similar a MVC.

• Model: Los datos de la aplicación se almacenan en los servicios o directamente en los componentes.

• View: las plantillas HTML muestran los datos.

• Controller/ViewModel: Los componentes en Angular actúan como controladores, vinculando los datos a la vista.

Ejemplo de un componente en Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-notes',
  template: `
    <div>
      <input [(ngModel)]="note" placeholder="Enter a note...">
      <button (click)="addNote()">Add a note</button>
      <ul>
        <li *ngFor="let note of notes; let i = index" (click)="deleteNote(i)">{{ note }}</li>
      </ul>
    </div>
  `
export class NotesComponent {
  note: string = '';
  notes: string[] = [];

  addNote() {
    if (this.note) {
      this.notes.push(this.note);
      this.note = '';
    }
  }

  deleteNote(index: number) {
    this.notes.splice(index, 1);
  }
}

3. Frontend: React

React es una biblioteca popular para el desarrollo de interfaces de usuario que puede seguir los principios de MVC con la organización correcta del código.

• Model: Los datos se pueden almacenar en el estado de los componentes o en gestores de estado independientes, como Redux.

• View: Los componentes de React son una interfaz de usuario que muestra datos.

• Controller: El controlador puede considerarse la lógica de los componentes que controla el estado y actualiza la vista.

Ejemplo de un componente en React:

import React, { useState } from 'react';

function NotesApp() {
  const [note, setNote] = useState('');
  const [notes, setNotes] = useState([]);

  const addNote = () => {
    if (note) {
      setNotes([...notes, note]);
      setNote('');
    }
  };

  const deleteNote = (index) => {
    setNotes(notes.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input
        type="text"
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="Enter a note..."
      />
      <button onClick={addNote}>Добавить заметку</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index} onClick={() => deleteNote(index)}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default NotesApp;

4. Backend: Laravel (PHP)

Laravel es un framework PHP que también sigue la arquitectura MVC.

• Model: Los modelos en Laravel interactúan con la base de datos y gestionan los datos.

• View: Las vistas (Views) son plantillas Blade que muestran datos al usuario.

• Controller: Los controladores reciben las solicitudes de los usuarios, las procesan y devuelven la vista correspondiente.

Ejemplo de controlador en Laravel:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Note;

class NotesController extends Controller
{
    public function index()
    {
        $notes = Note::all();
        return view('notes.index', compact('notes'));
    }

    public function store(Request $request)
    {
        $request->validate(['content' => 'required']);
        Note::create($request->all());
        return redirect()->route('notes.index');
    }

    public function destroy(Note $note)
    {
        $note->delete();
        return redirect()->route('notes.index');
    }
}

5. Backend: Django (Python)

Django es un framework de Python que utiliza un enfoque MTV (Model-Template-View), similar a MVC.

• Model: Los modelos en Django gestionan los datos y describen la estructura de la base de datos.

• Template (View): Las plantillas son responsables de mostrar los datos al usuario.

• View (Controller): Las vistas aceptan solicitudes del usuario y devuelven la respuesta correspondiente.

Ejemplo de presentación en Django:

from django.shortcuts import render, redirect
from .models import Note

# Ver para mostrar la lista de notas
def notes_list(request):
    notes = Note.objects.all()
    return render(request, 'notes/notes_list.html', {'notes': notes})

# Vista para crear una nueva nota
def add_note(request):
    if request.method == 'POST':
        content = request.POST.get('content')
        if content:
            Note.objects.create(content=content)
        return redirect('notes_list')
    return render(request, 'notes/add_note.html')

# Ver para eliminar la nota
def delete_note(request, note_id):
    note = Note.objects.get(id=note_id)
    note.delete()
    return redirect('notes_list')

Ventajas de usar MVC

• Simplificación del desarrollo: Es fácil trabajar en partes individuales de la aplicación.

• Mayor soporte: Dividir la lógica de la aplicación en partes independientes simplifica la realización de cambios.

• Trabajo paralelo: Varios desarrolladores pueden trabajar simultáneamente en diferentes partes del sistema.

• Reutilización del código: Los componentes del modelo y la vista se pueden utilizar en otras partes de la aplicación, lo que aumenta la eficiencia del desarrollo.

Otros frameworks que utilizan MVC

• ASP.NET MVC: Framework de Microsoft para el desarrollo de aplicaciones web utilizando C#. Distingue claramente entre Modelo, Vista y Controlador, lo que hace que el desarrollo sea transparente y cómodo.

• Django: Un framework de Python que utiliza el enfoque MTV (Model-Template-View), que es similar a MVC. Model en Django gestiona los datos, Template es responsable de la presentación, y View actúa como controlador.

• Laravel: un framework PHP que también sigue la arquitectura MVC. Model gestiona la interacción con la base de datos, View es responsable de la visualización, y Controller procesa las solicitudes de los usuarios.

Conclusión 🎉

MVC es una excelente manera de estructurar el código, hacerlo más limpio y compatible. Con su ayuda, puedes dividir el trabajo en un proyecto entre los desarrolladores y simplificar el soporte en el futuro. En el ejemplo de las notas, vimos lo fácil que es organizar una aplicación dividiéndola en Modelo, Vista y Controlador.

¡Intenta implementar algo simple usando MVC! Esto te ayudará a comprender mejor cómo funciona este patrón. ¡Buena suerte con tus proyectos! 🚀