SlideShare une entreprise Scribd logo
Chp3 : Architecture des Applications Mobiles
MVC, MVVM, MVP…
Conception et Développement d’Applications Mobiles
GL4 (Option Mobile) - 2015
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 1
Structure
•  Usuellement: Application multi-couches
•  Interface Utilisateur
•  Couche métier
•  Couche données
•  Choix possible entre:
•  Client léger web-based
•  Couches métier et client probablement localisées sur le serveur
•  Client lourd et riche
•  Couches métier et client probablement sur l’appareil
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 2
Chp3 : Architecture des Applications Mobiles
PLAN
1.  Principes de Conception Mobile
2.  Les Patrons de conception MV*
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 3
Chp3 : Architecture des Applications Mobiles
PRINCIPES DE CONCEPTION MOBILE
Chp3 : Architecture des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 4
1.  Principes de Conception Mobile
2.  Les Patrons de conception MV*
Principes de Conception Clefs
•  Principes clefs qui vous aideront à concevoir une application
mobile qui correspond aux « meilleures pratiques », minimise
les coûts et besoins de maintenance, et favorise l’utilisabilité
et extensibilité
•  Séparation des préoccupations
•  Principe de responsabilité unique
•  « Don’t Repeat Yourself » (DRY)
•  Ne pas commencer par une conception évoluée
•  Privilégier la composition sur l’héritage
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 5
Conception d’Applications Mobiles
P1: Séparation des Préoccupations
« Separation of Concerns »
•  Diviser votre application en parties distinctes dont les
fonctionnalités se chevauchent le moins possible
•  Avantages
•  Optimisation d’un module ou fonctionnalité indépendamment des
autres
•  Si un module est défaillant, il n’impactera pas les autres
•  Rend l’application plus facile à comprendre et concevoir
•  Facilite la gestion des systèmes complexes indépendants
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 6
Conception d’Applications Mobiles
P2: Principe de Responsabilité Unique
« Single Responsibility Principle »
•  Chaque composant ou module doit être responsable
uniquement d’une fonctionnalité ou caractéristique
•  Avantages
•  Rend les composants plus cohésifs (unis, rassemblés)
•  Rend l’optimisation des composants plus facile si une caractéristique ou
fonctionnalité a changé
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 7
Conception d’Applications Mobiles
P3: Pas de Répétition
« Don’t Repeat Yourself (DRY) »
•  Il ne faut pas dupliquer une fonctionnalité dans une
application sur plusieurs modules
•  Avantages
•  Faciliter l’implémentation des changements
•  Augmenter la clarté
•  Renforcer la consistance du code
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 8
Conception d’Applications Mobiles
P4: Ne pas Commencer par une Conception Évoluée
«Avoid doing a big design upfront »
•  Si vos besoins ne sont pas clairs, ou s’il y’a des risques
d’évolution de la conception dans le temps, éviter de fournir
trop d’effort pour la conception au début
•  Faites en sorte que votre conception progresse avec votre
application
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 9
Conception d’Applications Mobiles
P5: Privilégier la Composition à l’Héritage
«Composition over Inheritance »
•  Utiliser si possible la composition à la place de l’héritage
quand vous voudrez réutiliser une fonctionnalité
•  Avantages
•  L’héritage augmente la dépendance entre les classes parentes et filles
•  Limitation de la réutilisation des classes filles
•  Réduire la hiérarchie de l’héritage, qui peut s’avérer pénible
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 10
Conception d’Applications Mobiles
Mais aussi…
•  Grouper les types de composants différents dans des couches logiques
•  Faire en sorte que les design patterns d’une couche soient consistants
•  Ne pas utiliser de design patterns incompatibles dans une même couche
•  Ne pas mixer plusieurs types de composants dans la même couche logique
•  Déterminer le type de couches que vous voulez renforcer
•  Utiliser l’abstraction pour implémenter le couplage faible entre les couches
•  Éviter de surcharger les fonctionnalités d’un composant
•  Comprendre comment est-ce que les composants communiquent les uns
avec les autres
•  Garder des formats de données consistantes dans une couche
•  Séparer le plus possible le code non fonctionnel (sécurité, logging…) du code
métier
•  Être consistant dans les conventions de nommage
•  Établir des standards pour la gestion des exception
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 11
Conception d’Applications Mobiles
LES PATRONS DE CONCEPTION MV*
Chp3 : Architecture des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 12
1.  Principes de Conception Mobile
2.  Les Patrons de conception MV*
Avantages
« Les patrons de conception sont des solutions réutilisables pour des
problèmes récurrents »
•  Réutilisabilité
•  Le modèle n’est pas couplé avec sa représentation, et peut donc être
facilement réutilisé dans d’autres projets
•  Testabilité
•  Tester les couche indépendamment les unes des autres les rend plus faciles
à gérer et à corriger
•  Maintenabilité
•  Il est plus facile de modifier une partie de l’application sans impacter les
autres modules
•  Compréhensibilité
•  Le code est plus compréhensible et plus lisible
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 13
Les Patrons de Conception MV*
MVC : Model – View – Controller
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 14
Les Patrons de Conception MV*
Model
ControllerView
1*
Classes du Modèle
Requête & RelaiComposants UI
MVC : Couches
•  Model
•  Données de l’application
•  Méthodes manipulant ces données
•  Stockage et extraction de la BD
•  View
•  Représentation visuelle du modèle
•  Gère les interactions utilisateur
•  Contrôleur
•  Accès aux données à partir du modèle
•  Affichage des données dans les vues
•  Intermédiaire entre plusieurs vues et modèles
•  Observe les changements du modèle et les transmet à la vue
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 15
Les Patrons de Conception MV*
M
CV
1*
MVC : Flux
•  Les entrées utilisateur sont interceptées par le contrôleur
•  Un contrôleur peut faire appel à plusieurs vues (erreur, succès…)
•  Une vue n’a pas de visibilité sur son contrôleur
•  Le contrôleur passe le modèle à la vue
•  Le modèle a en général peu (ou pas) de méthodes (comportement)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 16
Les Patrons de Conception MV*
M
CV
1*
MVC : Références
•  La vue fait référence au modèle, mais pas le contraire
•  La vue « observe » les changements du modèle, et s’y adapte
•  Le contrôleur fait référence au modèle, le remplit et le passe à
la vue
•  La vue n’a pas de visibilité sur le contrôleur, mais fait
référence et s’attend à un modèle particulier
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 17
Les Patrons de Conception MV*
M
CV
1*
MVVM : Model – View – ViewModel
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 18
Les Patrons de Conception MV*
Model
ViewModelView
1*
MVVM : Flux
•  L’ entrée utilisateur commence par la vue et peut provoquer l’exécution
d’un comportement ViewModel
•  La vue et le modèle ne communiquent jamais
•  ViewModel est un modèle fortement typé de la vue, qui est une
réflexion exacte ou une abstraction de cette vue
•  ViewModel et Vue sont toujours synchronisés
•  Le modèle n’a aucune idée que le VM ou la vue existent
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 19
Les Patrons de Conception MV*
M
VMV
1*
MVVM : Références
•  Un VM n’a pas besoin de référencer la vue
•  La vue est reliée à des propriétés du VM
•  La vue n’a aucune idée sur l’existence du modèle
•  Le VM et le modèle n’ont pas de référence ou visibilité sur la vue
•  Le modèle n’a aucune idée de l’existence de la vue et du VM
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 20
Les Patrons de Conception MV*
M
VMV
1*
MVP : Model – View – Presenter
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 21
Les Patrons de Conception MV*
Model
PresenterView
11
MVP : Flux
•  L’ entrée utilisateur commence par la vue, pas par le Presenter
•  La vue invoque les commandes du Presenter, et le Presenter modifie la
vue
•  La vue et le modèle ne communiquent jamais
•  Le Presenter est une couche d’abstraction de la vue
•  Chaque vue a un Presenter qui lui est associé (1-to-1)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 22
Les Patrons de Conception MV*
M
PV
11
MVP : Références
•  Le Presenter a besoin d’une référence vers la vue
•  La vue a également une référence vers son Presenter
•  C’est le Presenter qui va charger la vue à partir du modèle, pas le
modèle
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 23
Les Patrons de Conception MV*
M
PV
11
Références
•  Microsoft Patterns and Practices, « Mobile Application Architecture
Guide: Application Architecture Pocket Guide », 2008
•  Amir Jalilifard, « A belly dance in the holy lands of MVC, MVP and MVVM
Patterns via Javascript », Code Project, 24 février 2015, url:
http://www.codeproject.com/Articles/844789/A-Belly-Dance-in-Holy-
Lands-of-MVC-MVP-and-MVVM-Pa
•  Ketan Thakkar, « Difference between MVC vs. MVP vs. MVVM », 11
septembre 2014, url:
http://blogs.k10world.com/technology/difference-between-mvc-vs-
mvp-vs-mvvm/
•  Wiztelsys, « Design Patterns used in Mobile », 17 avril 2014, url =
https://wiztelsys.com/blog/design-patterns-used-in-mobiles/
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 24
Sites Web & Livres

