125
Mon retour d’expérience &

Flex & Java @ TourJUG

Embed Size (px)

DESCRIPTION

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

Citation preview

Mon retour d’expérience

&

Ah, désolé je parle franglais…

&

&

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/

[email protected]

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

Agenda• La plateforme: Flash, AIR, SDK Flex

• Flex Java : la plomberie

• Flex : Qualité, Architecture et usine logicielle « à la Java »

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

La plateforme: Flash, AIR, SDK Flex

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 8

RIA : les défis techniques

• Meilleurs temps de réponse• Bande Passante allégée• Charge Serveur diminuée• Moins de tests

Web 1.0 application Rich Internet Application

<page>

<page>

<page>

<page>

<page>

<page>

<page><application>

<data>

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 9

La révolution: le Flash Player un socle applicatif

Performances

La VM 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 : AVM2Conçue pour ê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

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 10

La technologie Flash a +13 ans

Animation

Interactivité

Rich Media

Applications

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 11

DemonstrationsFlash 10

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

RIA sur le bureau

AIR

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 13

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.

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe AIR 1.5: Fonctionnalités

Ressources locales

Online/offline détection

Drag-and-drop

Accès au Clipboard

Background processing

Gestion multi-fenêtres

Custom window chrome

Transparent applications

More…

Gestion du HTML avec WebKit

Flash Player 10

Intégration HTML/Flash/PDF

Base de données SQLite

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Online / Offline

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 16

Pourquoi les RIA sur le bureau ?

Connection permanente

Puissance du desktop Accès aux données Développement optimisé

Personnalisation

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 17

Demonstrations

next

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Desktop Rich Internet Applications “On AIR”

Deploying to the Desktop with AIR

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Parleys.com

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

NY times

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

RIA sur le mobile

Flash Player 10

Michaël CHAIZE

[email protected]

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 22

Deux problématiques à résoudre

Web Browsing

YouTube.com

Standalone Applications

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 23

Open Screen Project

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

The RIA leader technology: Adobe Flex

ADOBE FLEX 4Action 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.

Fonctionnement et déploiement

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTPRESTSOAP Web Services

Browser

Flash Player

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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.

Fonctionnement et déploiement

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTPRESTSOAP Web Services

Browser

Flash Player

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Builder

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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

Adobe Flash Builder 4 – Améliorer la productivité

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Builder 4 – Intégration de services distantsNouveautés:

Introspection de services Assistants d’introspection et tests d’appel

d’opération Génération automatique de code “exemple”

côté serveur

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

SOAP

REST

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

“In front of the glass” Flex !“Behind the glass” Java !

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 32

Flash Player 9 ou 10

12 ans d’existence

98% des PC équipés

Langage objet AS3

AVM2 JIT Compiler

Open Source: Tamarin

Gratuit, framework open source

Flex Builder basé sur Eclipse

Framework MVC

Accessibilité, Test unitaire, Debug

Component based programming

Dévelopment rapide

LiveCycle Data Services

Data intensive applications

Meilleures perfs du marché

Remoting architecture

Messaging and Data Push

Data Management Services

Offline synchronization

FLASH PLAYER FLEX 3 SDK LIVECYCLE DATA SERVICES

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3333

Flex Back-end Integration

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

LiveCycle Data Services ES

Créer des RIA qui manipulent énormément de données avec un minimum de code, et accélérer la mise en production en programmant sur un modèle client-serveur.

Intégrer une RIA avec des applications existantes de l’infrastructure J2EE.

Intégrer facilement des RIA avec des processus documentaires LiveCycle.

Développer des application collaboratives, gérer la synchronisation offline, gérer le temps réel.

Générer des PDF à la demande qui intègrent des éléments graphiques.

34

LiveCycle Data Services est un ensemble de composants J2Ee et d’API utilisés pour:

LiveCycle Data Services ESData Management

RPC Services

Messaging

ServiceAdapters

