Modèle architectural MVC

Si vous avez déjà entendu parler de modèles architecturaux en programmation, vous avez probablement entendu parler de MVC. 😎 Mais qu'est-ce que c'est et pourquoi en a-t-on besoin ? Voyons cela ensemble, et je vais essayer de le rendre aussi simple et clair que possible.

/

Qu'est-ce que MVC ? 🤔

MVC signifie Model-View-Controller (Modèle-Présentation-Contrôleur). Il s'agit d'un modèle architectural qui aide à organiser votre code de manière à le rendre plus facile à développer et à maintenir.

MVC divise l'application en trois composants principaux :

• Model (Modèle) — stocke les données et la logique de travail avec elles.

• View (Vue) — est responsable de l'affichage des données à l'utilisateur.

• Controller (Contrôleur) — relie le modèle et la vue, gère les actions de l'utilisateur et détermine les données à envoyer à la vue.

  

Pourquoi avez-vous besoin de MVC ? 🤓

L'objectif principal de MVC est de rendre le code compréhensible et de partager les responsabilités. Par exemple, si vous devez modifier la logique de travail avec les données, les modifications sont apportées à Model, et le code responsable de l'affichage à l'écran (View), reste intact. Cela simplifie le développement et rend le code plus lisible et maintenable.

MVC est souvent utilisé dans le développement Web pour séparer l'interface utilisateur de la logique métier. Cette séparation permet à plusieurs développeurs de travailler en parallèle sur un même système : quelqu'un s'occupe de l'interface, quelqu'un de la logique de travail avec les données.

Analogues de MVC

En plus de MVC, il existe d'autres modèles architecturaux, tels que :

• MVP (Model-View-Presenter): Semblable à MVC, mais le contrôleur est remplacé Presenter — il fonctionne plus étroitement avec View.

• MVVM (Model-View-ViewModel): Un modèle souvent utilisé dans les applications de bureau et mobiles, en particulier avec des frameworks tels que Angular ou Vue.

Tous ces modèles ont un seul objectif : partager les responsabilités entre les parties du code afin de simplifier sa prise en charge.

Comment fonctionne MVC ? 🔍

Voyons comment fonctionnent les principaux composants MVC à l'aide d'un exemple simple.

Imaginez une application de prise de notes. Elle vous permet de créer des notes, de les afficher et de les supprimer.

1. Model (Modèle)

Le modèle est responsable du stockage et de la gestion des données. Dans notre exemple, ce sera une liste de notes :

class NoteModel {
  constructor() {
    this.notes = [];
  }

  addNote(note) {
    this.notes.push(note);
  }

  getNotes() {
    return this.notes;
  }

  deleteNote(index) {
    this.notes.splice(index, 1);
  }
}

Ici, nous avons une classe NoteModelqui vous permet d'ajouter, de supprimer et de recevoir des notes.

2. View (Vue)

La présentation est responsable de l'affichage des données à l'utilisateur. Par exemple, elle affichera nos notes à l'écran :

<div id="app">
  <input type="text" id="noteInput" placeholder="Enter a note...">
  <button onclick="addNote()">Добавить заметку</button>
  <ul id="noteList"></ul>
</div>

View est généralement un fichier HTML qui affiche des données et dans lequel l'utilisateur entre de nouvelles données.

3. Controller (Contrôleur)

Le contrôleur relie tout ensemble. Il accepte les entrées de l'utilisateur et interagit avec le modèle pour modifier ou afficher les données.

const model = new NoteModel();

function addNote() {
  const input = document.getElementById('noteInput');
  const note = input.value;
  if (note) {
    model.addNote(note);
    input.value = '';
    updateView();
  }
}

function updateView() {
  const noteList = document.getElementById('noteList');
  noteList.innerHTML = '';
  model.getNotes().forEach((note, index) => {
    const li = document.createElement('li');
    li.textContent = note;
    li.onclick = () => {
      model.deleteNote(index);
      updateView();
    };
    noteList.appendChild(li);
  });
}

Ici Contrôleur gère l'interaction entre View et Model. Lorsque l'utilisateur ajoute une note, Controller appelle les méthodes du modèle et met à jour la vue.

MVC dans les frameworks 📚

De nombreux frameworks populaires utilisent l'architecture MVC. Examinons quelques exemples de la façon dont MVC est implémenté dans les frameworks modernes.

1. Backend: Ruby on Rails

Ruby on Rails est un framework populaire pour le développement de la partie serveur des applications Web, qui suit les principes MVC.

• Model: Dans Rails, les modèles sont généralement liés à la base de données et gèrent les données de l'application.

• View: Les vues sont des modèles HTML qui affichent des données à l'utilisateur.

• Controller: Les contrôleurs reçoivent les demandes des utilisateurs, les traitent à l'aide de modèles et renvoient des vues.

Exemple de contrôleur dans Ruby on Rails :

class NotesController < ApplicationController
  def index
    @notes = Note.all
  end

  def create
    @note = Note.new(note_params)
    if @note.save
      redirect_to notes_path
    else
      render :new
    end
  end

  private

  def note_params
    params.require(:note).permit(:content)
  end
end

2. Frontend: Angular

Angular est un framework de développement côté client qui implémente également l'architecture MVC via MVVM (Model-View-ViewModel), qui est similaire à MVC.

• Model: les données de l'application sont stockées dans les services ou directement dans les composants.

