V tomto článku si popíšeme návrhový vzor MVC (označovaný aj ako Model-View-Controller), ktorý rozdeľuje aplikáciu do 3 logických častí, ktoré medzi sebou komunikujú.
Na začiatok si povieme niečo jemne o histórii, motivácii vzniku a neskôr si vysvetlíme každú logickú časť tohto návrhového vzoru samostatne, a ako by to malo byť aj zvykom, reálne využitie v praxi.
História MVC
Za týmto návrhovým vzorom stojí pán s menom Trygve Reenskaug (celým menom Trygve Mikkjel Heyerdahl Reenskaug), ktorý je emeritný profesor na univerzite v Osle.
MVC uviedol v 70tych rokoch do programovacieho jazyka Smalltalk-79 počas toho ako navštívil Xerox PARC (Palo Alto Research Center).
Z MVC modifikáciami neskôr vznikli aj ďalšie samostatné návrhové vzory ako MVVM (model-view-viewmodel), MVA (model-view-adapter), MVP (model-view-presenter) [1].
Prečo potrebujeme MVC?
Je dobré rozdeľovať náš kód do 3 logických komponentov? Nebolo by to jednoduchšie implementovať spolu?
Predstavme si, že pracujeme v tíme programátorov na aplikácii pre videokonferencie s cieľom získať čo najväčší počet používateľov.
Ak by sme sa takúto aplikáciu rozhodli implementovať spôsobom “všetko implementujme spolu a kašlime na rozdelenie aplikácie do logických častí”, tak by sme počas vývoja veľmi rýchlo narazili na nasledujúci problém.
Používateľské rozhranie by bolo prepojené s biznis logikou a dátami, čo by viedlo k niečomu čo nazývame špagetový kód, ako aj k závislostiam zdanlivo samostatných častí softvéru.
To by spôsobilo problém, že ak by sme sa rozhodli modifikovať používateľské rozhranie, znamenalo by to zmenu v kóde aj pre biznis logiku.
Rovnako by bolo skoro nemožné rozdeliť biznis logiku, dátový model a používateľské rozhranie určitej funkcionality ako samostatné úlohy pre tím programátorov.
Toto je len úryvok problémov, ktoré MVC rieši.
Ako MVC vyzerá a čo je úlohou každého komponentu?
Ako sme si už na začiatku spomenuli, MVC rozdeľuje logiku aplikácie do 3 častí: Model, View a Controller. Vizualizáciu týchto častí a komunikáciu medzi nimi môžeme vidieť na nasledujúcom obrázku:
MVC vysvetlené za 4 minúty
Model
Model sa stará o reprezentáciu a manipuláciu s dátami v aplikácií.
Častokrát naša aplikácia pracuje s perzistentnými dátami (také, ktoré sa uchovávajú aj po vypnutí aplikácie používateľom), ktoré sa ukladajú v databázovom systéme (PostgreSQL, MySQL, MariaDB, MongoDB...).
Preto patrí medzi jednu z úloh Modelu komunikácia s databázovým systém.
Ako príklad si uvedieme aktualizovanie záznamu v databáze.
Model musí vedieť odoslať informáciu databázovému systému o aktualizovaní konkrétneho záznamu a rovnako musí byť schopný prijať informáciu od databázového systému o úspešnom aktualizovaní.
Ďalšou úlohou Modelu je komunikácia s Controllerom.
View
Úlohou View je vizuálna reprezentácia dát aplikácie jej používateľom (jednoduchšie povedané ide o používateľské rozhranie).
Z príkladu aplikácie pre videokonferencie by mohlo ísť o zobrazenie počtu ľudí prihlásených do videokonferencie, možnosť zobraziť si ich profil, možnosť vytvoriť nové stretnutie, aktualizovať existujúce stretnutie a podobne.
View musí byť schopné posielať informácie o požiadavkách používateľa pre Controller a rovnako aj prijímať informácie od Controllera.
Controller
Controller zabezpečuje biznis logiku aplikácie a rovnako zabezpečuje komunikáciu medzi View a Modelom.
Ak sa používateľ aplikácie rozhodne vytvoriť novú videokonferenciu View túto informáciu (vstup od používateľa) odovzdá Controlleru a Controller ďalej modelu, ktorý sa už postará o vytvorenie nového záznamu pre videokonferenciu.
Model následne pošle informáciu Controlleru o úspešnom/neúspešnom vytvorení videokonferencie a Controller naspäť View, ktorý zobrazí požadovaný výstup pre používateľa (zobrazenie hlášky o úspešnom/neúspešnom vytvorení videokonferencie).
Kde sa viem s MVC stretnúť v praxi a aké má výhody/nevýhody?
MVC má svoje využitie pri tvorbe webových, mobilných a desktopových aplikácií.
Ako príklad technológií, ktoré pracujú s MVC architektúrou si môžeme uviesť:
- Laravel
- Spring
- ASP.NET
Výhody
- Ponúka rozdelenie aplikácie do logických celkov, čím predchádzame špagetovému kódu
- Urýchľuje proces vývoja (jeden tím programátorov môže začať pracovať na používateľskom rozhraní, zatiaľ čo druhý môže implementovať biznis logiku aplikácie)
- Zmena používateľského rozhrania si nevyžaduje zmenu iných častí aplikácie
- Dáta z jedného modelu môžu byť použité vo viacerých View
Nevýhody
- Častokrát nutná znalosť viacerých technológií [2] (napr. v prípade Laravel aplikácií znalosť PHP a JavaScriptu (Vue, React, Angular...)
- Komplexnosť aplikácie (prinášame určitý level abstrakcie) [2] ?!
Ukážka
V tejto časti článku si predstavíme reálny kód, reálnej aplikácie. O akú aplikáciu ide? Predsa o portál Informatika ku káve.
Ak ťa zaujíma viac o procese vývoja tohto portálu, nezabudni si prečítať aj článok “Ako som nakódil Informatiku ku káve”.
Ukážka implementácia bude odkazovať na proces vytvorenia článku používateľom.
Model
Článok reprezentuje Model s názvom Article, ktorý pomocou ORM patrí k databázovej tabuľke articles.
Ako z tejto ukážky môžeme vidieť, Model Article má atribúty ako title, perex, author, created at … (ide o rovnaké atribúty ako má aj databázová tabuľka articles)
View
O používateľské rozhranie článku sa stará blade súbor a Vue component new-article.
ArticlesController po prijatí HTTP POST požiadavky na vytvorenie článku túto požiadavku spracuje v metóde store, ktorá najprv zvaliduje dáta (v prípade, že dáta nie sú vo validnom formáte vráti HTTP kód 422) a následne z dát v požiadavke vytvára pomocou zavolania create metódy na triede Modelu nový záznam v databáze.
Ak je záznam úspešne vytvorený, používateľa Controller presmeruje na podstránku s poďakovaním.
V tomto článku sme si predstavili návrhový vzor MVC, jeho históriu, technológie, ktoré MVC využívajú, ako aj implementáciu v reálnom projekte.