Cos'è il pattern architetturale MVP?

L'MVP (Model-View-Presenter) è un pattern architetturale per separare la logica di business, i dati e l'interfaccia utente.

Componenti chiave:

• Model: Rappresenta i dati e la logica di business. Non ha conoscenza di View o Presenter.
• View: Visualizza i dati, fornisce l'interfaccia utente e reindirizza le azioni dell'utente al Presenter. Non contiene logica di business. La View è passiva e mostra solo i dati ricevuti dal Presenter.
• Presenter: Agisce come intermediario tra Model e View. Gestisce gli eventi dell'interfaccia utente, estrae i dati dal Model e aggiorna la View. Il Presenter contiene la logica di presentazione, ma non quella di business. Gestisce lo stato della View.

Interazione:

1. L'utente interagisce con la View.
2. La View delega l'azione al Presenter.
3. Il Presenter elabora l'azione:
   • Aggiorna il Model se necessario.
   • Richiede dati dal Model.
   • Aggiorna la View con i nuovi dati.

Vantaggi:

• Migliorabilità dei test (il Presenter e il Model possono essere testati indipendentemente dalla View).
• Separazione delle responsabilità.
• Migliore manutenibilità.

Esempio (schema):

// Modello
class DataModel {
    getData() {
        // ... logica di recupero dati ...
        return { message: "Ciao dal modello!" };
    }
}

// Vista (pseudo-codice UI)
class TextView {
    display(data) {
        // Aggiorna il testo sullo schermo
        console.log(data.message);
    }

    onClickButton(handler) {
        // Attacca il gestore al pulsante
    }
}

// Presenter
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Binding evento
    }

    handleButtonClick() {
        const data = this.model.getData();
        this.view.display(data);
    }
}

// Uso
const model = new DataModel();
const view = new TextView(); // Vista reale UI
const presenter = new Presenter(model, view);