Что такое MVC паттерн для программирования динамических веб-приложений

Что такое MVC паттерн для программирования динамических веб-приложений

  • 14 ноября, 2023
  • читать 15 мин
Владимир Шайтан
Владимир Шайтан Technical Lead в Zoot, Преподаватель Компьютерной школы Hillel.

Все больше веб-разработчиков понимают важность использования структурированных и модульных подходов к разработке Front-end.

Один из таких подходов — это паттерн Модель-Вид-Контроллер (MVC). Эта архитектурная концепция позволяет разбить ваше приложение на логические компоненты и эффективно управлять данными, их отображением и логикой пользователя. В статьте мы как раз и рассмотрим паттерны проектирования mvc. 

MVC (Model-View-Controller) — это архитектурный шаблон для разработки программного обеспечения, который помогает разделить приложение на три основные части.

Давайте детально рассмотрим, из чего состоит концепция mvc. 

Модель (Model)

Модель отвечает за обработку данных и бизнес-логику приложения. Она хранит информацию и определяет, как эта информация обрабатывается и изменяется.

Вид (View)

Вид отвечает за отображение данных пользователю. Он представляет информацию из Модели в удобном для пользователя виде.

Контроллер (Controller)

Контроллер взаимодействует с пользователем и отправляет команды к Модели и Виду. Он контролирует поток информации между Моделью и Видом и реагирует на действия пользователя.

MVC превращает сложную разработку приложений в гораздо более управляемый процесс. Он позволяет нескольким разработчикам работать над каждым аспектом приложения отдельно.

Сегодня паттерн MVC используется для современных веб-приложений, поскольку он позволяет приложению быть масштабируемым, поддерживаемым и легко расширяемым.

Почему стоит использовать MVC?

Разделение задач (separation of concerns), или SoC

В архитектуре MVC каждый из компонентов имеет свою четко определенную область ответственности и помогает разделить код Front-end и Back-end на отдельные компоненты.

  • Модель сосредоточена на логике и обработке данных. Она хранит информацию и определяет, как эта информация должна взаимодействовать с программой.
  • Вид отвечает за отображение данных пользователю. Это включает в себя графический интерфейс, веб-страницы или другие способы представления информации пользователю.
  • Контроллер взаимодействует с пользователем и определяет, какие действия выполнять на основе взаимодействия пользователя с Видом. Он также отвечает за маршрутизацию и обработку запросов.

Модульность

Использование MVC способствует созданию более модульного кода, что делает его более гибким и легким для расширения.

Большая читабельность и поддержка

Отделение логики в Модель и отображение в Вид помогает поддерживать код более понятным и читабельным.

Повторное использование кода

Из-за разделения логики и отображения, вы можете легко использовать одну Модель с разными Видами или наоборот, что способствует повторному использованию кода.

Тестирование

Вы можете легко проводить тестирование отдельных компонентов, поскольку Модель, Вид и Контроллер можно тестировать независимо друг от друга.

Поддержка одновременной разработки

Разные разработчики могут работать над разными компонентами одновременно, не вмешиваясь в работу друг друга.

Пользовательские интерфейсы

MVC особенно полезен для веб-приложений и мобильных приложений, поскольку позволяет легко управлять тем, как данные отображаются перед пользователем.

Как использовать MVC?

  • Контроллер должен обрабатывать входные события и действия пользователя и направлять их в соответствующие методы Модели для обработки данных и в Вид для обновления пользовательского интерфейса.
  • Модель должна предоставлять методы для сохранения, обновления, удаления и получения данных, а также для выполнения логики.
  • Вид должен отслеживать изменения в Модели и отображать их в интерфейсе пользователя. Он также должен отправлять сообщения Контроллеру о действиях пользователя.
<script>


        // Модель - список завдань (початкові дані)
        const tasks = [];

        // Вигляд - оновлення списку завдань на сторінці


        function updateView() {


            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';


            for (let i = 0; i < tasks.length; i++) {


                const taskItem = document.createElement('li');
                taskItem.textContent = tasks[i];
                taskList.appendChild(taskItem);


            }
        }

        // Контролер - додавання нового завдання


        document.getElementById('addTask').addEventListener('click', function() {


            const taskInput = document.getElementById('taskInput');
            const newTask = taskInput.value.trim();


            if (newTask) {


                tasks.push(newTask);
                taskInput.value = '';
                updateView();


            }
        });


        // Початкове оновлення Вигляда
        updateView();


    </script>