Contenu connexe

PDF
Chp1 - Introduction au Développement Mobile
PPTX
Architectures n-tiers
PDF
Chp6 - Développement iOS
PDF
Architecture réparties et les services web
PPTX
Exposé langage-b
PPTX
Architectures 3-tiers (Web)
PDF
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
PPSX
Cours Génie Logiciel - Introduction
Chp1 - Introduction au Développement Mobile
Architectures n-tiers
Chp6 - Développement iOS
Architecture réparties et les services web
Exposé langage-b
Architectures 3-tiers (Web)
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Cours Génie Logiciel - Introduction

Tendances (20)

PDF
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
PPT
Cloud et Virtualisation
PPTX
Conception et Réalisation d’une application de Gestion SCOLAIRE
PPTX
Conception et réalisation d’une application Mobile banking
DOCX
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
DOC
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
PDF
Conception et Réalisation Application Web Laravel PFE BTS
PDF
Rapport PFE: Gestion de Parc Informatique
PDF
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
DOCX
Rapport Pfe Application Web e-commerce Symfony2
DOC
Rapport PFE Application Web Mobiles belwafi bilel
PPTX
Présentation PFE (Conception et développement d'une application web && mobile...
PPTX
Présentation cloud computing
PPTX
Application de gestion, suivi,et de sécurité des chantiers en temps réels.
PDF
pfe book 2023 2024.pdf
PDF
Chp5 - Applications Android
PDF
Etude d'une application de gestion d'une bibliothèque numérique
PDF
application desktop pour la gestion d'une auto-ecole
PDF
Rapport Projet Gestion des Etudiants avec C++
PDF
La spécification des besoins
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Cloud et Virtualisation
Conception et Réalisation d’une application de Gestion SCOLAIRE
Conception et réalisation d’une application Mobile banking
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Conception et Réalisation Application Web Laravel PFE BTS
Rapport PFE: Gestion de Parc Informatique
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport Pfe Application Web e-commerce Symfony2
Rapport PFE Application Web Mobiles belwafi bilel
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation cloud computing
Application de gestion, suivi,et de sécurité des chantiers en temps réels.
pfe book 2023 2024.pdf
Chp5 - Applications Android
Etude d'une application de gestion d'une bibliothèque numérique
application desktop pour la gestion d'une auto-ecole
Rapport Projet Gestion des Etudiants avec C++
La spécification des besoins
Publicité

En vedette (20)

PDF
Chp2 - Conception UX-UI des Applications Mobiles
PDF
Mobile-Chp4 côté serveur
PDF
Android-Tp5 : web services
PDF
P4 intents
PDF
P2 éléments graphiques android
PDF
P6 composants avancés
PDF
P1 introduction à android
PDF
P5 stockage
PDF
Android-Tp4: stockage
PDF
Android-Tp1: éléments graphiques de base et intents
PDF
Android-Tp3: fragments et menus
PDF
P3 listes et elements graphiques avancés
PDF
Android-Tp2: liste et adaptateurs
PDF
eServices-Chp3: Composition de Services
PDF
eServices-Chp6: WOA
PDF
BigData_Chp5: Putting it all together
PDF
BigData_Chp2: Hadoop & Map-Reduce
PDF
BigData_Chp3: Data Processing
PDF
Sécurité des Systèmes Répartis- Partie 1
PDF
eServices-Tp3: esb
Chp2 - Conception UX-UI des Applications Mobiles
Mobile-Chp4 côté serveur
Android-Tp5 : web services
P4 intents
P2 éléments graphiques android
P6 composants avancés
P1 introduction à android
P5 stockage
Android-Tp4: stockage
Android-Tp1: éléments graphiques de base et intents
Android-Tp3: fragments et menus
P3 listes et elements graphiques avancés
Android-Tp2: liste et adaptateurs
eServices-Chp3: Composition de Services
eServices-Chp6: WOA
BigData_Chp5: Putting it all together
BigData_Chp2: Hadoop & Map-Reduce
BigData_Chp3: Data Processing
Sécurité des Systèmes Répartis- Partie 1
eServices-Tp3: esb
Publicité

Similaire à Chp3 - Architecture Logicielle des Applications Mobiles (20)

PPTX
Chapitre 3--------------------------.pptx
PPTX
Tech days 2012 mvvm de a à z
PPTX
les style d'architecture
PPTX
Modele mvc
PPTX
PPTX
MVVM de A à Z
PPTX
Wpf et Silverlight
PDF
Créer une application web en asp.net mvc 2
PDF
PPT
Présentation WPF
PDF
Guide de survie en milieu responsive - Paris Web 2013
PDF
Guide_de_survie_en_milieu_responsive
PDF
Le pattern View Model avec Symfony2
PPTX
Architecture mobile
PDF
La Gestion de Projet Mobile
PPTX
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
KEY
Trouver le chemin des bonnes pratiques
PPTX
Kit De Survie Techno et Web à l'usage des Entrepreneurs
PDF
Page blanchea lapplicationwindows8
PPTX
Introducthion mvvm avec wpf
Chapitre 3--------------------------.pptx
Tech days 2012 mvvm de a à z
les style d'architecture
Modele mvc
MVVM de A à Z
Wpf et Silverlight
Créer une application web en asp.net mvc 2
Présentation WPF
Guide de survie en milieu responsive - Paris Web 2013
Guide_de_survie_en_milieu_responsive
Le pattern View Model avec Symfony2
Architecture mobile
La Gestion de Projet Mobile
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Trouver le chemin des bonnes pratiques
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Page blanchea lapplicationwindows8
Introducthion mvvm avec wpf

Plus de Lilia Sfaxi (20)

PDF
chp1-Intro à l'urbanisation des SI.pdf
PDF
Plan d'études_INSAT_2022_2023.pdf
PDF
Lab3-DB_Neo4j
PDF
Lab2-DB-Mongodb
PDF
Lab1-DB-Cassandra
PDF
TP2-UML-Correction
PDF
TP1-UML-Correction
PDF
TP0-UML-Correction
PDF
TD4-UML
PDF
TD4-UML-Correction
PDF
TD3-UML-Séquences
PDF
TD3-UML-Correction
PDF
TD2 - UML - Correction
PDF
TD1 - UML - DCU
PDF
TD1-UML-correction
PDF
Android - Tp1 - installation et démarrage
PDF
Android - Tp2 - Elements graphiques
PDF
Android - Tp3 - intents
PDF
Android - TPBonus - web services
PDF
Android - Tp4 - graphiques avancés
chp1-Intro à l'urbanisation des SI.pdf
Plan d'études_INSAT_2022_2023.pdf
Lab3-DB_Neo4j
Lab2-DB-Mongodb
Lab1-DB-Cassandra
TP2-UML-Correction
TP1-UML-Correction
TP0-UML-Correction
TD4-UML
TD4-UML-Correction
TD3-UML-Séquences
TD3-UML-Correction
TD2 - UML - Correction
TD1 - UML - DCU
TD1-UML-correction
Android - Tp1 - installation et démarrage
Android - Tp2 - Elements graphiques
Android - Tp3 - intents
Android - TPBonus - web services
Android - Tp4 - graphiques avancés

Dernier (7)

PDF
FORMATION COMPLETE EN EXCEL DONE BY MR. NYONGA BRICE.pdf
PPTX
Souveraineté numérique - Définition et enjeux pour les entreprises et les dév...
PDF
Tendances tech 2025 - SFEIR & WENVISION.pdf
PDF
presentation_with_intro_compressee IEEE EPS France
PDF
FORMATION EN Programmation En Langage C.pdf
PDF
Modems expliqués- votre passerelle vers Internet.pdf
PPTX
Presentation_Securite_Reseaux_Bac+2.pptx
FORMATION COMPLETE EN EXCEL DONE BY MR. NYONGA BRICE.pdf
Souveraineté numérique - Définition et enjeux pour les entreprises et les dév...
Tendances tech 2025 - SFEIR & WENVISION.pdf
presentation_with_intro_compressee IEEE EPS France
FORMATION EN Programmation En Langage C.pdf
Modems expliqués- votre passerelle vers Internet.pdf
Presentation_Securite_Reseaux_Bac+2.pptx

Chp3 - Architecture Logicielle des Applications Mobiles

  • 1. Chp3 : Architecture des Applications Mobiles MVC, MVVM, MVP… Conception et Développement d’Applications Mobiles GL4 (Option Mobile) - 2015 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1
  • 2. Structure •  Usuellement: Application multi-couches •  Interface Utilisateur •  Couche métier •  Couche données •  Choix possible entre: •  Client léger web-based •  Couches métier et client probablement localisées sur le serveur •  Client lourd et riche •  Couches métier et client probablement sur l’appareil Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2 Chp3 : Architecture des Applications Mobiles
  • 3. PLAN 1.  Principes de Conception Mobile 2.  Les Patrons de conception MV* Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 Chp3 : Architecture des Applications Mobiles
  • 4. PRINCIPES DE CONCEPTION MOBILE Chp3 : Architecture des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4 1.  Principes de Conception Mobile 2.  Les Patrons de conception MV*
  • 5. Principes de Conception Clefs •  Principes clefs qui vous aideront à concevoir une application mobile qui correspond aux « meilleures pratiques », minimise les coûts et besoins de maintenance, et favorise l’utilisabilité et extensibilité •  Séparation des préoccupations •  Principe de responsabilité unique •  « Don’t Repeat Yourself » (DRY) •  Ne pas commencer par une conception évoluée •  Privilégier la composition sur l’héritage Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 5 Conception d’Applications Mobiles
  • 6. P1: Séparation des Préoccupations « Separation of Concerns » •  Diviser votre application en parties distinctes dont les fonctionnalités se chevauchent le moins possible •  Avantages •  Optimisation d’un module ou fonctionnalité indépendamment des autres •  Si un module est défaillant, il n’impactera pas les autres •  Rend l’application plus facile à comprendre et concevoir •  Facilite la gestion des systèmes complexes indépendants Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 6 Conception d’Applications Mobiles
  • 7. P2: Principe de Responsabilité Unique « Single Responsibility Principle » •  Chaque composant ou module doit être responsable uniquement d’une fonctionnalité ou caractéristique •  Avantages •  Rend les composants plus cohésifs (unis, rassemblés) •  Rend l’optimisation des composants plus facile si une caractéristique ou fonctionnalité a changé Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 Conception d’Applications Mobiles
  • 8. P3: Pas de Répétition « Don’t Repeat Yourself (DRY) » •  Il ne faut pas dupliquer une fonctionnalité dans une application sur plusieurs modules •  Avantages •  Faciliter l’implémentation des changements •  Augmenter la clarté •  Renforcer la consistance du code Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 Conception d’Applications Mobiles
  • 9. P4: Ne pas Commencer par une Conception Évoluée «Avoid doing a big design upfront » •  Si vos besoins ne sont pas clairs, ou s’il y’a des risques d’évolution de la conception dans le temps, éviter de fournir trop d’effort pour la conception au début •  Faites en sorte que votre conception progresse avec votre application Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 Conception d’Applications Mobiles
  • 10. P5: Privilégier la Composition à l’Héritage «Composition over Inheritance » •  Utiliser si possible la composition à la place de l’héritage quand vous voudrez réutiliser une fonctionnalité •  Avantages •  L’héritage augmente la dépendance entre les classes parentes et filles •  Limitation de la réutilisation des classes filles •  Réduire la hiérarchie de l’héritage, qui peut s’avérer pénible Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 Conception d’Applications Mobiles
  • 11. Mais aussi… •  Grouper les types de composants différents dans des couches logiques •  Faire en sorte que les design patterns d’une couche soient consistants •  Ne pas utiliser de design patterns incompatibles dans une même couche •  Ne pas mixer plusieurs types de composants dans la même couche logique •  Déterminer le type de couches que vous voulez renforcer •  Utiliser l’abstraction pour implémenter le couplage faible entre les couches •  Éviter de surcharger les fonctionnalités d’un composant •  Comprendre comment est-ce que les composants communiquent les uns avec les autres •  Garder des formats de données consistantes dans une couche •  Séparer le plus possible le code non fonctionnel (sécurité, logging…) du code métier •  Être consistant dans les conventions de nommage •  Établir des standards pour la gestion des exception Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 11 Conception d’Applications Mobiles
  • 12. LES PATRONS DE CONCEPTION MV* Chp3 : Architecture des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 1.  Principes de Conception Mobile 2.  Les Patrons de conception MV*
  • 13. Avantages « Les patrons de conception sont des solutions réutilisables pour des problèmes récurrents » •  Réutilisabilité •  Le modèle n’est pas couplé avec sa représentation, et peut donc être facilement réutilisé dans d’autres projets •  Testabilité •  Tester les couche indépendamment les unes des autres les rend plus faciles à gérer et à corriger •  Maintenabilité •  Il est plus facile de modifier une partie de l’application sans impacter les autres modules •  Compréhensibilité •  Le code est plus compréhensible et plus lisible Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 13 Les Patrons de Conception MV*
  • 14. MVC : Model – View – Controller Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 14 Les Patrons de Conception MV* Model ControllerView 1* Classes du Modèle Requête & RelaiComposants UI
  • 15. MVC : Couches •  Model •  Données de l’application •  Méthodes manipulant ces données •  Stockage et extraction de la BD •  View •  Représentation visuelle du modèle •  Gère les interactions utilisateur •  Contrôleur •  Accès aux données à partir du modèle •  Affichage des données dans les vues •  Intermédiaire entre plusieurs vues et modèles •  Observe les changements du modèle et les transmet à la vue Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 15 Les Patrons de Conception MV* M CV 1*
  • 16. MVC : Flux •  Les entrées utilisateur sont interceptées par le contrôleur •  Un contrôleur peut faire appel à plusieurs vues (erreur, succès…) •  Une vue n’a pas de visibilité sur son contrôleur •  Le contrôleur passe le modèle à la vue •  Le modèle a en général peu (ou pas) de méthodes (comportement) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 16 Les Patrons de Conception MV* M CV 1*
  • 17. MVC : Références •  La vue fait référence au modèle, mais pas le contraire •  La vue « observe » les changements du modèle, et s’y adapte •  Le contrôleur fait référence au modèle, le remplit et le passe à la vue •  La vue n’a pas de visibilité sur le contrôleur, mais fait référence et s’attend à un modèle particulier Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 17 Les Patrons de Conception MV* M CV 1*
  • 18. MVVM : Model – View – ViewModel Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 18 Les Patrons de Conception MV* Model ViewModelView 1*
  • 19. MVVM : Flux •  L’ entrée utilisateur commence par la vue et peut provoquer l’exécution d’un comportement ViewModel •  La vue et le modèle ne communiquent jamais •  ViewModel est un modèle fortement typé de la vue, qui est une réflexion exacte ou une abstraction de cette vue •  ViewModel et Vue sont toujours synchronisés •  Le modèle n’a aucune idée que le VM ou la vue existent Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 19 Les Patrons de Conception MV* M VMV 1*
  • 20. MVVM : Références •  Un VM n’a pas besoin de référencer la vue •  La vue est reliée à des propriétés du VM •  La vue n’a aucune idée sur l’existence du modèle •  Le VM et le modèle n’ont pas de référence ou visibilité sur la vue •  Le modèle n’a aucune idée de l’existence de la vue et du VM Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Les Patrons de Conception MV* M VMV 1*
  • 21. MVP : Model – View – Presenter Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21 Les Patrons de Conception MV* Model PresenterView 11
  • 22. MVP : Flux •  L’ entrée utilisateur commence par la vue, pas par le Presenter •  La vue invoque les commandes du Presenter, et le Presenter modifie la vue •  La vue et le modèle ne communiquent jamais •  Le Presenter est une couche d’abstraction de la vue •  Chaque vue a un Presenter qui lui est associé (1-to-1) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Les Patrons de Conception MV* M PV 11
  • 23. MVP : Références •  Le Presenter a besoin d’une référence vers la vue •  La vue a également une référence vers son Presenter •  C’est le Presenter qui va charger la vue à partir du modèle, pas le modèle Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 23 Les Patrons de Conception MV* M PV 11
  • 24. Références •  Microsoft Patterns and Practices, « Mobile Application Architecture Guide: Application Architecture Pocket Guide », 2008 •  Amir Jalilifard, « A belly dance in the holy lands of MVC, MVP and MVVM Patterns via Javascript », Code Project, 24 février 2015, url: http://www.codeproject.com/Articles/844789/A-Belly-Dance-in-Holy- Lands-of-MVC-MVP-and-MVVM-Pa •  Ketan Thakkar, « Difference between MVC vs. MVP vs. MVVM », 11 septembre 2014, url: http://blogs.k10world.com/technology/difference-between-mvc-vs- mvp-vs-mvvm/ •  Wiztelsys, « Design Patterns used in Mobile », 17 avril 2014, url = https://wiztelsys.com/blog/design-patterns-used-in-mobiles/ Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 24 Sites Web & Livres