Wat is het MVP-architectuurpatroon?

MVP (Model-View-Presenter) is een architectuurpatroon voor het scheiden van bedrijfslogica, gegevens en gebruikersinterface.

Belangrijke componenten:

• Model: Vertegenwoordigt gegevens en bedrijfslogica. Heeft geen kennis van View of Presenter.
• View: Toont gegevens, biedt de gebruikersinterface en leidt gebruikersacties door naar de Presenter. Bevat geen bedrijfslogica. De View is passief en toont alleen de gegevens die door de Presenter worden ontvangen.
• Presenter: Functioneert als tussenpersoon tussen Model en View. Verwerkt gebeurtenissen van de gebruikersinterface, haalt gegevens uit het Model en werkt de View bij. De Presenter bevat de presentatie-logica, maar geen bedrijfslogica. Beheert de toestand van de View.

Interactie:

1. De gebruiker interacteert met de View.
2. De View delegeert de actie aan de Presenter.
3. De Presenter verwerkt de actie:
   • Actualiseert indien nodig het Model.
   • Vraagt gegevens op bij het Model.
   • Actualiseert de View met de nieuwe gegevens.

Voordelen:

• Verbeterde testbaarheid (de Presenter en het Model kunnen onafhankelijk van de View worden getest).
• Verdeling van verantwoordelijkheden.
• Betere onderhoudbaarheid.

Voorbeeld (schema):

// Model
class DataModel {
    getData() {
        // ... logica voor gegevensophaling ...
        return { message: "Hallo vanuit het model!" };
    }
}

// View (pseudo-code UI)
class TextView {
    display(data) {
        // Tekst op scherm bijwerken
        console.log(data.message);
    }

    onClickButton(handler) {
        // Handler aan knop koppelen
    }
}

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

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

// Gebruik
const model = new DataModel();
const view = new TextView(); // Reële UI
const presenter = new Presenter(model, view);