Wprowadzenie do Model-View-Controller (MVC)

W ostatnim artykule omawialiśmy MVVM, dzisiaj pora na kolejny wzorzec projektowy MVC. Model-View-Controller (MVC) to popularny wzorzec projektowy, który jest szeroko stosowany w tworzeniu aplikacji webowych, desktopowych i mobilnych. Jego głównym celem jest oddzielenie logiki aplikacji od jej interfejsu użytkownika, co ułatwia utrzymanie kodu, testowanie oraz rozwój oprogramowania.

Podstawowe komponenty – wzorzec projektowy MVC

MVC składa się z trzech głównych komponentów:

Model

Model odpowiada za logikę biznesową aplikacji i zarządzanie danymi. Przechowuje informacje i zapewnia metody do ich przetwarzania. Może być łączony z bazą danych, zewnętrznymi API lub innymi źródłami danych. Model jest niezależny od interfejsu użytkownika.

Przykład w pseudo-kodzie:

class ProductModel {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    save() {
        // Zapisz produkt do bazy danych
    }
}

View

View (widok) odpowiada za prezentację danych użytkownikowi. Jest to warstwa interfejsu użytkownika, która pobiera dane z Modelu i wyświetla je w odpowiedniej formie. Widok nie powinien zawierać logiki biznesowej.

Przykład w pseudo-kodzie:

<div>
    <h1>Produkt: {{ name }}</h1>
    <p>Cena: {{ price }} PLN</p>
</div>

Controller

Controller (kontroler) jest odpowiedzialny za przetwarzanie żądań użytkownika, koordynację Modelu i Widoku. Odbiera dane od użytkownika, przekazuje je do Modelu i aktualizuje Widok na podstawie wyników.

Przykład w pseudo-kodzie:

class ProductController {
    createProduct(req) {
        const { name, price } = req.body;
        const product = new ProductModel(name, price);
        product.save();
        return {
            message: 'Produkt został utworzony',
            product
        };
    }
}

Zalety MVC

1. Oddzielenie logiki – kod jest bardziej przejrzysty, ponieważ każdy komponent odpowiada za inną funkcjonalność.
2. Łatwe testowanie – możliwość testowania poszczególnych warstw niezależnie.
3. Możliwość wielokrotnego użycia kodu – Model i Widok mogą być wykorzystane w innych aplikacjach.
4. Skalowalność – aplikacje oparte na MVC łatwiej rozwijać i rozbudowywać.

Wady MVC

1. Złożoność – dla prostych projektów MVC może być zbyt skomplikowane.
2. Większa liczba plików – każdy komponent wymaga oddzielnego pliku lub modułu, co może prowadzić do rozbudowanej struktury projektu.

Zastosowanie MVC

MVC jest stosowany w wielu technologiach i frameworkach, takich jak:

• Web: Ruby on Rails, Laravel, Django
• Desktop: JavaFX, .NET Framework
• Mobile: Android (architektura MVC była jednym z popularniejszych podejść)

Przykład w praktyce (Node.js + Express)

Poniżej przykład implementacji prostego systemu opartego na MVC w Node.js z użyciem frameworka Express:

Model

class UserModel {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    save() {
        // Logika zapisu do bazy danych
        console.log(`${this.name} został zapisany.`);
    }
}

Controller

const UserModel = require('./models/UserModel');

class UserController {
    createUser(req, res) {
        const { name, email } = req.body;
        const user = new UserModel(name, email);
        user.save();
        res.json({ message: 'Użytkownik utworzony', user });
    }
}

module.exports = new UserController();

View (Routing w Express)

const express = require('express');
const router = express.Router();
const UserController = require('./controllers/UserController');

router.post('/users', (req, res) => UserController.createUser(req, res));

module.exports = router;

Podsumowanie

Wzorzec projektowy MVC (Model-View-Controller) to potężny wzorzec, który umożliwia tworzenie zorganizowanego i skalowalnego kodu. Choć jego implementacja może być bardziej skomplikowana w porównaniu z prostszymi podejściami, korzyści w postaci przejrzystości i możliwości rozwoju projektu są nieocenione.

Obraz Artur Shamsutdinov z Pixabay