Колись сайти використовували простий HTML і CSS, а для їх створення було достатньо 1-2 розробників. Сьогодні більшість сайтів і застосунків мають складну архітектуру з величезним функціоналом. А над розробкою одночасно можуть працювати сотні фахівців. Щоб полегшити процес, зменшити навантаження і ризики помилок, розробники використовують різні шаблони і патерни організації коду. Одним з таких є Model View Controller.
Що таке патерн MVC
Model View Controller (MVC) – це шаблон архітектури застосунку, який розділяє весь код на зручні взаємопов’язані 3 частини:
- Модель – відповідає за логіку, дані та правила застосунку.
- Вигляд – відповідає за надання інформації користувачеві.
- Контролер – є сполучною ланкою між Model та View.
Шаблон проектування MVC спочатку був розроблений для контролю та управління великими масивами даних. Довгий час був призначений тільки для настільних комп’ютерів. Але завдяки можливості масштабування став одним з найпопулярніших шаблонів і почав активно використовуватися для мобільної розробки.
Особливості MVC
Патерн Model View Controller має такі особливості:
- Завдяки тому, що код поділений на окремі зручні блоки, його можна змінювати незалежно один від одного. Тобто, дизайн можна змінити без зміни логіки застосунку.
- Модель MVC дозволяє вносити ітераційні правки в окремі частини коду без ризику вплинути на інші частини. Це знижує ймовірність помилок і спрощує процес тестування.
- MVC дає повний контроль над HTML і URL-адресами, тому проектування архітектури стає простішим.
- Ця модель архітектури дозволяє легко додавати нові функції. А зміни можна відразу бачити практично в реальному часі.
- Підтримка декількох інтерфейсів дає можливість використовувати один Model для різних видів представлення. Наприклад, не потрібно змінювати логіку роботи на ПК, мобільному або веб, змінюється тільки View.
Саме тому патерн MVC є одним з найбільш популярних і поширених в розробці.
Що таке шаблон MVC простими словами
Розглянемо на прикладі телевізора роботу MVC. Model – це внутрішня частина телевізора, його програми. Ми не бачимо, що всередині, але воно є і працює. Для нас, як для користувачів, важливіше зображення, а це View. Але її якість, або сам контент залежать від Model, тому що саме там відбуваються всі процеси. Ми ж обираємо, дивитися фільм, передачу або мультик.
Але як ми будемо це обирати? Через Controller, це наш «пульт». Сам по собі він не є незалежним компонентом. Його завдання – бути передавачем між екраном і «залізом» всередині.
Модель архітектури MVC дозволяє з кожною частиною працювати окремо. Якщо пульт перестав працювати, потрібно замінити батарейки, а не весь екран. Якщо нам не подобається передача, можна зробити запит на Model через наш пульт і перемкнути картинку.
Компоненти MVC
Model View Controller складається із 3 блоків:
- Model – відповідає за логіку і роботу з даними. Цю частину не бачить користувач, але саме тут відбувається вся «магія», зберігаються дані і відбуваються операції CRUD.
- View – в цій частині весь код, який відповідає за користувальницький інтерфейс. Те, що бачить користувач і як взаємодіє з даними. Тут знаходиться код, який відповідає за кнопочки, їх колір, форму, інші елементи інтерфейсу.
- Controller – сполучна ланка між Model і View. Як пульт від телевізора. Він не створює зображення на екрані (View), а всього лише говорить телевізору, що саме потрібно зробити.
MVC дозволяє організувати код в акуратні блоки. Завдяки цьому з ним легко працювати, змінювати, масштабувати і проводити тести.
YouTube
Як працює патерн MVC на прикладі
Щоб зрозуміти, як відбувається робота MVC, давайте розглянемо на прикладі створення застосунку для замовлення піци.
Model
Тут зберігаються дані про кожну позицію в нашому застосунку. Як називається піца, що в неї входить і в якій кількості, її ціна. Також тут зберігаються дані про запит користувача. Клієнт захотів 2 піци, додав або прибрав компоненти, сформував своє замовлення. Все це знаходиться в частині Model.
View
Щоб користувач замовив свої 2 піци, він повинен десь дізнатися про них та обрати. Для цього у нього є сайт/застосунок, де він бачить меню, склад, зображення піци, її розмір і вартість. Там же він може додати оливки, прибрати гриби або до піци взяти ще напій. Все це відбувається в частині View.
Controller
І ось, наш клієнт готовий зробити замовлення. Натискає кнопку «Додати в кошик». Контролер повідомляє Моделі, що клієнт обрав 2 піци, що потрібно прибрати гриби і додати оливки, а також додати до замовлення напій. У Model формується замовлення, тому що Controller так повідомив. Запускається процес оформлення замовлення.