Data Synchronization

Off-line Applications

Data Paging

Web Service

HTTP Service

Remote Object Service

Publish & Subscribe

Collaboration

Real Time Data Push

Proxy Service

Web-tier Compiler

Portal Deployment

RIA-PDF Generation

LiveCycle

ColdFusion

Hibernate

SQL

JMS

Java

Custom…

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 35

Qu’est ce que BlazeDS?

Gratuit et Open Source Ouverture du format d’échange de données

AMF3 (Action Message Format) Technologie de messaging sur le standard

HTTP (équivalent de Comet) Builds certifiées, support entreprise disponible

(LC Community Edition)

BlazeDS est un sous-ensemble Open Source (LGPL) de LCDS. C’est une solution de Remoting et de HTTP messaging.

BlazeDSData Management

RPC Services

Messaging

ServiceAdapters

Data Synchronization

Off-line Applications

Data Paging

Web Service

HTTP Service

Remote Object Service

Publish & Subscribe

Collaboration

Real Time Data Push

Proxy Service

Web-tier Compiler

Portal Deployment

RIA-PDF Generation

LiveCycle

ColdFusion

Hibernate

SQL

JMS

Java

Custom…

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 36

LCDS.war

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

Un fichier LCDS.war est fourni pour démarrer vos projets Flex / Java.

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 37

Architecture Entreprise et Adobe

ClientApplicationTier

Service Tier Repository

Couche d’invocation des services

Interface de prestation de service

Service Container Core Services Business Rules/Workflow

Resource Tier ERP Bases de données LEGACY GEIDE Messages

Queues

HTTP REST XML SOAP WebService

GENERER ET GERER DES PDF

PROTEGERL’INFORMATION

CAPTURERL’INFORMATION

GERER LE VOLUMEDE DONNEES

LIVECYCLE PROCESS MANAGEMENT

& BAM

AMF DATA RTMP MESSAGE CLOUD HTTP API

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3838

Flex : XML sur HTTPmx:HTTPService

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3939

Flex : SOAPmx:WebService

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4040

Flex et les serveurs d’application JavaRemoting, Messaging et Data Management

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4141

Remotingmx: RemoteObject

®

• Permet aux applications clients d’appeller à distance (remoting) des méthodes sur des objets déployés survotre 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)

Flex Remoting Service

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

<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>

