Retour et décryptage de la présentation de Michaël Chaize (Adobe) par François Fornaciari (Zenika)

1. Accélérez et optimisez vos
développements d'applications
mobiles
WsN Replay
Lyon - Jeudi 10 novembre 2011
François Fornaciari - francois.fornaciari@zenika.com
Zenika © 2011 1

2. Zenika en quelques mots
Un cabinet de conseil et de réalisation
Un organisme de formation agréé
Expert en Open Source et méthodes Agiles
Spécialisé dans les technologies Java EE
Créé en 2006 par 4 associés
Expertise technique
Partage des connaissances
Notre site web : www.zenika.com
Notre blog technique : http://blog.zenika.com
Nos formations : http://www.zenika.com/catalogue-formation
Nous suivre sur Twitter : @ZenikaIT
Zenika © 2011 2 2

3. Nos implantations
Paris
Lyon
Rennes
Nantes
Et aussi ...
Londres
Athènes
Zenika © 2011 3

4. Zenika Paris
Nous suivre sur Twitter : @ZenikaIT
Zenika © 2011 4 4

5. Zenika Lyon
Nous suivre sur Twitter : @ZenikaLyon
Zenika © 2011 5

6. Zenika Rennes & Nantes
Nous suivre sur Twitter : @ZenikaOuest
Zenika © 2011 6 6

7. What’s Next 2011
Présentation Flex Mobile
Retour et décryptage de la présentation de Michaël Chaize
Enjeux des applications RIA (Rich Internet Application)
Présentation du framework Flex
Développement d’une application Flex Mobile
Plus quelques démos…
Zenika © 2011 7

8. Adobe Flex
Introduction
Objectifs des applications RIA
o Améliorer l’expérience utilisateur
o Proposer du contenu riche et dynamique
Framework produit par Adobe
o Contient un ensemble de composants permettant de
développer des applications RIA
o Open-source et gratuit depuis 2007
Propose 3 modes de déploiement
o Web : navigateur + Flash Player
o Desktop : runtime AIR (Adobe Integrated Runtime)
o Mobile : runtime AIR
Zenika © 2011 8

9. Adobe Flex
Composants
Zenika © 2011 9

10. Adobe Flex
MXML vs ActionScript
MXML
o Syntaxe déclarative de création d’interface
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Panel>
<s:Label text="Label" />
<s:Button label="Button" />
</s:Panel>
</s:Application>
ActionScript
o Syntaxe familière aux développeurs JAVA
package com.zenika.flex {
public class MyClass interface MyInterface {
public function MyClass() {
}
public function doSomething():String {
}
}
}
Zenika © 2011 10

11. Adobe Flex
Intégration serveur
Communication via des WebServices
o JAX-WS ou JAX-RS
o Parseur XML natif
Interrogation de services Java (RPC)
o Frameworks dédiés (BlazeDS, GraniteDS, …)
o Sérialisation des données (format AMF)
o Intégration avec la plupart des frameworks côté serveur
(Spring, EJB, Seam, …)
Push de données
o Synchronisation des données entre les différents clients
o Envoie de notifications
Zenika © 2011 11

12. Flex Mobile
Introduction
Extension du framework Flex pour le développement
d’applications mobiles
o Présent depuis la version 4.5 du SDK Flex
o OS supportés : iOS, Android, BlackBerry
Selon Adobe, plus de 50% du contenu Web sera accédé
depuis un appareil mobile d’ici 2 ans
Au travers de Flex, Adobe cible le développement
d’applications multimodales pour les entreprises
o Travail collaboratif et mobilité
o Outils de développement avancés
o Intégration continue
Zenika © 2011 12

13. Flex Mobile
Objectifs
Développer une application compatible avec la plupart des
plateformes mobiles existantes
o Evite de développer autant d’applications qu’il y a de
plateformes cibles
o Bénéficier d’un rendu graphique identique
Capitaliser sur l’expérience acquise lors des
développements Flex Web
Fournir des composants optimisés pour le mobile
o List, Button,TextArea,TextInput, ...
Fournir des composants dédiés aux mobiles
o ViewNavigatorApplication, SlideViewTransition,
MultiDPIBitmapSource, ...
Zenika © 2011 13

14. Flex Mobile
Tour de Flex
Zenika © 2011 14

