MVC: le pattern populaire pour une application web ?

Rayed Benbrahim

Publié le 17 septembre 2020

Depuis 60 ans d'histoire informatique, les problèmes qu'ont à résoudre les développeurs se répètent. Les technologies changent, le contexte n'est plus le même mais au fond, la façon d'aborder le problème reste la même. C'est pourquoi les Design Patterns ont été créés, notamment le MVC.

Très plébiscité dans la conception d'applications contenant une interface graphique, de nombreux frameworks modernes, tels que Laravel, Angular, Django, Rails ou, des framework Node JS telles qu'AdonisJS ou NestJS se basent sur une architecture basée sur le pattern MVC.

Le MVC en bref

Le pattern MVC est une façon d'organiser un code source autour de trois piliers:

  • Le Model qui représente la structure des données. Leur définition ainsi que les fonctions qui leur sont propres et qu'elles peuvent avoir. Ce module est complètement décoléré du code métier ou de l'affichage de telle sorte à ce que la modification de la logique ou de l'interface n'affecte pas la structure des données.
  • La View (ou les vues) représente l'interface graphique à livrer au client qui en fait la requête. Avoir le code lié à l'interface isolé de la logique métier ou des données permet de faire des modifications à l'interface graphique sans avoir à se soucier de casser du code métier ou la structure des données.
  • Le(s) Controller(s) sont au cœur de la logique métier de votre application. Ils se situent entre les vues et le model. Les requêtes qu'un client va faire depuis l'interface graphique, la view, va être dirigée vers un controller qui sera en charge de manipuler les données dont il a besoin avec la brique Model, la traiter suivant le besoin métier, puis ordonner à la view de répondre au client avec les bons éléments.
Le MVC divise le code source en 3 sections. Le model, la view et le controller

Ce schéma représente les 3 piliers du MVC ainsi que leurs communications (source: MDN web docs)

L'Histoire du MVC

Mis en évidence dans les années 70 par Trygve Reenskaug, le MVC a été implémenté dans le programme Smalltalk-79, un langage basé sur LISP disposant d'une interface graphique de programmation.

Conçu avec le principe de base de Single Repsonsibility Principle (SRP), dictant que chaque module, classe ou fonction d'un programme ne doit avoir qu'une seule responsabilité, le MVC avait pour but de créer une organisation du code standardisée dans la création d'application ayant pour but d'afficher une interface graphique.

Quel était son but ?

Au commencement du développement d'une application, tout part d'un fichier central. Très rapidement, votre application grossit et vous devez incorporer plusieurs éléments à votre codebase. Vos multiples interfaces vont devoir s'adapter aux actions des utilisateurs, les fonctionnalités vont se multiplier ainsi que les requêtes pour faire évoluer les données stockées en base.

Votre code source qui était simple et dans lequel vous vous retrouviez facilement devient un plat de spaghetti 🍝 ! Plus celui-ci grandit, plus il deviendra difficile d'ajouter une fonctionnalité sans créer un dysfonctionnement dans une autre déjà existante. C'est ce qu'on appelle une régression. Sans une organisation standard de votre codebase, débugger deviendra une tâche longue et pénible. Collaborer avec un autre développeur sur votre projet demandera une assistance constante de votre part.

C'est pour éviter ces handicaps que le MVC a été mis en évidence et proposé comme un pattern d'architecture.

En structurant une codebase avec l'architecture MVC vous lui apportez:

  • Une facilité pour retrouver les différents modules ou fonctions de votre code
  • Un débuggage plus rapide
  • Un gain de temps à la modification ou ajout de nouvelles fonctionnalités
  • Un confort pour le développement, par vous-même ou un futur collaborateur
  • Une séparation entre la logique métier, les interfaces graphiques et la modélisation des données de telle sorte à ce que la modification de l'un ne casse pas l'autre

Dans quel cas l'utiliser

Le MVC était initialement mis en évidence pour les clients lourds disposant d'une interface graphique utilisateur. Seulement avec le développement du web depuis les années 2000, le pattern MVC a été de plus en plus mis en application dans les frameworks de développement web.