Фреймворки MVC

Существует множество фреймворков, которые специализируются на реализации архитектурного шаблона MVC и помогают упростить разработку веб-приложений.

Вот некоторые из самых популярных фреймворков с поддержкой MVC:

  • Ruby on Rails — это фреймворк для разработки веб-приложений на языке программирования Ruby. Rails имеет встроенную поддержку MVC и помогает разработчикам создавать приложения быстро и эффективно.
  • Django — это фреймворк для разработки веб-приложений на языке программирования Python. Django также имеет встроенный шаблон MVC (или, точнее, шаблон Model-View-Template) и предоставляет разработчикам мощные средства для создания веб-приложений.

Рекомендуем публикацию по теме

  • Laravel — это фреймворк для разработки веб-приложений на языке программирования PHP. Он имеет встроенную поддержку MVC и предоставляет инструменты для реализации бизнес-логики и внешнего вида.

  • Spring MVC — это фреймворк для разработки веб-приложений на языке программирования Java. Spring MVC помогает создавать веб-приложения с использованием паттерна Model-View-Controller и предоставляет широкий набор инструментов для работы с веб-технологиями.

Рекомендуем публикацию по теме

  • Express.js — это фреймворк для разработки веб-приложений на JavaScript с использованием платформы Node.js. Он помогает создавать серверную часть приложений с использованием шаблона MVC и использовать JavaScript на обеих сторонах - клиентской и серверной.

  • AngularJS — это фреймворк для создания клиентской части веб-приложений на JavaScript. Он реализует шаблон MVC на стороне клиента и предоставляет различные инструменты для разработки веб-интерфейсов.

  • React — это библиотека для создания интерфейсов на JavaScript. Хотя React сам по себе не является фреймворком MVC, его можно использовать вместе с другими библиотеками и фреймворками (например, Redux) для реализации шаблона MVC на стороне клиента.

Рекомендуем курс по теме

Эти фреймворки и библиотеки предоставляют различные возможности и инструменты для разработки веб-приложений с использованием архитектурного шаблона MVC. Выбор конкретного фреймворка зависит от языка программирования, потребностей проекта и личных предпочтений разработчика.

Использование паттерна разработки MVC — это не только эффективный способ разрабатывать программные продукты, но и ценный ресурс для обучения других людей в сфере программирования.

Этот паттерн помогает структурировать код, делает его более понятным и подходящим для совместной работы, а также способствует модульности, тестированию, поддержке и рефакторингу.

Таким образом, использование MVC улучшает разработку приложений и облегчает обучение программированию, помогая новичкам и профессионалам понять и улучшить свои навыки разработки.

MVC в React

В React существует вариант реализации паттерна MVC, который называется MV* (где * может быть чем-то другим в зависимости от подхода, например, MVVM или Flux).

React обычно используется совместно с библиотеками и пакетами для лучшего управления состоянием и логикой приложения.

Вот пример, как можно структурировать React-приложение в виде MV*:

Модель (Model)

Модель в React может быть представлена данными и логикой, которые используются в приложении. Вы можете использовать стейт (state) и контекст (context) для хранения и управления данными.

import { useState } from 'react';

function AppModel() {

const [data, setData] = useState(initialData);

function updateData(newData) {

setData(newData);

}

return { data, updateData };

}

Вид (View)

View в React отвечает за отображение данных и пользовательский интерфейс. Это включает в себя компоненты React, которые отображают информацию на странице.

import React from 'react';

function AppView({ data, updateData }) {

  return (
    <div>
      <h1>My React App</h1>
      <p>Data: {data}</p>
      <button onClick={() => updateData('New Data')}>Update Data</button>
    </div>
  );
}

Контроллер (Controller)

В React логика контроллера обычно располагается в компонентах.

Например, обработка событий и взаимодействие с моделью могут быть реализованы в компонентах, которые содержат обработчики событий и функции для обновления модели.

import React from 'react';
import { AppModel } from './AppModel';

function AppController() {
  const model = AppModel();

  function handleUpdateData(newData) {
    model.updateData(newData);
  }

  return <AppView data={model.data} updateData={handleUpdateData} />;
}