15. Démonstration
Présentation
Développement d'une application prototype utilisant la
technologie Flex Mobile
o Périmètre fonctionnel : recherche et rédaction de
mémos rédigés lors de rencontres en clientèle
Validation de la technologie Flex Mobile concernant la
compatibilité de l'application avec différents formats de
tablette et de téléphone mobile
Évaluation de la maturité de la technologie Flex Mobile
Coût d'un développeur Flex à s'approprier le framework
Flex Mobile
Zenika © 2011 15

16. Démonstration
Zenika © 2011 16

17. Flash Builder
Introduction (1/2)
Développé par Adobe
Basé sur des plugins Eclipse
Fonctionnalités principales
o Auto complétion
o Refactoring
o Développement pour mobile
Emulateur
Déploiement sur le device branché en USB
o Debugger et profiler
Version pour Windows et Mac
Licence payante
Alternative pour Linux : IntelliJ IDEA
Zenika © 2011 17

18. Flash Builder
Introduction (2/2)
Zenika © 2011 18

19. Flash Builder
OS supportés
Depuis la version 4.5.1 : Burrito
o Google Android
o Apple iOS
o BlackBerryTablet OS
Zenika © 2011 19

20. Flash Builder
Différents types d'application
ViewNavigatorApplication TabbedViewNavigatorApplication
Zenika © 2011 20

21. Flash Builder
Support multi-résolutions
Tous les appareils non pas la même densité
Configuration du DPI
o Redimensionnement efficace des images vectorielles et
du texte en fonction de la résolution
Utilisation de la classe MultiDPIBitmapSource pour insérer
des images non vectorisées
Zenika © 2011 21

22. Flash Builder
Designer
Il est possible d'utiliser le mode designer
o Prise en charge des différents mobiles (résolutions)
o Design en mode portrait au paysage
o Editeur WYSIWIG
Zenika © 2011 22

23. Flash Builder
Déploiement Android (1/2)
Mode développement
1. Installer les drivers
2. Connecter l'appareil
Android via USB
3. Exécuter depuis
Flash Builder en
spécifiant le device
branché
Zenika © 2011 23

24. Flash Builder
Déploiement Android (2/2)
Mode Release Build
1. Exporter l'application
finale
2. Créer / obtenir un
certificat
3. Signer l'application
Zenika © 2011 24

25. Flash Builder
Déploiement iOS (1/2)
Même procédure pour le mode développement et le
Release Build
Deux fichiers sont nécessaires pour déployer sur iOS
o Génération d'un certificat iOS
DeveloperIdentity.p12
Obtenu, par conversion d’un certificat (.pem) avec
OpenSSL en certificat iOS Developer avec iOS Dev
Center
o Utilisation d'un fichier de provision
*.mobileprovision
Contient les ID des devices iOS
Fourni par le iOS Dev Center
Zenika © 2011 25

26. Flash Builder
Déploiement iOS (2/2)
Signer l’application avec le certificat iOS et le fichier de
provision et déploiement sur iTunes
Zenika © 2011 26

27. Flash Builder
Déploiement : comparatif
iOS Android
Développement - Certificat : Oui - Certificat : Non
- Durée : 10 secondes - Durée : 6 secondes
- Taille : 6 Mo - Taille : 2Mo
Release - Certificat : Oui - Certificat : Oui
- Durée : 10 min - Durée : 10 secondes
- Taille : 8 Mo - Taille : 1Mo
Zenika © 2011 27

28. Développement
SQLite
Moteur de base de données fourni par le runtime AIR
Permet aux applications de stocker des données localement
o Gestion du mode déconnecté
Mise en œuvre
o Configuration du fichier dans lequel est persistée la base
de données
Généralement dans l’espace de stockage propre à
l’application
o Interrogation via des requêtes SQL
o Support des transactions
o Utilisation très proche du standard JDBC
Zenika © 2011 28

29. Développement
WebService
Possibilité d’interroger des WebServices sans passer par un
serveur intermédiaire
Utilisation des classes HttpService ou WebService
Conversion native du résultat au format XML en structure
objet
Flash Builder propose un outil de génération de code
d’appel au WebService à partir du WSDL
o Génère les classes permettant d’appeler les méthodes
du WebService
o Traitement du résultat asynchrone
Zenika © 2011 29

