Flex & Java @ TourJUG

  • 1,707 views
Uploaded on

ma présentation au TourJUG …

ma présentation au TourJUG
Retour d'expérience Flex & Java

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,707
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
52
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mon retour d’expérience &
  • 2. Ah, désolé je parle franglais… & &
  • 3. François Le Droff • “Just another Java guy” (doing Flex) – +11 ans d’expérience (web 1+n.0) – OSS geek : • membre de l’ossgtp, du ParisJUG, et TTFX • conférencier à MAX, et Solution Linux • blogs : – http://www.droff.com – http://blogs.adobe.com/francoisledroff/ • ledroff@adobe.com
  • 4. Et vous ? • Architectes ? Dévelopeurs ? • Vos attentes ? • Java ? – Spring, ORM, JEE ? – UnitTest (JUnit, TestNG, …) ? – Functional test (Selenium…) ? – Ant and/or Maven ? – Hudson, CC ? • Flex ? – ActionScript MXML – Flex Remoting, AMF – And may be • BlazeDS, LCDS • FlexUnit , RIATest, FlexMonkey • Cairngorm, Parsley, Mate, SpringActionScript
  • 5. Agenda • La plateforme: Flash, AIR, SDK Flex • Flex Java : la plomberie • Flex : Qualité, Architecture et usine logicielle « à la Java »
  • 6. La plateforme: Flash, AIR, SDK Flex ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 7. RIA : les défis techniques Web 1.0 application Rich Internet Application • Meilleurs temps de réponse • Bande Passante allégée • Charge Serveur diminuée • Moins de tests <page> <page> <page> <page> <data> <page> <page> <page> <application> ® 8 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 8. La révolution: le Flash Player un socle applicatif  Performances LaVM a été réécrite intégralement avec un compilateur JIT  ActionScript 3 (100% ECMA-262)  Support total sur Windows, Mac et Linux  Nouvelle machine virtuelle : AVM2 Conçuepour être rapide tout en consommant un minimum de mémoire Coexiste avec la AVM1  AVM2 est un projet Open Source  Avec la communauté Mozilla (projet Tamarin)  Text layout engine ® 9 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 9. La technologie Flash a +13 ans Animation Interactivité Rich Media Applications ® 10 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 10. Demonstrations Flash 10 ® 11 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 11. RIA sur le bureau  AIR ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 12. Une génération d’avance… Adobe AIR est un nouvel environnement d’exécution multi- plateformes qui permet aux développeurs d’utiliser leurs connaissances en développement d’applications web pour réaliser et déployer des applications riches sur le bureau. ® 13 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 13. Adobe AIR 1.5: Fonctionnalités Gestion du HTML avec WebKit Ressources locales Flash Player 10 Online/offline détection Intégration HTML/Flash/PDF Drag-and-drop Base de données SQLite Accès au Clipboard Background processing Gestion multi-fenêtres Custom window chrome Transparent applications More… ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 14. Online / Offline ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 15. Pourquoi les RIA sur le bureau ? Connection permanente Personnalisation Puissance du desktop Accès aux données Développement optimisé ® 16 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 16. Demonstrations next ® 17 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 17. Desktop Rich Internet Applications “On AIR” Deploying to the Desktop with AIR ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 18. Parleys.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 19. NY times ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 20. RIA sur le mobile  Flash Player 10  Michaël CHAIZE  mchaize@adobe.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 21. Deux problématiques à résoudre Web Standalone Browsing Applications YouTube.com ® 22 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 22. Open Screen Project ® 23 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 23. The RIA leader technology: Adobe Flex ADOBE FLEX 4 Action Script 3 MXML Free, open source framework Less time needed to develop Expressive, highly interactive apps X-platform, consistent deployment ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 24. Fonctionnement et déploiement Flex Builder IDE Browser Flex SDK Flash Player MXML ActionScript Flex Class Library SOAP HTTP/S AMF/S RTMP/S Web Server Compile XML/HTTP LC Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 25. Adobe Flex Builder 3 Flash Builder 4  IDE basé sur Eclipse  Code hinting, debuging  Vue Design WYSIWYG  Communication avec la CS3  Profilers de Memoire et Performance  SDK FB : Charting components, advanced datagrid  Support des tests ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 26. Fonctionnement et déploiement Flex Builder IDE Browser Flex SDK Flash Player MXML ActionScript Flex Class Library SOAP HTTP/S AMF/S RTMP/S Web Server Compile XML/HTTP LC Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 27. Adobe Flash Builder ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 28. Adobe Flash Builder 4 – Améliorer la productivité Nouveautés :  Expérience de coding  Support de modèles  Génération de gestionnaire d’événements  Génération des Getter/setter  Aide Tooltip en ASDoc  Vue de code par States  Package explorer  Développement agile  Tests unitaires  Builds en ligne de commande  Nouveau: Network monitor  Amélioration du debugging, profiling et ® du re-factoring Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 29. Adobe Flash Builder 4 – Intégration de services distants Nouveautés:  Introspection de services  Assistants d’introspection et tests d’appel d’opération  Génération automatique de code “exemple” SOA RES côté serveur P T  Vue du modèle de données  Configuration visuelle des services  Support du Data management et du paging  Génération de composants et binding  Génération automatique de formulaires  Data-binding par glisser - déposer ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 30. “In front of the glass” Flex ! “Behind the glass” Java ! ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 31. FLASH PLAYER FLEX 3 SDK LIVECYCLE DATA SERVICES Flash Player 9 ou 10 Gratuit, framework open source LiveCycle Data Services 12 ans d’existence Flex Builder basé sur Eclipse Data intensive applications 98% des PC équipés Framework MVC Meilleures perfs du marché Langage objet AS3 Accessibilité, Test unitaire, Debug Remoting architecture AVM2 JIT Compiler Component based programming Messaging and Data Push Open Source: Tamarin Dévelopment rapide Data Management Services Offline synchronization ® 32 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 32. Flex Back-end Integration ® 33 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 33. LiveCycle Data Services ES LiveCycle Data Services ES LiveCycle Data Services est un Service Data Management Adapters ensemble de composants J2Ee et d’API Data Synchronization LiveCycle utilisés pour: Off-line Applications  Créer des RIA qui manipulent énormément de Data Paging ColdFusion données avec un minimum de code, et accélérer la mise en production en RPC Services Hibernate programmant sur un modèle client-serveur. Web Service HTTP Service SQL  Intégrer une RIA avec des applications Remote Object Service existantes de l’infrastructure J2EE. JMS Messaging  Intégrer facilement des RIA avec des Publish & Subscribe Java processus documentaires LiveCycle. Collaboration  Développer des application collaboratives, Real Time Data Push Custom… gérer la synchronisation offline, gérer le Proxy Service temps réel. Web-tier Compiler  Générer des PDF à la demande qui intègrent Portal Deployment des éléments graphiques. RIA-PDF Generation ® 34 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 34. Qu’est ce que BlazeDS? BlazeDS est un sous-ensemble Open Source BlazeDS Service (LGPL) de LCDS. C’est une solution de Data Management Adapters Remoting et de HTTP messaging. Data Synchronization LiveCycle Off-line Applications Data Paging ColdFusion  Gratuit et Open Source RPC Services Hibernate Web Service  Ouverture du format d’échange de données AMF3 (Action Message Format) HTTP Service SQL Remote Object Service  Technologie de messaging sur le standard JMS HTTP (équivalent de Comet) Messaging  Builds certifiées, support entreprise disponible Publish & Subscribe Java (LC Community Edition) Collaboration Custom… Real Time Data Push Proxy Service Web-tier Compiler Portal Deployment RIA-PDF Generation ® 35 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 35. LCDS.war Un fichier LCDS.war est fourni pour démarrer vos projets Flex / Java.  Structure du WAR:  +WEB-INF/classes Pour placer ses classes Java  +WEB-INF/lib Contient les librairies Java de LCDS  +WEB-INF/flex Contient les fichiers XML de configuration  Remoting-config.xml Destinations vers les classes Java  Messaging-config.xml Destinations pour le messaging  Data-Management-config.xml Destinations vers les assemblers  Proxy-config.xml Destinations vers les services HTTP  Services-config.xml Configuration des canaux ® 36 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 36. Architecture Entreprise et Adobe Client Application Tier HTTP REST XML SOAP WebService AMF DATA RTMP MESSAGE CLOUD HTTP API Couche d’invocation des services GENERER ET CAPTURER GERER DES PDF L’INFORMATION Business Rules/ Service Tier Repository Service Container Core Services LIVECYCLE PROCESS Workflow MANAGEMENT PROTEGER GERER LE VOLUME & BAM L’INFORMATION DE DONNEES Interface de prestation de service Bases de Messages Resource Tier ERP LEGACY GEIDE données Queues ® 37 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 37. Flex : XML sur HTTP mx:HTTPService ® 38 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 38. Flex : SOAP mx:WebService ® 39 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 39. Flex et les serveurs d’application Java Remoting, Messaging et Data Management ® 40 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 40. Remoting mx: RemoteObject ® 41 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 41. Flex Remoting Service • Permet aux applications clients d’appeller à distance (remoting) des méthodes sur des objets déployés sur votre serveur d’application • L’information de Type est maintenue • Données compréssées et binaires • Bénéfices : – Facilité de programmation – et performance (pas de double transformation XML double) ®
  • 42. Flex Remoting 101 <mx:RemoteObject id="srv" destination="product"/> <mx:Button label="Get Data" click="srv.getProducts()"/> <mx:DataGrid dataProvider="{srv.getProducts.lastResult} "/> • remoting-config.xml <destination id="product"> <properties> <source>flex.samples.ProductService</source> </properties> </destination> • ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 43. Class Mapping & Serialization/Deserialization  L’annotation AS3 [RemoteClass] fournit l’information de mapping Product.as Product.java [RemoteClass(alias="flex.samples.Pr oduct")] public class Product { public class Product { public var id:int; private int id; public var name:String; private String name; public var description:String; private String description; public var price:Number; private double price; public var qtyInStock:int; private int qtyInStock; } // getters and setters } ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 44. Conversion de types Java/AS3 Java type ActionScript type (AMF 3) Java type ActionScript type (AMF 3) java.lang.String String java. math.BigInteger String java.math.BigDecimal String java.lang.Boolean, boolean Boolean Date - Dates are sent in the Coordinated Universal Time (UTC) time zone. Clients java.util.Calendar Int - If value < 0xF0000000 || value > and servers must adjust time accordingly 0x0FFFFFFF, the value is promoted to for time zones. java.lang.Integer, int Date - Dates are sent in the UTC time Number due to AMF encoding requirements. java.util.Date zone. Clients and servers must adjust time accordingly for time zones. int - If i < 0xF0000000 || i > 0x0FFFFFFF, java.lang.Short, short the value is promoted to Number. java.util.Collection (for mx.collections.ArrayCollection example, java.util.ArrayList) Int - If i < 0xF0000000 || i > 0x0FFFFFFF, java.lang.Byte, byte[] the value is promoted to Number. java.lang.Object[] Array Object (untyped). For example, a java.lang.Byte[] flash.utils.ByteArray java.util.Map java.util.Map[] is converted to an array (of objects). java.lang.Double, double Number java.util.Dictionary Object (untyped) java.lang.Long, long Number org.w3c.dom.Document XML object java.lang.Float, float Number null null Typed Object - Objects are serialized by java.lang.Character, char String using JavaBean introspection rules and java.lang.Object (other than also include public fields. Fields that are previously listed types) static, transient, or nonpublic, as well as java.lang.Character[], char[] String bean properties that are nonpublic or static, are excluded. 45
  • 45. Mapping personnalisé entre ActionScript et Java • Si les mécanismes standards de sérialisation et de désérialisation de données entre ActionScript (client) et Java (server) ne sont pas satisfaisants: – Vous pouvez implémenter l’interface ActionScript sur le client grâce à flash.utils.Iexternalizable – Vous pouvez créer la correspondance Java et écrire votre propre schéma de sérialisation avec java.io.Externalizable
  • 46. Messaging mx: Producer mx:Consumer ® 47 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 47. Publish/Subscribe Messaging Livecycle Data Services Client A Message Endpoint Service Client B RTMP Client C AMF HTTP Publisher Subscriber 48
  • 48. Demo: Chat 49
  • 49. Messaging - Data Push LiveCycle Data Services Messaging Adapter X System X Message JMS Endpoint JMS Adapter Services Provider Messaging Adapter Y System Y RTMP AMF HTTP Publisher Subscriber 50
  • 50. Data Management ® 51 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 51. Travailler avec des données: Le mode traditionnel du HTML (page) Persistence Solutions: Hibernate JDOs EJB 3 Others… data data  Le client est souvent utiliser pour capturer de la données et l’affichage  Le client ne conserve pas une version de la donnée  Pas de réelle manipulation de données côté client  Les données doivent être snchronisées entre le middle-tier et la base ® 52 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 52. Le modèle de la RIA data data data  Le client possède une version de la donnée  Manipulation riche des données côté client  La donnée doit être synchronisée entre le tiers client, le middle-tier ET entre le middle-tier et la base ® 53 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 53. L’approche de LiveCycle Data Services Data Service data data Client-Side API:  Flags changes (create, update, delete)  Maintient une version d’origine de la donnée pour appliquer la stratégie de locking  Envoie une liste de changement à LCDS dans un groupe de messages  Gère les conflits, les accès concurrents ® 54 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 54. L’approche de LiveCycle Data Services Object Hibernate Data Service JDBC ColdFusion data data Custom Data Service:  Désérialise la liste des changements qui proviennent du client  Sérialise les données avant de les données au client  Passe la liste des changement au bon adapter  Notifie les clients qui sont abonnés à la destination Adapter:  Effectue les changements  Identifie les conflits  Passe les résultats à Data Services ® 55 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 55. Data Services LiveCycle Data Services JDBC RDBMS Client A Adapter Endpoint Data Object Adapter DAO Service Client B Hibernate Adapter Hibernate CFC Client C Adapter ColdFusion ® 56 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 56. LiveCycle Data Services 3.0 Themes 1. Most productive and powerful solution for building data driven applications using Fiber (aka LCDS Rich Model Driven Development) 2. Most scalable and reliable infrastructure for web- based real time messaging applications 3. Open platform providing tight integration with existing Enterprise solutions
  • 57. Code-Driven Development Code •UI controls / formatters / styles • Calculated fields • Validation Rules • Variants (conditional properties) • Localization • Security • Data Retrieval Logic (paging, lazy loading) • Data Synchronization Logic Model •Basic Data Description Model Server-side code Client-side code
  • 58. Fiber: LCDS Model-Driven Development Code • Ad-hoc customization • View composition • External business/validation logic Model • Rich data model (data and behaviors) • Calculated fields • Validation Rules • Variants (conditional properties) • Localization • Security • UI hints/defaults: controls, formatters, styles Model Server-side code Client-side code Model includes enough information to derive data retrieval, persistence, and synchronization logic
  • 59. LCDS Model-Driven Development Model authoring and deployment Model-aware gestures and artifacts (ie. Model-driven forms) Tools Model Code Runtime Gen Code gen of boilerplate code (value Model-aware runtimes support dynamic objects, stubs, etc.) model interpretation (no code gen needed)
  • 60. LCDS Model Driven Development Benefits Productivity: Less code to write • No persistence code or data sync code • Value objects and service stubs are automatically generated Maintainability: Less code to maintain • Changes to the model are automatically propagated Consistency • Between client and server (for example, constraints and validation rules are defined in the model, not duplicated using different languages in the client and the server) • Across views (for example, UI controls, styles, and validation rules are defined in the model, not duplicated across different views) Approachability • No code to write to implement complex capabilities such as persistence, synchronization, paging, lazy loading, offline, etc. Innovation: • Offline and client synchronization capabilities • Model is language independent and can be leveraged by different client technologies and tools (Flex, PDF, etc)
  • 61. Real Time Platform Existing in LCDS 2.6 • Publish/Subscribe messaging infrastructure • JMS integration • Scalable channels: RTMP and NIO streaming / long polling • Per-client QoS New in LCDS 3 • Reliable messaging • Throttling • Edge Server
  • 62. Channels ® 63 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 63. Les Channels dans LiveCycle Data Services ES 64
  • 64. Quels canaux utiliser pour le temps réel ? Channel Description Les Plus Les Moins Poll roundtrip Poll ~ 1 min overhead AMF Server parks poll Works with firewalls Long Polling Servlet API blocking until data available IO HTTP proxies can Server pushes No polling overhead swallow messages Streaming AMF infinite messages Servlet API (HTTP Chunk) Works with firewalls blocking IO AMF Messages/ Works with firewalls Simple polling request/response Piggyback Enabled piggybacking 65
  • 65. Quels canaux utiliser pour le temps réel ? (LCDS) Channel Description Les Plus Les Moins RTMP (in a ChannelSet with fallback to Single duplex Immediate notification Non standard port NIO AMFChannel configured to connection when a client is closed blocked by firewalls Long Poll) Better scalability and no NIO AMF Uses an NIO server configured upper bound Requires more network Long Polling and minimal HTTP on no. of parked poll configuration (no fallback) stack 1000s of clients requests NIO Streaming AMF Better scalability and no Uses an NIO server (in a ChannelSet followed configured upper bound and minimal HTTP Same as above by the polling AMFChannel on the number of stack 1000s of clients below for fallback) streaming connections NIO AMF Uses an NIO server Simple polling and minimal HTTP Same as above Same as above Piggyback Enabled stack 1000s of clients 66
  • 66. Adobe Flash Catalyst ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 67. Le modèle de composant de Flex 3 Component / Skin Graphics Layout Animation Parts States Behavior Logic Data ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 68. Le modèle de composant de Flex 4 : MVC ActionScript MXML Component Skin Graphics Behavior Layout Logic CSS Animation Data properties Parts States Séparation complète de l’apparence et des fonctionnalités ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 69. Format FXG Design interactif Projet FXP Flash Builder 4 Prototypage Prototypage Format FXG Maquette ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 70. FXG (XML Graphics for Flex) <s:Rect y="141.5" x="268.5" height=”50" width=”50"> <s:fill> <s:SolidColor color="#bf8f8f"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 71. FXG (XML Graphics for Flex) <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="141.5" x="268.5" height="333" width="281"> <s:fill> <s:SolidColor color="#bf8f8f"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 72. FXG (XML Graphics for Flex) <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="-35.5" x="290.5" height="333" width="281"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x990000" alpha="1" ratio="0" /> <s:GradientEntry color="0xD5D5D5" alpha="1" ratio="1" /> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 73. FXG (XML Graphics for Flex) <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="-35.5" x="290.5" height="333" width="281"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x990000" color.down=“0x77DD66” alpha="1" ratio="0" /> <s:GradientEntry color="0xD5D5D5" color.down=“0x1100DD” alpha="1" ratio="1" /> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 74. Workflow Flash et Flash Builder  Depuis Flash CS3 (Flex Component Toolkit)  Export au format SWC et intégration dans Flex Builder  Workflow toujours possible avec Flash Builder ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 75. Demo ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 76. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 77. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 78. Flex : Qualité, Architecture et usine logicielle « à la Java »
  • 79. La Qualité du code • Retour sur la Qualité Logicielle Java – http://www.slideshare.net/francoisledroff/soire-qualite-logicielle-paris-jug-tour- dhorizon-des-outils-open-source • Avant de voir comment l’appliquer aux projets Flex
  • 80. Automatisation du processus de construction en Flex
  • 81. Automatisation du processus de construction en Flex • Ant : – FlexAntTasks • Ant : Antennae • Maven : • Flex-mojos • Alternatives : • ServeBox (Projet Français) • and Israfil • Archetypes – FlexMojos V3 est un projet sonatype – Sonatype et Adobe travaillent ensemble pour le support FB dans m2eclipse
  • 82. Automated docs and reports
  • 83. Automatisation du processus de construction en Flex: gestion des dépendances
  • 84. Managing Dependencies • Maven (or Ant + Ivy)
  • 85. Managing Dependencies
  • 86. Nexus, gestionnaire de référentiel d’artefact de construction • Externalisez vos artefacts (jar, war, ear, swf, swc…) de votre GCL • Publier les sur un repository commun d’entreprise
  • 87. Stratégie des test unitaires en Flex
  • 88. Stratégie des test unitaires en Flex • Retour sur nos « meilleures pratiques » de test – http://www.jroller.com/francoisledroff/entry/automated_testing_and_quality_control • Test unitaires : FlexUnit • Les bouchons de test • Couverture de test : FlexCover • Les Tests fonctionnels
  • 89. Our Agile Testing Principles. Test Everything –Frameworks, Accept and Minimize Integration etc. Untestable Code Test Concerns Separately Test Many Things At Once
  • 90. Flex - Testing Concerns Separately AccidentWizardView Presentation Graphic Layer VehicleDescriptorView MXML UIComponent DisplayObject Presentation Behavior Layer AccidentWizardPM VehicleDescriptorPM Presentation Models Utilities Customer Domain / Application Layer CarCompany Utilities / Domain Models Application Models Factories IncidentDescriptor Persistence Layer SaveReportCommand Commands / Brokers / DataModels Translators / Utilities IncidentReportTranslator Delegates “saveReport” Persistence Definition Layer RemoteObject Network Access File Access LocalConnection
  • 91. FlexUnit
  • 92. Flex Unit • http://opensource.adobe.com/wiki/display/flexunit/FlexUnit
  • 93. FlexUnit4 • FlexUnit 4 (merge de Fluint et FlexUnit0.9) • très similaire à JUnit 4 • Intégré à Flash Builder 4 Beta
  • 94. FlexUnit4 • FlexUnit 4 (suite cf. http://docs.flexunit.org/index.php?title=FlexUnit4FeatureOverview )
  • 95. FlexUnit within your Build • FlexUnit within your build
  • 96. Les bouchons de test Flex
  • 97. Au delà de FlexUnit : Les bouchons Hamcrest  http://github.com/drewbourne/hamcrest-as3#readme  containing constraints or predicates allowing 'match' rules to be defined declaratively  hasProperty - checks that a property exists and, optionally, that it matches the provided matcher  hasItem, hasItems - test a collection contains elements  Mock Frameworks  mock-as3: http://code.google.com/p/mock-as3  Used by Adobe Consulting  Mock4AS: http://code.google.com/p/mock4as  Mockito flex
  • 98. Flex Unit Tests Code Coverage
  • 99. Code Coverage – FlexCover http://code.google.com/p/flexcover
  • 100. Flexcover – Emma report -headless agent for CI builds http://www.eyefodder.com/blog/2009/07/flex_code_coverage_process_par.shtml#more
  • 101. FlexUnit & Flexcover – in Continuous Integration
  • 102. Flex Functional Testing
  • 103. Flex Functional Testing • Functional Testing – RiaTest http://www.riatest.com/video/getting-started/index.html
  • 104. Flex Functional Testing • Functional Testing (suite) – Selenium for Flash – FlexMonkey (http://www.gorillalogic.com/flexmonkey ) – Other commercial products based on Adobe’s Flex Automation API : – Mercury QTP – IBM Rational Functional Tester – RIATest • Load and Stress Testing – JMeter, OpenSTA, Grinder – Adobe’s Data Services Stress Testing Framework – Other commercial (Flex/AMF specific) products : – NeoLoad – WebLoad
  • 105. Analyse statique de code Flex
  • 106. Analyse statique de code: FlexPMD • FlexPMD • Ce projet est hébergé sur opensource.adobe.com sous license BSD. • Comme son nom l'indique, ce projet suit la trace de PMD pour Java, l'idée est donc de: • détecter des "pattern" et "anti-pattern" dans l'arbre syntaxique du code ActionScript et MXML – définir ces patterns et anti-pattern dans des règles FlexPMD • pouvoir automatiser cette détection à travers le build (ou les outils de développement) • pouvoir créer facilement des ensembles de règles (des "rulesets") spécifiques aux besoins et aux contraintes de vos projets – et ensuite surveiller le respect de ces règles de façon automatique et systématique
  • 107. Analyse statique de code: FlexPMD • FlexPMD dans cette première mouture vient avec 83 règles, ces règles vous permettront de réaliser l'audit de code Flex à la recherche • de code mortCode mort : Parametre, variable locale, fonction privée, attribut non-utilisé • Taille de code: Complexité cyclomatique, fonction trop longue, trop d’attribut, trop de functions • MXML: Bloc script trop long • Conventions de nommage (variable, classe, casse des packages) • de mauvaise pratique architecturale – dans l'utilisation de cairngorm – dans la gestion d'évènement – dans le référencement de composants visuels dans les modèles – ou de mauvaise encapsulation
  • 108. Analyse statique de code: FlexPMD • FlexPMD – Personalisable selon vos besoins • http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-ruleset- creator.html – Extensible: créer vos propres règles
  • 109. Analyse statique de code: FlexPMD • FlexPMD – Intégré • Mac automator : – http://www.youtube.com/watch?v=C5DBuZzHLwc • Tâche Ant • Plugin Maven
  • 110. • FlexPMD within your build
  • 111. Analyse statique de code: FlexPMD • FlexPMD Eclipse plugin • http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Eclipse+plugin
  • 112. Analyse statique de code: FlexCPD • FlexCPD : Détection de copié-collé
  • 113. Analyse statique de code: FlexMetrics • FlexMetrics
  • 114. Intégration continue
  • 115. Intégration continue http://www.octo.com/Java-Productivity-Primer.10/Publications
  • 116. les contrôles industrialisés • mise en place des règles de style de code • rapport de tests unitaires • rapport de la couverture de ces tests • contrôle automatisé des règles, des pattern et anti-pattern de code par outils d’analyse statique de code
  • 117. Intégration continue: Hudson
  • 118. Hudson Quality reports – Automated Unit and functional test • TestNG • FlexUnit • FlexMonkey and or RIATest – Automated code Coverage reports • Cobertura • FlexCover – Automated code analysis • PMD • FlexPMD
  • 119. Dashboard Qualité Flex
  • 120. Hudson Flex unit Dashboard
  • 121. Dashboard Qualité : Sonar • Présentation de Sonar – http://www.parisjug.org/xwiki/bin/download/Meeting/20090915/2009-15-09-Sonar.pdf • Sonar : – http://docs.codehaus.org/display/SONAR/Documentation
  • 122. Dashboard Qualité : Sonar • Sonar
  • 123. Dashboard Qualité : Sonar • Sonar Flex plugin – http://docs.codehaus.org/display/SONAR/Sonar+Flex+Plugin
  • 124. Questions ?