Fondamentaux d'architecture d'une application Flex Adobe eSeminar - 06/06/08 David Deraedt Centre Regart.net
Introduction <ul><li>Comment organiser le code d'une application Flex ? Ne sont pas concernés : </li></ul><ul><ul><li>Démo...
Contraintes <ul><li>Constat : Maintenance > Développement initial Méthodes agiles = cycles courts, itératifs Faciliter : <...
Bonnes pratiques <ul><li>Séparer les responsabilités </li></ul><ul><ul><li>Dans le code </li></ul></ul><ul><ul><li>Dans l'...
Mise en oeuvre <ul><li>POO </li></ul><ul><ul><li>Encapsulation </li></ul></ul><ul><ul><li>Polymorphisme </li></ul></ul><ul...
Rich Internet Application <ul><li>Architecture 3 tiers         </li></ul>  <ul><li>Architecture RIA: </li></ul><ul><ul><li...
Rich Internet Application <ul><li>Répartition des rôles Client / Serveur </li></ul><ul><ul><li>Serveur d'application = règ...
Rich Internet Application
Rich Internet Application <ul><li>Le client (RIA Flex) communique avec : </li></ul><ul><ul><li>L'API du service (parfois, ...
Communication <ul><li>Avec Flex, deux familles d'outils : </li></ul><ul><ul><li>Communication temps réel </li></ul></ul><u...
HTTPService <ul><ul><li>Requêtes HTTP(s) </li></ul></ul><ul><ul><li>URLencoding, (couple identifiant/valeur voire XML) </l...
WebService <ul><li>Au sens SOAP </li></ul><ul><ul><li>Envoie / reçoit SOAP (XML) </li></ul></ul><ul><ul><li>Web Service De...
RemoteObject <ul><ul><li>Remoting : AMF : ActionScript Message Format = AS binaire </li></ul></ul><ul><ul><li>HTTP(S) ou p...
RemoteObject <ul><li>Inconvéniant : Nécessite une passerelle AMF3 côté serveur (Sérialisation / Désérialisation AMF3) Solu...
 
