Paradygmat MVC Model-View-Controller

Paradygmat MVC (Model-View-Controller) to najpowszechniej stosowany obecnie paradygmat programowania (sposób organizacji kodu) w świecie aplikacji internetowych. Frontend Development dawno już wyszedł poza pisanie HTML i CSS z dodatkiem kilku prostych skryptów. Aplikacje, które kiedyś powstawały jako aplikacje desktopowe, teraz z powodzeniem tworzone są w technologiach webowych. Dzięki temu możliwe jest uruchamianie ich na wszystkich platformach, na których jest zainstalowana przeglądarka internetowa. Aplikacje są na tyle duże, że bez zastosowania zaawansowanych narzędzi implementujących wzorce projektowe, łatwo wytworzyć aplikacje, które będą działać błędnie, będą mało czytelne, nietestowalne i trudne w rozwoju. Czym zatem jest paradygmat MVC?

Paradygmat MVC Model-View-Controller – Co to jest MVC?

Paradygmat MVC jest uznawany przez wielu developerów jako bardzo użyteczne podejście przy wytarzaniu aplikacji z interfejsem użytkownika, a takie właśnie są aplikacje internetowe. Na czym polega podział aplikacji na warstwy: Model, View i Controller?

Uproszczoną zasadę organizacji kodu MVC ilustruje poniższy diagram:

Paradygmat MVC – Model

Model reprezentuje warstwę struktury danych, najczęściej obiekt lub tablice obiektów. w ogóle nie definiuje wyglądu interfejsu użytkownika.

Przykładowy model (persons.ts) – tablica obietków z informacjami o osobach:

export const PERSONS = [{
  id: 1,
  name: 'Jan',
  age: 23
},
  id: 2,
  name: 'Stanisław',
 age: 19
]

Zawiera czyste informacje o osobach, żadnych dodatkowych informacji o sposobie ich wyświetlania.

Paradygmat MVC – View

Widok (ang. View) reprezentuje warstwą interfejsu użytkownika. Wszystko to co widzi użytkownik i bezpośrednio może wchodzić w interakcję (listy, formularze, przyciski, popupy itd.). w przypadku aplikacji internetowych jest to HTML, CSS i obsługa eventów interfejsu użytkownika. w przypadku frameworków MVC dla Frontend Developerów HTML jest wzbogacony o dodatkowe mechanizmy dzięki silnikom templatek (ang. Template Engines).

Przykładów widok (list.html) w frameworku MVC Angular4 – lista ul, każdy element listy będzie wyświetlać informację o innej osobie:

<ul>
  <li *ngFor="let employee of employees;">
    <strong>{{employee.name}}</strong> - wiek: {{employee.age}}
  </li>
</ul>

Zawiera informacje jak dane, które zostaną przekazane do tego widoku zostaną wyświetlone, ale konkretnych danych w widoku nie ma.

Paradygmat MVC – Controller

Controllery to klasy które łączą modele i widoki. w uproszczeniu, tu definiuje się metody odpowiedzialne obsługę widoków np. callbacki eventów, pobiera się dane (model), przekazuje do widoku i w razie potrzeby z powrotem zapisuje zmodyfikowane dane (aktualizacja modelu).

Przykładowy bardzo prosty controller. Kontroler ładuje potrzebne dane (model – tablica PERSONS) i przypisuje je pod zmienną employees, które następnie wyświetli widok dzięki pętli *ngFor:

import { PERSONS } from './persons';

@Component({
  …
  templateUrl: './list.html',
  styleUrls: ['./list.css']
})
export class ListComponent {
  employees = PERSONS;
}

Jeśli chcesz pisać aplikacje internetowe zachęcam do nauczenia się jakiegoś popularnego i porządanego na rynku pracy frameworka MVC. Takim frameworkiem może być Angular. Jednak trochę prostsza do nauki może się okazać, mniej popularna Aurelia, ale wybór jest znacznie większy.