Différence entre MVVM et MVP

Le développement de logiciels vise à élaborer des solutions qui répondent aux besoins et aux problèmes des utilisateurs et des entreprises. Pour y parvenir, différentes technologies et modèles d’architecture tels que Model-View-ViewModel (MVVM) et Modèle-vue-présentateur (MVP) sont utilisés.

Comme pour tout ce qui est fabriqué, la première étape est l'étape de la planification et de la conception. Le processus de conception logicielle peut être une spécification basée sur le jeu d’outils technologique préféré et englober toutes les activités, de la conception à la planification, en passant par la mise en oeuvre, jusqu’à la mise à jour et aux modifications..

Il couvre la conception architecturale de bas et de haut niveau, basée sur des modèles d'architecture sélectionnés, et trace des solutions réutilisables à l'aide de modèles de conception..

Structure d'application logicielle

L'architecture logicielle définit la structure d'une application qui répond aux exigences techniques, opérationnelles et des utilisateurs, et fait référence à la manière dont le code est organisé et géré..

Décider de l’architecture d’une application logicielle est crucial, car ce n’est pas une partie facile et modifiable d’une application déjà développée; par conséquent, le modèle architectural doit être décidé avant le début de la programmation.

Les modèles architecturaux diffèrent quelque peu des modèles de conception car leur portée est beaucoup plus large car ils traitent de problèmes plus techniques, tels que les performances et les limitations matérielles, ainsi que la haute disponibilité. MVC, MVVM et MVP sont des exemples de modèles d'architecture différents..

D'autre part, les modèles de conception sont des meilleures pratiques formalisées qui facilitent le développement orienté objet réutilisable et sont plus faciles à gérer et à modifier que l'architecture d'une application.. 

Modèles d'architecture

Contrôleur de vue modèle (MVC) a été l’un des premiers modèles architecturaux développés pour les applications Web et a gagné en popularité du milieu à la fin des années 90, en particulier auprès de la communauté Java..

Les nouveaux frameworks, tels que Django pour Python et Rails (Ruby on Rails), sont fortement axés sur le déploiement rapide, raison pour laquelle MVC prend la part de marché en tant que grand attrait pour les modèles architecturaux..

Traditionnellement, le développement d'interface utilisateur contenait beaucoup de code pour gérer une logique complexe. Les modèles d'architecture ont donc été conçus pour réduire le code au niveau de l'interface utilisateur, le rendant ainsi plus propre et plus facile à gérer..

Ainsi, avec le modèle MVC, une application Web est composée de

• Modèle (Les données)
• Vue (interface pour visualiser et manipuler des données)
• Manette (opérations et actions effectuées sur les données)

le Modèle gère les données et la logique d'entreprise et il y a non dépendances entre les Modèle et le Manette ou Vue.

le Vue présente les données à l'utilisateur dans le format pris en charge et la mise en page requise, et lorsque le Manette reçoit les demandes des utilisateurs (pour récupérer les données), il appelle les ressources appropriées nécessaires pour traiter la demande.

Appliquons ce modèle à la construction d'une librairie en ligne.

Les utilisateurs peuvent rechercher, afficher, enregistrer et acheter des livres, ainsi que gérer leurs profils et leurs listes de livres. Lorsqu'un utilisateur clique sur la catégorie SCI-FI, tous les livres liés doivent s'afficher comme disponibles..

le Contrôleurs gérer les actions qui gèrent les livres (list, add, view, etc.). Il peut y avoir plusieurs Contrôleurs avec une principale Manette 'diriger le trafic'.

Pour cet exemple, le Manette est nommé controller_books.php et le Modèle (par exemple model_books.php) gère les données et la logique liées aux livres.

Enfin, différent Des vues sera nécessaire, comme lors de l'ajout de livres au panier en ligne ou lors de l'affichage du détail du livre avec des images et des critiques.

le controller_books.php reçoit l'action (demande de l'utilisateur) du serveur principal Manette (par exemple. index.php). le controller_books.php analyse la demande et appelle le model_books.php (les données) pour renvoyer la liste des livres SCI-FI.

La responsabilité du Modèle est de fournir cette information, en utilisant n'importe quelle logique appliquée (en utilisant des filtres de recherche). le Manette prend ensuite les informations et les transmet aux personnes concernées. Vue (vue de recherche, vue d’impression, vue de détail, etc.) et les informations sont présentées (via le Vue) à l'utilisateur à l'origine de la demande.

Ce sont les principes de base du modèle MVC, qui ont évolué en créant de nouvelles variantes de modèles d'architecture, tels que Modèle-Vue-Présentateur (MVP), Modèle-Vue-VueModèle (MVVM), Contrôleur hiérarchique modèle-vue-contrôleur (HMVC), et Model-View-Adapter (MVA), etc..

Modèle MVP

Modèle-vue-présentateur (MVP)