30. Développement
Configuration
Un fichier XML de configuration est généré lors de la
création d'un nouveau projet Flex Mobile
Permet de modifier la configuration du projet
o Nom et version de l’application
o Mode Full screen
o Icône application
o Etc.
Permet également d'ajouter de la configuration pour un OS
en particulier
o Ajouts de droit (internet, GPS, …)
o Configuration spécifique
Zenika © 2011 30

31. Flex Mobile
Etat des lieux (1/2)
Développements familiers si connaissance de Flex
Gestion spécifique de la navigation : empilement des vues
o Facile d’utilisation
o Mécanisme interne de transmission de données entre les
vues
Possibilité d’utiliser les bibliothèques Flex 4.5
o Attention : tous les composants graphiques Flex 4 ne
sont pas optimisés pour le mobile
Gestion du mode offline inhérente au développement
mobile
Prise en main
o Prototypage et déploiement extrêmement rapide sur
Android (exemple avec le Nexus S)
o Simulateur de device très pratique
Zenika © 2011 31

32. Flex Mobile
Etat des lieux (2/2)
Composants standards non optimisés pour Flex Mobile
o Form, Combobox, ...
o A ne pas utiliser pour ne pas dégrader les performances
o Composants très courants qui ne sont pas utilisables
avec Flex Mobile
Liste de composants supportés assez restreinte
o Framework en pleine évolution
Bonne compatibilité entre les différents devices testés
Performances générales en dessous de nos espérances
o Nécessité d’aborder la problématique d'optimisation
durant les développements
Zenika © 2011 32

33. Flex Mobile
Adaptabilité de l'interface
Prévoir une interface adaptable aux différentes variétés
d’écran
o Une interface pour tablette ne sera pas pensée de la
même façon qu'une interface pour smartphone
Utilisation des pourcentages
o Pratique pour gérer toutes les résolutions
o Moins adaptée pour la précision
Difficile de trouver un compromis entre relatif et absolu
Tester l'UI sur tous les émulateurs et les devices est souvent
fastidieux mais indispensable !
Zenika © 2011 33

34. Bibliothèque
Eskimo
Permet d’adapter les composants à la plateforme cible
Fournit de nouveaux composants
Zenika © 2011 34

35. What’s Next ?
Intégrations natives
Parseur JSON
Native Text Input UI
o Personnalisation du clavier (email, number, …)
Native Extensions
o Intégration de fonctionnalités natives du téléphone
o Ex : vibreur, lecteur de carte bleue, équipement
médical, …
Zenika © 2011 35

36. What’s Next ?
Captive Runtime et sécurité
Captive Runtime Support pour Android
o Même principe que pour le déploiement iOS
o Déploiement simplifié : AIR n’est plus un pré-requis
o Garantie sur la version AIR utilisée : tests simplifiés
Encrypted Local Storage for Mobile
o Sécurisation des données utilisateur sur le mobile
Et bien d’autres …
Zenika © 2011 36

37. What’s Next ?
Flex 4.6 (1/2)
Ajout de nouveaux composants mobiles optimisés
o Meilleures performances : 50 % de gain annoncé
o Meilleure compatibilité avec les dernières
plateformes Android et iOS
Flash Builder 4.6
o Intégration des extensions natives
o Captive Runtime
Pre-release program
Zenika © 2011 37

38. What’s Next ?
Flex 4.6 (2/2)
Zenika © 2011 38

39. Flex et HTML 5
Adobe investit à la fois sur les technologies Flex et
HTML 5
Flex Mobile au travers du runtime AIR et du framework
Flex
Sortie prévue tous les 3 mois d’une nouvelle version
de AIR
Synchronisation des nouvelles versions de Flex avec
AIR (pas nécessairement avec la même fréquence)
HTML 5 au travers d’outils de génération de contenu
Produit Adobe Edge
Zenika © 2011 39

40. Ressources
Présentation de Michaël Chaize à la What’s Next 2011
http://www.whatsnextparis.com/agenda.html
Flex
http://flex.org/
Tour de Flex
http://www.adobe.com/devnet/flex/tourdeflex.html
Tour de Mobile Flex (application Android)
http://flex.org/tour-de-mobile-flex/
Zenika © 2011 40

41. Zenika © 2011 41