Šta je arhitektonski obrazac MVC?

MVC (Model-View-Controller) je arhitektonski obrazac koji deli aplikaciju na tri međusobno povezane komponente radi poboljšanja organizacije koda i olakšavanja razvoja i održavanja:

• Model (Model): Predstavlja podatke i poslovnu logiku. Odgovoran je za dobijanje, skladištenje i obradu podataka, kao i za pravila koja upravljaju tim podacima. Nema direktan prikaz korisničkog interfejsa.
• View (Prikaz): Odgovoran je za prikazivanje podataka korisniku. Dobija podatke iz Modela i vizualizuje ih. Ne sadrži poslovnu logiku i ne interaguje direktno sa podacima, osim za njihovo prikazivanje.
• Controller (Kontroler): Deluje kao posrednik između Modela i Prikaza. Obradjuje interakcije sa korisnikom (npr. klikove, unos podataka), dobija podatke iz Modela, prenosi ih u Prikaz za prikaz i ažurira Model pri promenama podataka iniciranim od strane korisnika.

Glavni odnosi:

• Korisnik interaguje sa Prikazom.
• Prikaz prenosi akcije korisnika Kontroleru.
• Kontroler obrađuje akcije korisnika, interagujući sa Modelom (zahteva podatke ili ih ažurira).
• Model obaveštava Kontroler (ili direktno Prikaz, u nekim varijantama obrasca) o promenama podataka.
• Kontroler ažurira Prikaz na osnovu promena u Modelu (ili se Prikaz samostalno ažurira pri direktnoj interakciji sa Modelom).

Prednosti:

• Razdvajanje odgovornosti (Separation of Concerns): Olakšava razvoj, testiranje i održavanje pojedinačnih komponenti.
• Ponovna upotreba koda: Model i Kontroler mogu biti korišćeni sa različitim Prikazima.
• Olakšano testiranje: Komponente mogu biti testirane nezavisno.
• Paralelni razvoj: Različiti timovi mogu raditi na različitim delovima (Model, Prikaz, Kontroler) istovremeno.

Nedostaci:

• Povećana složenost: Za manje aplikacije može biti suvišno.
• "Fat Controller" problem: Kontroler može postati prevelik i složen ako se ne poštuju principi razdvajanja.
• Teškoće u definisanju granica: Ponekad je teško jasno odrediti gde se završava jedan komponenta i počinje druga.

Primer (shema):

// Model (npr. klasa za rad sa podacima)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Obaveštenje o promeni (u pravim aplikacijama - putem događaja)
  }
}

// Prikaz (npr. funkcija za prikaz liste)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Kontroler (za obradu događaja i koordinaciju)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Inicijalno ažuriranje prikaza
    this.updateView();

    // Obrada događaja (npr. klik na dugme)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('Unesite ime korisnika:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Ažuriranje prikaza nakon promene modela
      }
    });
  }

  updateView() {
    const users = this.model.getUsers();
    this.view(users);
  }
}

// Upotreba
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Ovo je pojednostavljeni primer koji demonstrira osnovni princip. U pravim okvirima (kao Angular, React, Vue) koriste se naprednije varijacije ovog i drugih arhitektonskih obrazaca.