le Modèle MVP a été autour pendant un certain temps et est une variante de MVC. Il a été conçu spécifiquement pour l'automatisation des tests, l'objectif étant d'augmenter la quantité de code pouvant être testée via l'automatisation. Le modèle résout certains problèmes liés à la couche de présentation, isolant ainsi la logique métier de l'interface utilisateur..

L’écran est la vue, les données qu’il affiche sont le modèle et le présentateur relie les deux..

MVP comprend les composants suivants avec des responsabilités distinctes:

• Modèle (définit les données à afficher)
• Vue (affiche les données du modèle et achemine les demandes des utilisateurs vers le présentateur).
• Présentateur (interagit entre la vue et le modèle et les lie ensemble)

le Vue (une page Web) affiche et gère les contrôles de page en transmettant les événements (demandes des utilisateurs) au Présentateur qui ont été initiés dans le Vue.

le Présentateur répond à ces événements en lisant et en mettant à jour le Modèle pour changer le Vue et par conséquent, le Présentateur la responsabilité est de lier le Modèle et Vue.

Après avoir regardé MVC et MVP modèles communs, le point commun est qu’ils assument des responsabilités distinctes pour chaque élément et favorisent la séparation des Vue (UI) et Modèle (Les données). Les différences significatives entre ces modèles sont plus évidentes dans la façon dont les modèles sont appliqués.

MVP peut être un modèle complexe à mettre en œuvre pour des solutions avancées, mais présente toutefois d’importants avantages s’il est mis en œuvre en tant que solution bien conçue, bien que cela ne soit pas nécessairement le choix approprié pour des solutions simples.

Modèle MVVM

Model-View-ViewModel (MVVM)

le MVVM modèle spécialement conçu pour les plates-formes Windows Presentation Foundation (WPF) et Microsoft Silverlight, il peut être utilisé sur tous XAML [i] plateformes.

WPF est un système Microsoft qui rend les interfaces utilisateur dans les programmes Windows et a été publié pour la première fois dans .NET Framework 3.0.

MVVM a été raffiné de MVC et dans ce motif, le Vue est actif avec les comportements, les événements et la liaison de données, et le Vue synchronise avec ViewModel (qui permet de séparer la présentation et expose des méthodes et des commandes pour gérer et manipuler les Modèle.

MVVM comprend trois composants principaux:

• Modèle (représente les données avec la validation et la logique métier)
• Vue (La vue est chargée de définir la structure, la présentation et l'apparence de ce que l'utilisateur voit à l'écran. Idéalement, la vue est définie uniquement en XAML, avec un code-behind limité qui ne contient pas de logique métier. liaison entre le Vue et ViewModel pour afficher les éléments synchronisant le modèle et le modèle de vue avec la vue)
• ViewModel (sépare la vue du modèle et expose des méthodes et des commandes permettant de manipuler les données (modèle).

le Vue reçoit les données du ViewModel (via la liaison de données et les méthodes), et au moment de l'exécution, le Vue va changer en répondant aux événements dans le ViewModel.

le ViewModel intermédiaire entre les Vue et Modèle et gère le Vue logique. Il interagit avec le Modèle - prendre les données du Modèle et le présenter à la Vue afficher.

Ces composants sont tous découplés les uns des autres, ce qui permet une plus grande flexibilité pour travailler sur eux indépendamment, isoler les tests unitaires et les échanger, sans affecter aucun autre composant..

Cette structure permet la Modèle et d’autres composants évoluent indépendamment, ce qui permet aux développeurs de travailler simultanément sur différents aspects de la solution. Par exemple, lorsque les concepteurs travaillent sur le Vue, ils génèrent simplement des échantillons de données sans avoir besoin d'accéder aux autres composants. Cela facilite la reconception de l'interface utilisateur en tant que Vue est implémenté en XAML.

Comme mentionné précédemment avec MVP, des solutions simples n’auraient pas besoin d’architecture et de modèles de conception, comme «Hello World!» est trop élémentaire pour suivre un modèle; Cependant, à mesure que de nouvelles fonctionnalités, fonctions et composants sont introduits, la complexité de l'application augmente, de même que la quantité de code à gérer..

En résumé

Depuis le début du développement de l'interface utilisateur, les modèles de conception sont de plus en plus populaires pour faciliter le processus de développement, les applications plus évolutives et faciliter les tests..

Différence illustrée entre les modèles MVP et MVVM:

• À la fois MVP et MVVM, la Vue est le point d'entrée de l'application
• Dans MVP, il existe une correspondance biunivoque entre le Vue et Présentateur, où dans MVVM, la relation est un-à-plusieurs entre le Vue et ViewModel.
• MVP est principalement utilisé pour les applications Windows Forms et Windows Phone et MVVM est conçu pour Silverlight, WPF, Knockout / AngularJS, etc..