Architecture côté Flex <ul><li>A priori : hiérarchie de composants MXML. Sommet de la pyramide = Document principal (Appli...
Indépendance des composants <ul><li>Permise par 2 Mécanismes fondamentaux : </li></ul><ul><ul><li>DataBinding = Mise à jou...
Limites du framework Flex <ul><li>Cas classique : le document principal gère toute la logique de l'application !  Conséque...
Un MVC côté Flex <ul><li>  </li></ul>
Un MVC côté Flex : Le modèle <ul><ul><li>Stocke les données </li></ul></ul><ul><ul><li>Ne sait pas comment elles sont repr...
Un MVC côté Flex : Le modèle <ul><li>  </li></ul>
Un MVC côté Flex : Le contrôleur <ul><ul><li>Cerveau de l'application </li></ul></ul><ul><ul><li>Logique entre vue et modè...
Un MVC côté Flex : Le contrôleur <ul><li>  </li></ul>
Un MVC côté Flex : Le contrôleur <ul><li>Problème de fond : Comment faire remonter les événements vers un Contrôleur ? </l...
Un MVC côté Flex : Le contrôleur <ul><li>  Parfois, besoin de mettre à jour une vue dans une commande </li></ul><ul><ul><l...
Un MVC côté Flex : Le contrôleur <ul><li>  </li></ul>
La couche métier <ul><ul><li>Les commandes doivent communiquer avec le Service </li></ul></ul><ul><ul><li>Risque de coupla...
La couche métier <ul><li>  </li></ul>
Vue  d'ensemble
Remarques <ul><li>Peut paraître abstrait et compliqué, mais </li></ul><ul><ul><li>Beaucoup de classes sont très simples </...
Les frameworks d'architecture <ul><li>Ce sont des bibliothèques tierces (.swc) </li></ul><ul><ul><li>Pas indispensables......
Cairngorm <ul><ul><li>Framework d'architecture Flex </li></ul></ul><ul><ul><li>Créé par Adobe Consulting </li></ul></ul><u...
Cairngorm <ul><li>Problèmes </li></ul><ul><ul><li>Difficile de faire communiquer Commandes et vues </li></ul></ul><ul><ul>...
PureMVC <ul><ul><li>Framework AS3 (pas Flex, ni Flash) </li></ul></ul><ul><ul><li>Créé par Cliff Hall </li></ul></ul><ul><...
PureMVC <ul><li>Problèmes </li></ul><ul><ul><li>Pas de DataBinding entre Modèle et Vues </li></ul></ul><ul><ul><li>Modèle ...
Conclusion <ul><ul><li>Privilégier une approche pragmatique </li></ul></ul><ul><ul><li>Ne pas essayer d'appliquer une solu...
Questions / Réponses <ul><li>David Deraedt - Flex My Day http://www.dehats.com Centre de formation Regart.net http://www.r...
Upcoming SlideShare
Loading in...5
×

Fondamentaux d'architecture d'une application Flex

4,392

Published on

eSeminar for Adobe France, June 2008. (French)

Published in: Education, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,392
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
116
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fondamentaux d'architecture d'une application Flex

  1. 1. Fondamentaux d'architecture d'une application Flex Adobe eSeminar - 06/06/08 David Deraedt Centre Regart.net
  2. 2. Introduction <ul><li>Comment organiser le code d'une application Flex ? Ne sont pas concernés : </li></ul><ul><ul><li>Démonstrations </li></ul></ul><ul><ul><li>Exemples </li></ul></ul><ul><ul><li>Très petites applications </li></ul></ul><ul><li>Généralement : </li></ul><ul><ul><li>Enjeu commercial </li></ul></ul><ul><ul><li>Utilisateurs &quot;réels&quot; </li></ul></ul><ul><ul><li>Durée de vie importante </li></ul></ul><ul><ul><li>Travail en équipe (?) </li></ul></ul>
  3. 3. Contraintes <ul><li>Constat : Maintenance > Développement initial Méthodes agiles = cycles courts, itératifs Faciliter : </li></ul><ul><ul><li>Modifications </li></ul></ul><ul><ul><li>Tests / Débogage </li></ul></ul><ul><ul><li>Travail en équipe </li></ul></ul><ul><ul><li>Productivité </li></ul></ul>
  4. 4. Bonnes pratiques <ul><li>Séparer les responsabilités </li></ul><ul><ul><li>Dans le code </li></ul></ul><ul><ul><li>Dans l'équipe </li></ul></ul><ul><li>Limiter le couplage </li></ul><ul><ul><li>Indépendance </li></ul></ul><ul><ul><li>Modularité </li></ul></ul><ul><li>Partager </li></ul><ul><ul><li>Informations (Méthodologie et terminologie, documents) </li></ul></ul><ul><ul><li>Outils (factorisation, mutualisation) </li></ul></ul>
  5. 5. Mise en oeuvre <ul><li>POO </li></ul><ul><ul><li>Encapsulation </li></ul></ul><ul><ul><li>Polymorphisme </li></ul></ul><ul><ul><li>Design patterns </li></ul></ul><ul><ul><li>Architecture patterns </li></ul></ul><ul><li>Contexte technologique </li></ul><ul><ul><li>Flex = RIA = Couche présentation d'une architecture 3 tiers </li></ul></ul>
  6. 6. Rich Internet Application <ul><li>Architecture 3 tiers        </li></ul>  <ul><li>Architecture RIA: </li></ul><ul><ul><li>Client s'exécute sur poste client </li></ul></ul><ul><ul><li>Client conscient de son état, &quot;stateful&quot; </li></ul></ul><ul><ul><li>Le client connaît les détails d'implémentation du serveur </li></ul></ul><ul><ul><li>Architecture plus &quot;client / serveur&quot; </li></ul></ul>Rich Internet Application
  7. 7. Rich Internet Application <ul><li>Répartition des rôles Client / Serveur </li></ul><ul><ul><li>Serveur d'application = règles métiers </li></ul></ul><ul><ul><li>Client riche = relation à l'utilisateur </li></ul></ul><ul><li>Quelle architecture côté serveur ? </li></ul><ul><ul><li>Présentation : Client Riche </li></ul></ul><ul><ul><li>Intégration : Business Objects via des Services </li></ul></ul><ul><ul><li>Persistance (ORM) : VOs / DTOs, DAO, ActiveRecord, ... </li></ul></ul>
  8. 8. Rich Internet Application
  9. 9. Rich Internet Application <ul><li>Le client (RIA Flex) communique avec : </li></ul><ul><ul><li>L'API du service (parfois, directement DAOs) </li></ul></ul><ul><ul><li>Les VOs / DTOs </li></ul></ul><ul><li>Mais de quelle manière ? </li></ul>
  10. 10. Communication <ul><li>Avec Flex, deux familles d'outils : </li></ul><ul><ul><li>Communication temps réel </li></ul></ul><ul><ul><li>Communication RPC asynchrone </li></ul></ul><ul><li>RPC : </li></ul><ul><ul><li>HTTPService </li></ul></ul><ul><ul><li>WebService </li></ul></ul><ul><ul><li>RemoteObject </li></ul></ul>
  11. 11. HTTPService <ul><ul><li>Requêtes HTTP(s) </li></ul></ul><ul><ul><li>URLencoding, (couple identifiant/valeur voire XML) </li></ul></ul><ul><ul><li>Script / Page ASP, JSP, PHP, ... </li></ul></ul><ul><ul><li>Services REST </li></ul></ul><ul><li>Les données échangées ne sont pas typées. => Intérêt limité à de &quot;petites&quot; tâches individuelles - Upload de fichiers, création de fichiers, Proxies, etc... ou => JSON (typage des données) </li></ul>
  12. 12. WebService <ul><li>Au sens SOAP </li></ul><ul><ul><li>Envoie / reçoit SOAP (XML) </li></ul></ul><ul><ul><li>Web Service Definition Language (WSDL) </li></ul></ul><ul><ul><li>Echanges de quelques données &quot;typées&quot; : </li></ul></ul><ul><ul><li>Types primitifs AS3 (Boolean, int, uint, Number, String, ...) </li></ul></ul><ul><ul><li>Quelques types complexes du top level (Array, Date) </li></ul></ul><ul><ul><li>Sérialisation/ Désérialisation côté Flex </li></ul></ul><ul><ul><li>Pas de type personnalisé </li></ul></ul>
  13. 13. RemoteObject <ul><ul><li>Remoting : AMF : ActionScript Message Format = AS binaire </li></ul></ul><ul><ul><li>HTTP(S) ou protocoles temps réél </li></ul></ul><ul><ul><li>AMF3 = AS3 (Flex), AMF0 = AS1 + AS2 </li></ul></ul><ul><ul><li>Spécifications ouvertes </li></ul></ul><ul><li>Avantages </li></ul><ul><ul><li>Performance (car binaire), cf Census </li></ul></ul><ul><ul><li>Confort de développement car... </li></ul></ul><ul><li>Données typées </li></ul><ul><ul><li>Types primitifs </li></ul></ul><ul><ul><li>Types complexes Top Level (selon passerelle) </li></ul></ul><ul><ul><li>Types personnalisés : Value Objects ([RemoteClass]) </li></ul></ul><ul><li>... = 100 % POO ! </li></ul>
  14. 14. RemoteObject <ul><li>Inconvéniant : Nécessite une passerelle AMF3 côté serveur (Sérialisation / Désérialisation AMF3) Solutions gratuites et OpenSource pour toutes technos </li></ul><ul><ul><li>J2EE : BlazeDS, WebORB, GraniteDS, LCDS(ES) </li></ul></ul><ul><ul><li>.NET : Fluorine, WebORB </li></ul></ul><ul><ul><li>PHP : AMFPHP, WebORB, SABREAMF </li></ul></ul><ul><ul><li>ROR : RubyAMF, WebORB </li></ul></ul><ul><ul><li>Python : PyAMF </li></ul></ul><ul><ul><li>Perl : ? </li></ul></ul>
  15. 15.  
  16. 16. Architecture côté Flex <ul><li>A priori : hiérarchie de composants MXML. Sommet de la pyramide = Document principal (Application, WindowedApplication, Module) Les composants : </li></ul><ul><ul><li>Représentent les données graphiquement </li></ul></ul><ul><ul><li>Reçoivent l'interaction utilisateur </li></ul></ul><ul><li>=> C'est la vue d'un MVC </li></ul><ul><ul><li>Ces vues peuvent elles être indépendantes ? </li></ul></ul><ul><ul><li>Qui va s'occuper du reste (logique de l'application) ? </li></ul></ul>
  17. 17. Indépendance des composants <ul><li>Permise par 2 Mécanismes fondamentaux : </li></ul><ul><ul><li>DataBinding = Mise à jour des données automatisée (Model -> View) </li></ul></ul><ul><ul><li>Evénements = Transmission l'interaction utilisateur (View -> Controller) </li></ul></ul><ul><li>Note : attribut source de la balise Script &quot;Code Behind&quot; purement formel => Insuffisant </li></ul>
  18. 18. Limites du framework Flex <ul><li>Cas classique : le document principal gère toute la logique de l'application ! Conséquence : </li></ul><ul><ul><li>Vues bien découplées </li></ul></ul><ul><ul><li>Reste de l'application très monolithique (code spaghetti) </li></ul></ul><ul><li>Conclusion: </li></ul><ul><ul><li>Reste la solution la plus simple pour de &quot;petites&quot; applications </li></ul></ul><ul><ul><li>Très vite limité </li></ul></ul>
  19. 19. Un MVC côté Flex <ul><li>  </li></ul>
  20. 20. Un MVC côté Flex : Le modèle <ul><ul><li>Stocke les données </li></ul></ul><ul><ul><li>Ne sait pas comment elles sont représentées </li></ul></ul><ul><ul><li>C'est l'état de notre application </li></ul></ul><ul><ul><li>Aucune logique (sauf accès aux données) </li></ul></ul><ul><ul><li>Souvent, simple liste de propriétés publiques </li></ul></ul><ul><ul><li>VOs, ArrayCollections </li></ul></ul><ul><ul><li>Tout est &quot;Bindable&quot; </li></ul></ul>
  21. 21. Un MVC côté Flex : Le modèle <ul><li>  </li></ul>
  22. 22. Un MVC côté Flex : Le contrôleur <ul><ul><li>Cerveau de l'application </li></ul></ul><ul><ul><li>Logique entre vue et modèle </li></ul></ul><ul><ul><li>Ecoute les événements diffusés par les vues </li></ul></ul><ul><ul><li>Met à jour le modèle </li></ul></ul><ul><ul><li>Ne connaît rien des vues </li></ul></ul><ul><li>Design pattern &quot;Command&quot; </li></ul><ul><ul><li>Déléguer les tâches à des objets (Commands) </li></ul></ul><ul><ul><li>Command = logique derrière une User Gesture </li></ul></ul><ul><ul><li>Permet de traiter chaque tâche comme un objet (historique, undo, ...) </li></ul></ul>
  23. 23. Un MVC côté Flex : Le contrôleur <ul><li>  </li></ul>
  24. 24. Un MVC côté Flex : Le contrôleur <ul><li>Problème de fond : Comment faire remonter les événements vers un Contrôleur ? </li></ul><ul><ul><li>Bubbling : s'appuie sur la display list (pas suffisant) </li></ul></ul><ul><ul><li>Remonter parent par parent : clone(), dispatchEvent(event) </li></ul></ul><ul><li>=> Difficile de faire quelque chose de propre ET standard </li></ul>
  25. 25. Un MVC côté Flex : Le contrôleur <ul><li>  Parfois, besoin de mettre à jour une vue dans une commande </li></ul><ul><ul><li>Problème : </li></ul></ul><ul><li>Le contrôleur ne doit rien savoir de la vue </li></ul><ul><ul><li>Solution : </li></ul></ul><ul><li>Diffuser un événement écouté par un tiers qui, lui connaît la vue. (View Helpers, View Controlers ...) </li></ul>
  26. 26. Un MVC côté Flex : Le contrôleur <ul><li>  </li></ul>
  27. 27. La couche métier <ul><ul><li>Les commandes doivent communiquer avec le Service </li></ul></ul><ul><ul><li>Risque de couplage entre les deux </li></ul></ul><ul><ul><li>Déléguer à un objet la communication avec le Service </li></ul></ul><ul><li>Le &quot;BusinessDelegate&quot; : </li></ul><ul><ul><li>Expose l'API du Service en AS3 </li></ul></ul><ul><ul><li>Encapsule l'implémentation de sa communication </li></ul></ul><ul><ul><li>Transmet le résultat à un Responder (Command) </li></ul></ul><ul><li>Avantages </li></ul><ul><ul><li>Découplage entre Command et Service </li></ul></ul><ul><ul><li>Typage, Intelliscence </li></ul></ul>
  28. 28. La couche métier <ul><li>  </li></ul>
  29. 29. Vue d'ensemble
  30. 30. Remarques <ul><li>Peut paraître abstrait et compliqué, mais </li></ul><ul><ul><li>Beaucoup de classes sont très simples </li></ul></ul><ul><ul><li>Toutes les classes sont courtes et lisibles </li></ul></ul><ul><ul><li>Pas nécessaire de tout utiliser </li></ul></ul><ul><ul><li>Concerne la majorité des applications </li></ul></ul><ul><ul><li>Méthodologie et terminologie commune </li></ul></ul><ul><ul><li>Adapté aux méthodes agiles / itératives </li></ul></ul><ul><li>De plus, des outils peuvent nous aider </li></ul><ul><ul><li>Frameworks d'architecture </li></ul></ul><ul><ul><li>Générateurs de code </li></ul></ul>
  31. 31. Les frameworks d'architecture <ul><li>Ce sont des bibliothèques tierces (.swc) </li></ul><ul><ul><li>Pas indispensables... </li></ul></ul><ul><ul><li>Mais difficile de faire sans ! </li></ul></ul><ul><li>Les deux cas les plus communs : </li></ul><ul><ul><li>Cairngorm </li></ul></ul><ul><ul><li>PureMVC </li></ul></ul>
  32. 32. Cairngorm <ul><ul><li>Framework d'architecture Flex </li></ul></ul><ul><ul><li>Créé par Adobe Consulting </li></ul></ul><ul><ul><li>S'inspire des core patterns J2EE </li></ul></ul><ul><ul><li>Le plus utilisé </li></ul></ul><ul><li>Implémentation </li></ul><ul><ul><li>Modèle : ModelLocator (Singleton) </li></ul></ul><ul><ul><li>Type d'événement : CairngormEvent </li></ul></ul><ul><ul><li>Pattern FrontController / Command </li></ul></ul><ul><ul><li>ServiceLocator </li></ul></ul><ul><ul><li>BusinessDelegate optionnel </li></ul></ul>
  33. 33. Cairngorm <ul><li>Problèmes </li></ul><ul><ul><li>Difficile de faire communiquer Commandes et vues </li></ul></ul><ul><ul><li>Risque de couplage des vues avec Cairngorm (event.dispatch()) </li></ul></ul><ul><ul><li>Pas terrible avec les Modules </li></ul></ul><ul><ul><li>Trop de Singletons => problèmes de tests </li></ul></ul><ul><ul><li>Documentation faible </li></ul></ul><ul><li>Notes </li></ul><ul><ul><li>Beaucoup de ressources sur le Web </li></ul></ul><ul><ul><li>Générateurs de code </li></ul></ul><ul><ul><li>Cairngorm Extensions (Universal Minds) </li></ul></ul>
  34. 34. PureMVC <ul><ul><li>Framework AS3 (pas Flex, ni Flash) </li></ul></ul><ul><ul><li>Créé par Cliff Hall </li></ul></ul><ul><ul><li>Existe pour d'autres technologies </li></ul></ul><ul><ul><li>Documentation de qualité et communauté active </li></ul></ul><ul><li>Implémentation </li></ul><ul><ul><li>Modèle : Proxies </li></ul></ul><ul><ul><li>Contrôleur : Façade et Commands </li></ul></ul><ul><ul><li>Evénements : Notifications </li></ul></ul><ul><ul><li>Vues : Mediator </li></ul></ul>
  35. 35. PureMVC <ul><li>Problèmes </li></ul><ul><ul><li>Pas de DataBinding entre Modèle et Vues </li></ul></ul><ul><ul><li>Modèle événementiel non standard </li></ul></ul><ul><ul><li>Plus de travail de Cairngorm </li></ul></ul><ul><li>Souffre de son éloignement vis-à-vis du framework Flex </li></ul>
  36. 36. Conclusion <ul><ul><li>Privilégier une approche pragmatique </li></ul></ul><ul><ul><li>Ne pas essayer d'appliquer une solution avant d'avoir rencontré le problème </li></ul></ul><ul><ul><li>Ne pas avoir peur de la quantité de code : cela peut s'avérer rentable au final </li></ul></ul><ul><ul><li>S'appuyer sur des techniques qui ont fait leurs preuves plutôt que de réinventer la roue </li></ul></ul><ul><ul><li>Connaître un minimum Flex avant d'essayer les frameworks d'architecture </li></ul></ul><ul><ul><li>Commencer par Cairngorm avant PureMVC </li></ul></ul>
  37. 37. Questions / Réponses <ul><li>David Deraedt - Flex My Day http://www.dehats.com Centre de formation Regart.net http://www.regart.net Remerciements Lovely Charts http://www.lovelycharts.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×