Этот пример демонстрирует реализацию простого паттерна MVC в React.

Модель использует useState для хранения данных, Вид отвечает за отображение этих данных, а Контроллер обрабатывает события и обновляет Модель. Однако в более сложных приложениях может потребоваться использование дополнительных библиотек для лучшего управления состоянием, таких как Redux или Mobx.

MVC в Vue

Vue.js использует подход на основе компонентов, который больше всего напоминает паттерн «Модель-Вид-Контроллер» (Model-View-Controller, MVC), где компоненты Vue являются основной единицей для создания и управления интерфейсом пользователя и логикой приложения.

Основные концепции Vue.js, которые соответствуют элементам паттерна Модель-Вид-Контроллер:

Модель (Model)

В Vue.js модель отвечает за данные и логику приложения. Данные могут быть определены в компоненте как реактивные свойства (обычно используются ref или reactive), и ими можно манипулировать с помощью методов и обработчиков событий.

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

function decrement() {
  count.value--;
}
</script>

Вид (View)

Вид в Vue.js включает в себя шаблон компонента, который отображает данные и пользовательский интерфейс. С помощью директив и реактивных свойств, вы можете легко связать данные с шаблоном и создавать пользовательские интерфейсы.

<template>
  <div>
    <h1>Vue 3 MVController</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

Контроллер (Controller)

В Vue.js логика Контроллера встроена в компоненты. Методы и обработчики событий компонента отвечают за обработку действий пользователя и манипуляцию Моделью. Компоненты, которые содержат данные и методы, выполняют роль Контроллера.

<script setup>
import { defineProps } from 'vue';

const { count, increment, decrement } = defineProps(['count', 'increment', 'decrement']);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

В этом примере компонент выполняет роль Контроллера, отвечая за обработку событий пользователя и обновление Модели. Он получает данные и методы из родительского компонента.

Общей концепцией Vue.js является разделение функциональности на компоненты, которые вбирают в себя Модель, Вид и Контроллер, делая разработку и поддержку приложений более приятной и простой.

MVC в Angular

Во фреймворке Angular тоже существует поддержка паттерна «Модель-Вид-Контроллер» (MVC), но Angular использует другой терминологический подход для организации кода и архитектуры приложения. Angular использует концепцию компонентов для создания приложений.

Основные концепции в контексте Angular включают:

Модель (Model)

В Angular Модель представляет собой данные, которые используются в приложении. Эти данные могут быть сохранены в переменных или сервисах. Модели могут включать классы данных, интерфейсы, и сервисы, которые получают и обновляют данные.

Пример сервиса Angular, который представляет Модель:

import { Injectable } from '@angular/core';

   @Injectable()
   export class MyModelService {
     private data: string = 'Initial Data';

     getData(): string {
       return this.data;
     }

     updateData(newData: string): void {
       this.data = newData;
     }
   }

Вид (View)

В Angular View отвечает за отображение данных и интерфейс пользователя. В Angular вы используете шаблоны для создания представления, и эти шаблоны могут быть связаны с данными из Модели с помощью двунаправленной связи.

import { Component } from '@angular/core';
   import { MyModelService } from './my-model.service';

   @Component({
     selector: 'my-app',
     template: `
       <h1>My Angular App</h1>
       <p>Data: {{ data }}</p>
       <button (click)="updateData('New Data')">Update Data</button>
     `
   })
   export class AppComponent {
     data: string;

     constructor(private modelService: MyModelService) {
       this.data = modelService.getData();
     }

     updateData(newData: string): void {
       this.modelService.updateData(newData);
       this.data = newData;
     }
   }

Контроллер (Controller)

В Angular Контроллеры обычно представлены компонентами. Компонент включает в себя логику обработки событий, манипулирования моделью и отображения данных. Angular расширяет функциональность компонентов, позволяя определять hooks жизненного цикла и обработчики событий.

Компонент в Angular выполняет роль контроллера, поскольку у него есть методы для обновления модели и пользовательского интерфейса.

В итоге, хотя Angular не использует терминологию «MVC», он предлагает архитектурный подход, который позволяет эффективно разделять логику Модели, Вида и Контроллера для создания хорошо структурированных приложений.