5. 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
7. 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
8. Agenda
• La plateforme: Flash, AIR, SDK Flex
• Flex Java : la plomberie
• Flex : Qualité, Architecture et usine logicielle « à la
Java »
9. La plateforme:
Flash,
AIR,
SDK Flex
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
10. 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>
®
10
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
11. 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
®
11
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
12. La technologie Flash a +13 ans
Animation
Interactivité
Rich Media
Applications
®
12
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
13. Demonstrations
Flash 10
®
13
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
14. RIA sur le bureau
AIR
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
15. 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.
®
15
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
16. 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.
17. Online / Offline
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
18. Pourquoi les RIA sur le bureau ?
Connection permanente Personnalisation
Puissance du desktop Accès aux données Développement optimisé
®
18
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
19. Demonstrations
next
®
19
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
20. Desktop Rich Internet Applications “On AIR”
Deploying to the Desktop with
AIR
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
21. Parleys.com
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
22. NY times
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
23. RIA sur le mobile
Flash Player 10
Michaël CHAIZE
mchaize@adobe.com
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
24. Deux problématiques à résoudre
Web Standalone
Browsing Applications
YouTube.com
®
24
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
25. Open Screen Project
®
25
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
26. 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.
27. 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.
28. 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.
29. 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.
30. Adobe Flash Builder
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
31. 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.
32. 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.
33. “In front of the glass” Flex !
“Behind the glass” Java !
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
34. 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
®
34
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
36. 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
®
36
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
37. 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
®
37
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
38. 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
®
38
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
39. 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
®
39
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
40. Flex :
XML sur HTTP
mx:HTTPService
®
40
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
41. Flex :
SOAP
mx:WebService
®
41
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
42. Flex et les serveurs
d’application Java
Remoting, Messaging et Data
Management
®
42
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
43. Remoting
mx: RemoteObject
®
43
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
44. 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)
®
46. 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.
47. 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.
47
48. 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
49. Messaging
mx: Producer
mx:Consumer
®
49
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
50. Publish/Subscribe Messaging
Livecycle Data Services
Client A
Message
Endpoint
Service
Client B
RTMP
Client C AMF
HTTP Publisher
Subscriber
50
52. 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
52
53. Data Management
®
53
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
54. 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
®
54
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
55. 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
®
55
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
56. 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
®
56
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
57. 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
®
57
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
58. 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
®
58
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
59. 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
60. 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
61. 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
62. 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)
63. 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)
64. 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
65. Channels
®
65
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
67. 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
67
69. 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 69
70. Flex : Qualité, Architecture et usine logicielle
« à la Java »
71. 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
73. 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
78. 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
80. 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
81. Our Agile Testing Principles.
Test Everything –Frameworks,
Accept and Minimize
Integration etc.
Untestable Code
Test Concerns Separately Test Many Things At Once
90. 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
100. 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
101. 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
102. 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
103. Analyse statique de code: FlexPMD
• FlexPMD
– Intégré
• Mac automator :
– http://www.youtube.com/watch?v=C5DBuZzHLwc
• Tâche Ant
• Plugin Maven
110. 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