Flex Remoting 101

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Product.as[RemoteClass(alias="flex.samples.Pr

oduct")]public class Product {

public var id:int;public var name:String;public var description:String;public var price:Number;public var qtyInStock:int;

}

Class Mapping & Serialization/Deserialization

Product.java

public class Product {

private int id;

private String name;

private String description;

private double price;

private int qtyInStock;

// getters and setters

}

L’annotation AS3 [RemoteClass] fournit l’information de mapping

45

Java type ActionScript type (AMF 3)

java.lang.String String

java.lang.Boolean, boolean Boolean

java.lang.Integer, int

Int - If value < 0xF0000000 || value > 0x0FFFFFFF, the value is promoted to Number due to AMF encoding requirements.

java.lang.Short, short int - If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.

java.lang.Byte, byte[] Int - If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.

java.lang.Byte[] flash.utils.ByteArray

java.lang.Double, double Number

java.lang.Long, long Number

java.lang.Float, float Number

java.lang.Character, char String

java.lang.Character[], char[] String

Conversion de types Java/AS3

Java type ActionScript type (AMF 3)java. math.BigInteger Stringjava.math.BigDecimal String

java.util.Calendar

Date - Dates are sent in the Coordinated Universal Time (UTC) time zone. Clients and servers must adjust time accordingly for time zones.

java.util.DateDate - Dates are sent in the UTC time zone. Clients and servers must adjust time accordingly for time zones.

java.util.Collection (for example, java.util.ArrayList) mx.collections.ArrayCollection

java.lang.Object[] Array

java.util.MapObject (untyped). For example, a java.util.Map[] is converted to an array (of objects).

java.util.Dictionary Object (untyped)

org.w3c.dom.Document XML object

null null

java.lang.Object (other than previously listed types)

Typed Object - Objects are serialized by using JavaBean introspection rules and also include public fields. Fields that are static, transient, or nonpublic, as well as bean properties that are nonpublic or static, are excluded.

• 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

Mapping personnalisé entre ActionScript et Java

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4747

Messagingmx: Producermx:Consumer

48

Publish/Subscribe Messaging

MessageService

Livecycle Data Services

Endpoint

PublisherSubscriber

RTMPAMFHTTP

Client A

Client B

Client C

49

Demo: Chat

50

Messaging - Data Push

MessageServices

LiveCycle Data Services

Adapter Y

Adapter X

MessagingSystem Y

MessagingSystem X

EndpointJMSProvider

JMS Adapter

PublisherSubscriber

RTMPAMFHTTP

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 5151

Data Management

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Travailler avec des données:Le mode traditionnel du HTML (page)

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

data data

Persistence Solutions:

HibernateJDOsEJB 3Others…

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Le modèle de la RIA

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

data data data

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

L’approche de LiveCycle Data Services

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

data

DataService

data

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

L’approche de LiveCycle Data Services

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

data data

JDBC

Object

Hibernate

ColdFusion

DataService

Custom

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Data Services

56

LiveCycle Data Services

DataService DAOObject

Adapter

HibernateAdapter

JDBCAdapter

Hibernate

RDBMS

CFCAdapter ColdFusion

Endpoint

Client A

Client B

Client C

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

Code•UI controls / formatters / styles• Calculated fields• Validation Rules• Variants (conditional properties)• Localization• Security• Data Retrieval Logic (paging, lazy loading)• Data Synchronization Logic

Code-Driven Development

Model•Basic Data Description

Model Server-side code Client-side code

Code• Ad-hoc customization• View composition• External business/validation logic

Fiber: LCDS Model-Driven Development

Model• Rich data model (data and behaviors)• Calculated fields• Validation Rules• Variants (conditional properties)• Localization• Security• UI hints/defaults: controls, formatters, styles

Model includes enough information to derive data retrieval, persistence, and synchronization logic

Model Server-side code Client-side code

Model

Tools

RuntimeCode Gen

Model-aware runtimes support dynamic model interpretation (no code gen needed)

Model authoring and deploymentModel-aware gestures and artifacts (ie. Model-driven forms)

LCDS Model-Driven Development

Code gen of boilerplate code (value objects, stubs, etc.)

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 propagatedConsistency• 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)

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

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 6363

Channels

64

Les Channels dans LiveCycle Data Services ES

65

Quels canaux utiliser pour le temps réel ?

Channel Description Les Plus Les Moins

AMFLong Polling

Poll ~ 1 minServer parks poll

until data availableWorks with firewalls

Poll roundtrip overhead

Servlet API blocking IO

Streaming AMFServer pushes

infinite messages(HTTP Chunk)

No polling overhead

Works with firewalls

HTTP proxies can swallow messages

Servlet API blocking IO

AMF Simple polling

Piggyback Enabled

Messages/ request/response

piggybacking

Works with firewalls

66

Quels canaux utiliser pour le temps réel ? (LCDS)

Channel Description Les Plus Les Moins

RTMP(in a ChannelSet with fallback to NIO AMFChannel configured to

Long Poll)

Single duplex connection

Immediate notification when a client is closed

Non standard port blocked by firewalls

NIO AMFLong Polling(no fallback)

Uses an NIO server and minimal HTTP

stack 1000s of clients

Better scalability and no configured upper bound

on no. of parked poll requests

Requires more network configuration

NIO Streaming AMF(in a ChannelSet followed

by the polling AMFChannel below for fallback)

Uses an NIO server and minimal HTTP

stack 1000s of clients

Better scalability and no configured upper bound