• View: les modèles HTML affichent les données.

• Controller/ViewModel: Les composants dans Angular jouent le rôle de contrôleurs, liant les données à la vue.

Exemple de composant dans Angular :

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

@Component({
  selector: 'app-notes',
  template: `
    <div>
      <input [(ngModel)]="note" placeholder="Enter a note...">
      <button (click)="addNote()">Add a note</button>
      <ul>
        <li *ngFor="let note of notes; let i = index" (click)="deleteNote(i)">{{ note }}</li>
      </ul>
    </div>
  `
export class NotesComponent {
  note: string = '';
  notes: string[] = [];

  addNote() {
    if (this.note) {
      this.notes.push(this.note);
      this.note = '';
    }
  }

  deleteNote(index: number) {
    this.notes.splice(index, 1);
  }
}

3. Frontend: React

React — est une bibliothèque populaire pour le développement d'interfaces utilisateur, qui peut suivre les principes MVC avec une bonne organisation du code.

• Model: Les données peuvent être stockées dans l'état des composants ou dans des gestionnaires d'état distincts tels que Redux.

• View: Les composants React sont une interface utilisateur qui affiche des données.

• Controller: Le contrôleur peut être considéré comme la logique des composants qui gère l'état et met à jour la vue.

Exemple de composant dans React :

import React, { useState } from 'react';

function NotesApp() {
  const [note, setNote] = useState('');
  const [notes, setNotes] = useState([]);

  const addNote = () => {
    if (note) {
      setNotes([...notes, note]);
      setNote('');
    }
  };

  const deleteNote = (index) => {
    setNotes(notes.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input
        type="text"
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="Enter a note..."
      />
      <button onClick={addNote}>Добавить заметку</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index} onClick={() => deleteNote(index)}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default NotesApp;

4. Backend: Laravel (PHP)

Laravel — est un framework PHP qui suit également l'architecture MVC.

• Model: Les modèles dans Laravel interagissent avec la base de données et gèrent les données.

• View: Les vues (Views) sont des modèles Blade qui affichent des données à l'utilisateur.

• Controller: les contrôleurs acceptent les demandes des utilisateurs, les traitent et renvoient la vue correspondante.

Exemple de contrôleur dans Laravel :

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Note;

class NotesController extends Controller
{
    public function index()
    {
        $notes = Note::all();
        return view('notes.index', compact('notes'));
    }

    public function store(Request $request)
    {
        $request->validate(['content' => 'required']);
        Note::create($request->all());
        return redirect()->route('notes.index');
    }

    public function destroy(Note $note)
    {
        $note->delete();
        return redirect()->route('notes.index');
    }
}

5. Backend: Django (Python)

Django est un framework Python qui utilise une approche MTV (Model-Template-View), similaire à MVC.

• Model: Les modèles dans Django gèrent les données et décrivent la structure de la base de données.

• Template (View): les modèles sont responsables de l'affichage des données à l'utilisateur.

• View (Controller): Les vues acceptent les demandes de l'utilisateur et renvoient la réponse correspondante.

Exemple de présentation dans Django :

from django.shortcuts import render, redirect
from .models import Note

# View pour afficher la liste des notes
def notes_list(request):
    notes = Note.objects.all()
    return render(request, 'notes/notes_list.html', {'notes': notes})

# View pour créer une nouvelle note
def add_note(request):
    if request.method == 'POST':
        content = request.POST.get('content')
        if content:
            Note.objects.create(content=content)
        return redirect('notes_list')
    return render(request, 'notes/add_note.html')

# Voir pour supprimer la note
def delete_note(request, note_id):
    note = Note.objects.get(id=note_id)
    note.delete()
    return redirect('notes_list')

Avantages de l'utilisation de MVC

• Simplification du développement: Il est facile de travailler sur des parties individuelles de l'application.

• Support amélioré: La division de la logique de l'application en parties indépendantes simplifie les modifications.

• Travail en parallèle: Plusieurs développeurs peuvent travailler simultanément sur différentes parties du système.

• Réutilisation du code: les composants de modèle et de vue peuvent être utilisés dans d'autres parties de l'application, ce qui augmente l'efficacité du développement.

Autres frameworks utilisant MVC

• ASP.NET MVC: Framework de Microsoft pour le développement d'applications Web à l'aide de C#. Il sépare clairement le modèle, la vue et le contrôleur, ce qui rend le développement transparent et pratique.

• Django: un framework Python utilisant l'approche MTV (Model-Template-View), qui est similaire à MVC. Model dans Django gère les données, Template est responsable de la présentation, et View joue le rôle de contrôleur.

• Laravel: un framework PHP qui suit également l'architecture MVC. Model gère l'interaction avec la base de données, View est responsable de l'affichage, et Controller traite les demandes des utilisateurs.

Conclusion 🎉

MVC — c'est un excellent moyen de structurer le code, de le rendre plus propre et plus supporté. Avec son aide, vous pouvez diviser le travail sur le projet entre les développeurs et simplifier le support à l'avenir. Sur l'exemple des notes, nous avons vu à quel point il est facile d'organiser une application en la divisant en modèle, vue et contrôleur.

Essayez de mettre en œuvre quelque chose de simple en utilisant MVC ! Cela vous aidera à mieux comprendre le fonctionnement de ce modèle. Bonne chance dans vos projets ! 🚀