Les frameworks visant à faire du Server Side Rendering, c’est-à-dire que le serveur génère les vues, tels que Django, Ruby on Rails, Laravel ou Symfony l'ont adopté et le proposent aux développeurs dès le démarrage du projet. Côté framework Frontend, Angular a également fait le choix du MVC.

En revanche, les librairies React, puis Vue, ont fait le choix d'opter pour le pattern flux, un autre pattern de conception pour interface qui vient lui résoudre un problème lorsque les données sont interdépendantes dans plusieurs vues au point où MVC ne répond plus assez bien au besoin.

MVVM et N-Tier: les spin-off du MVC

MVVM: Model View ViewModel

Créé par deux architectes chez Microsoft et incorporé dans le système graphique WPF du framework .NET, le MVVM - acronyme pour Model View ViewModel - est une variation du pattern MVC.

Le MVVM se distingue du MVC par la couche viewModel qui fait de la liaison de données bidirectionnelle.

Le MVVM se distingue par la couche viewModel qui fait de la liaison de données bidirectionnelle

À l’instar du MVC, le Model View ViewModel vise à séparer le code concernant l'interface du code logique de l'application.

Cependant, la différence se trouve au niveau du ViewModel. Contrairement au Controller du MVC, le ViewModel sert de lien bidirectionnel entre l'interface. C'est ce qu'on appel le data binding.

L'action menée par un utilisateur sur l'interface va aller modifier une donnée présente dans le ViewModel. Cette action peut provoquer un appel au code métier dans le Model, qui va peut être à son tour renvoyer une nouvelle donnée au ViewModel. La View ne sera pas changée, c'est simplement la donnée qui lui sera passée dynamiquement par le ViewModel et l'interface s'adaptera pour afficher la nouvelle donnée.

Par exemple sur une application web type calculatrice, l'action d'appuyer sur "2", puis sur "+" et enfin "2", ne provoque pas encore de changement visuel sur l'interface. Cependant, le ViewModel a gardé les données. Lorsque vous cliquerez sur la touche "=", le code sera envoyé au Model pour faire le calcul, le résultat sera renvoyé au ViewModel et la View, qui reste le même code, va s'adapter pour afficher "4" parce que le ViewModel aura bindé cette donnée.

L'architecture N-Tier ou 3 tiers

Le pattern d'architecture n tiers (appelé aussi architecture 3 tiers) est à priori fortement similaire au MVC.

L'architecture 3 tiers ressemble fort au MVC mais avec une hiérarchie très verticale.

L'architecture 3 tiers ressemble fortement au MVC mais avec une hiérarchie verticale

La différence réside dans le fait que l'application layer - l'équivalent du Controller - est la tour de contrôle de l'application. Là où dans certaines implémentations du MVC, le Model pouvait directement communiquer avec la View, l'architecture 3 tiers impose de repasser par la couche applicative.

Pour aller plus loin:

Derniers articles

Dans l'univers du Big Data et du Cloud, Snowflake a vu le jour en étant le premier fournisseur d'un Data Warehouse sur le cloud 100% scalable. Dans cet article, découvrez ce qu'est un Data Warehouse et en quoi Snowflake est une solution innovante pour les entreprises.

Souvent portée par une équipe d'analystes, la QA vient supporter l'équipe tech pour assurer que les évolutions en cours de développement et récemment déployés ne viennent pas perturber l'application. Dans cet article, découvrez comment les méthodes Shift-Left et Shift-Right viennent se complémenter pour assurer un bon niveau de qualité du logiciel déployé.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton Mac et faire tourner tes premiers containers.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton PC Windows et faire tourner tes premiers containers.

Recruter un développeur passe forcément par une évaluation technique de ses compétences. Comment intégrer un test technique dans un processus d'embauche, suivant le niveau de seniorité ?

Mardi 15 Juin 2021, Vercel a dévoilé la version 11 du framework Next.js. Cette nouvelle version apporte des optimisations sur le plan des performances mais facilite également la collaboration entre développeurs et entre les différents partis prenants du projet.

Les Jobs