on the number of streaming connections

Same as above

NIO AMF Simple polling

Piggyback Enabled

Uses an NIO server and minimal HTTP

stack 1000s of clientsSame as above Same as above

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Catalyst

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

BehaviorLogicData

Le modèle de composant de Flex 3

GraphicsLayoutAnimationPartsStates

Component Skin/

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

ActionScript MXML

Séparation complète de l’apparence et des fonctionnalités

Le modèle de composant de Flex 4 : MVC

GraphicsLayoutAnimationPartsStates

Component Skin

CSS properties

BehaviorLogicData

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

PrototypageMaquette

Design interactifPrototypage

Projet FXPFormat FXG

Flash Builder 4Format FXG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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.

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.

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.

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.

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.

Demo

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Flex : Qualité, Architecture et usine logicielle « à la Java »

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

Automatisation du processus de construction en Flex

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

Automated docs and reports

Automatisation du processus de construction en Flex:gestion des dépendances

Managing Dependencies• Maven (or Ant + Ivy)

Managing Dependencies

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

Stratégie des test unitaires en Flex

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

Our Agile Testing Principles.

Test Concerns Separately Test Many Things At Once

Test Everything –Frameworks, Integration etc.

Accept and Minimize Untestable Code

Persistence Layer

Translators / UtilitiesCommands / Delegates

Presentation Behavior Layer

Flex - Testing Concerns Separately

Persistence Definition LayerNetwork Access

Brokers / DataModels

File Access LocalConnection

Presentation Graphic LayerMXML UIComponent DisplayObject

Domain / Application Layer

Utilities / Factories

Domain Models

Utilities

Application Models

Presentation Models

VehicleDescriptorView

AccidentWizardView

VehicleDescriptorPM

AccidentWizardPM

CarCompany

Customer

IncidentDescriptor

SaveReportCommand

IncidentReportTranslator

“saveReport” RemoteObject

FlexUnit

Flex Unit• http://opensource.adobe.com/wiki/display/flexunit/FlexUnit

FlexUnit4• FlexUnit 4 (merge de Fluint et FlexUnit0.9)

• très similaire à JUnit 4• Intégré à Flash Builder 4 Beta

FlexUnit4• FlexUnit 4 (suite cf. http://docs.flexunit.org/index.php?title=FlexUnit4FeatureOverview )

FlexUnit within your Build • FlexUnit within your build

Les bouchons de test Flex

Au delà de FlexUnit : Les bouchonsHamcrest

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

Flex Unit Tests Code Coverage

Code Coverage – FlexCoverhttp://code.google.com/p/flexcover

Flexcover – Emma report -headless agent for CI builds

http://www.eyefodder.com/blog/2009/07/flex_code_coverage_process_par.shtml#more

FlexUnit & Flexcover – in Continuous Integration

Flex Functional Testing

Flex Functional Testing• Functional Testing

– RiaTest http://www.riatest.com/video/getting-started/index.html

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

Analyse statique de code Flex

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

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

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

Analyse statique de code: FlexPMD• FlexPMD

– Intégré• Mac automator :

– http://www.youtube.com/watch?v=C5DBuZzHLwc• Tâche Ant• Plugin Maven

• FlexPMD within your build

Analyse statique de code: FlexPMD• FlexPMD Eclipse plugin• http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Eclipse+plugin

Analyse statique de code: FlexCPD

• FlexCPD : Détection de copié-collé

Analyse statique de code: FlexMetrics

• FlexMetrics

Intégration continue

Intégration continue

http://www.octo.com/Java-Productivity-Primer.10/Publications

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

Intégration continue: Hudson

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

Dashboard Qualité Flex

Hudson Flex unit Dashboard

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

Dashboard Qualité : Sonar

• Sonar

Dashboard Qualité : Sonar

• Sonar Flex plugin– http://docs.codehaus.org/display/SONAR/Sonar+Flex+Plugin

Questions ?