1. Du RIA pour mon SI : Microsoft
Silverlight vs Adobe Flex
David Alia
Djamel Zouaoui

2. Introduction
L’évolution des applications web

3. Une évolution naturelle…

4. Modèle classique d’application web

5. Modèle web 1.x

6. Modèle Full Ajax

7. Modèle RIA

8. L’évolution des applications web
Modèle classique Modèle 100%
Modèle « web 1.x » Modèle RIA
d’application web Ajax
• Navigation page à page • Ajout de comportements • Rafraichissement partiel de la • IHM vectorielles
• Rechargement complet de la asynchrones page en cours • Graphismes riches, animations
page (effet « page blanche » • Quelques composants riches • Les échanges asynchrones • Fluidité
accompagné d’une attente) donnent une impression de • Ergonomie similaire à celle du
• Eléments graphiques simples fluidité client lourd
• La navigation se fait de plus en • Démocratisé sur le web mais
Expérience plus au sein de la même page moins dans les SI
utilisateur
• HTML, ASP/JSP : facile à écrire mais une horreur à faire évoluer • Utilisation de librairies (ex : • Paradigmes de
• Componentisation faible yahoo UI) mais maintenabilité développement proches du
• Mélange IHM & code métier Javascript complexe client lourd
•… • CSS mais gestion multi- • Langages puissants et outillés
Expérience navigateur
développeur

9. L’évolution des applications web
Modèle classique Modèle 100%
Modèle « web 1.x » Modèle RIA
d’application web Ajax
Expérience
utilisateur
Expérience
développeur

10. Les enjeux de la RIA
• Selection naturelle… Darwin… mais encore ?
• L’ergonomie n’est plus une option, elle fait partie
intégrante des critères de valorisation d’une application
• La productivité et la pérennité des développements dans
la création d’interfaces riches
Réconcilier les deux mondes
ou
Comment produire des applications “aussi agréables à utiliser
qu’à construire”

11. Tour d’horizon de la RIA

12. Expérience
Les concepts RIA
utilisateur
• Des interfaces novatrices
– Plus intuitives et adaptives
– Adaptées aux gestes métiers
– Disposant d’un meilleur look & feel
• Les avantages des deux mondes
– Du client lourd
• Fluidité
• Vectoriel
– Du web
• Distribution de l’applicatif côté serveur
• Diffusion maximale
Le navigateur se fait oublier au profit de l’application

13. Expérience
Les concepts RIA
développeur
• Multi-plateformes
– Coté client : plugin navigateur
– Coté serveur : pas d’adhérence à la technologie serveur
• Paradigmes de développement
– La partie graphique n’est pas générée côté serveur mais distribuée
– L’exécution est totalement déléguée au plugin navigateur
• Plus de gestion de sessions
• Plus de problématique d’état à conserver…
– Architecture orientée services

14. Les acteurs
Et aussi…
GWT HTML 5

15. Zoom sur les technologies
Microsoft Silverlight et Adobe Flex

16. La plateforme

17. L’industrialisation des développements

18. Du code : Flex
var auteurs = E4X
<auteurs>
<auteur>
<nom>Pennac</nom>
<prenom>Daniel</prenom>
<genre>M</genre>
</auteur>
<auteur>
<nom>Barbery</nom>
<prenom>Muriel</prenom>
<genre>F</genre>
</auteur>
</auteurs>; API Flash
<mx:Script>
<![CDATA[
document.write(auteurs.auteur.(genre == ”M").nom);
protected var cam:Camera;
public function init():void {
cam = Camera.getCamera();
videoBox.attachCamera(cam);
}
]]>
</mx:Script>

19. Du code : Silverlight

20. Du code : Silverlight
private void txtFilter_TextChanged(object sender, TextChangedEventArgs e) C#
{
<TextBox x:Name="txtFilter" TextChanged="txtFilter_TextChanged" />
if (authors != null) Xaml
{
<data:DataGrid x:Name="datagridAuthors" AutoGenerateColumns="False" Height="200" Margin="5"
datagridAuthors.ItemsSource = from author in authors
Width="500"> where author.Name.ToLower().Contains(txtFilter.Text.ToLower())
<data:DataGrid.Columns>
select author;
} <data:DataGridTextColumn Header="Nom" Binding="{Binding LastName}" CanUserSort="True"/>
} <data:DataGridTextColumn Header="Prénom" Binding="{Binding Name}"/>
<data:DataGridTextColumn Header="Genre" Binding="{Binding Genre}"/>
</data:DataGrid.Columns>
</data:DataGrid>

21. Du code : Silverlight
private void txtFilter_TextChanged(object sender, TextChangedEventArgs e) C#
{
<TextBox x:Name="txtFilter" TextChanged="txtFilter_TextChanged" />
if (authors != null) Xaml
{
<data:DataGrid x:Name="datagridAuthors" AutoGenerateColumns="False" Height="200" Margin="5"
datagridAuthors.ItemsSource = from author in authors
Width="500"> where author.Name.ToLower().Contains(txtFilter.Text.ToLower())
<data:DataGrid.Columns>
select author;
} <data:DataGridTextColumn Header="Nom" Binding="{Binding LastName}" CanUserSort="True"/>
} <data:DataGridTextColumn Header="Prénom" Binding="{Binding Name}"/>
<data:DataGridTextColumn Header="Genre" Binding="{Binding Genre}"/>
</data:DataGrid.Columns>
</data:DataGrid>

22. Les avantages de chaque plateforme
Microsoft Silverlight Adobe Flex
• Plateforme de • Flash Player 9 est déployé
développement performante dans 94% des navigateurs
– Outillage pour le – Et compatible multi-
développement : Visual Studio plateformes
– Outillage pour le design :
Gamme Expression
• Intégration avec les outils
Adobe
• Capitalisation – Passerelle naturelle avec
– Des connaissances Creative Suite
– Des ressources et codes déjà – Un seul code pour Flex / Air
existants
• Une orientation opensource
• Les Langages .NET – VM Flash, SDK
– Technologie : rapidité de mise en Flex, BlazeDS…
œuvre via Linq, Generics… – Publication des spécifications
– Dynamique : Python, Ruby… du format SWF, AMF et RTMP

23. Microsoft Silverlight vs Adobe Flex
Le match

24. Une grille de lecture…
Silverlight Flex
Contexte .net
Contexte Java
Productivité des devs
Ouverture au web
Performance
Courbe d’apprentissage
Disponibilité des ressources
...

25. Une grille de lecture…
Silverlight Flex
Contexte .net
Contexte Java
Productivité des devs
Ouverture au web
Performance
Courbe d’apprentissage
Disponibilité des ressources
...

26. Cas d’utilisation n°1
• Enjeux
• Roger d’Ubontaba – Intégration dans les SI
• Directeur technique des filiales : COM, .NET,
• Société Philippe Boris Access, SQL Server…
– Time to market
– Budget alloué faible
• Contexte et objectifs
– SI full Microsoft
– Réalisation d’une
application centralisée
(multi-filiales) de reporting
sur la logistique
– Diffusion : 80 utilisateurs
authentifiés Difficulté : ★

27. Cas d’utilisation n°1
• Notre réponse
– Microsoft Silverlight
– ASP.NET (oui, mais non)
• Notre argumentation
– Pour les deux réponses :
– Homogénéité des technologies du SI
– Coût d’entrée faible
– En faveur de Silverlight :
– Du mouf-mouf pour pas cher
– Meilleure productivité des développements / maintenance facilitée

28. Cas d’utilisation n°2
• Enjeux
• Désiré Sponsable – Vaincre l’habitude de
• JEE Technical Leader l’AS/400
• Bank Lehman Sisters – Interface graphique
dynamique et ergonomie
avancée
• Contexte et objectifs – Réutilisation de services
– Equipe à forte culture existants (GED, comptes,
Java (anti-Kro$oft) CRM…)
– Réalisation d’une
application dédiée au call-
center
– Diffusion : 50 utilisateurs
authentifiés Difficulté : ★

29. Cas d’utilisation n°2
• Notre réponse
– Adobe Flex
– GWT (oui mais non)
• Notre argumentation
– Pour les deux réponses :
– Interaction Java avancée
– Culture des développeurs
– En faveur de Flex :
– Du mouf-mouf pour pas cher
– Meilleure productivité des développements / maintenance facilitée
Ca ne vous
rappelle rien ?

30. Cas d’utilisation n°3
• Enjeux
• Eddy Teurdetexte – Connectivité avec les
• Chef de projet services du Back Office
• Clémentine (Télécom) – Ergonomie
– Temps de réponse courts
• Contexte et objectifs
– Back Office 100% PHP
– Refonte de l’application
vieillissante de gestion
des abonnements
– Diffusion : 50 utilisateurs
authentifiés
Difficulté : ★★

31. Cas d’utilisation n°3
• Notre réponse
– Adobe Flex
– Microsoft Silverlight
• Notre argumentation
– Pour les deux réponses :
– Connectivité immédiate aux services du Back Office
– Performances et ergonomie équivalentes
– Coût d’entrée sur la technologie
– (Peut-être) en faveur de Flex :
– Ouverture de l’application sur Internet : accessibilité à Mme Michu
– (Peut-être) en faveur de Silverlight :
– Disponibilité des compétences liées à la proximité technologie Microsoft

32. Cas d’utilisation n°4
• Enjeux
• Jean Tourloupe – Haute performance
• Architecte – Compatibilité avec 100%
• Ministère des finances des internautes français
– Bling-bling pour
l’application de gestion de
• Contexte et objectifs budget
– Etendre la déclaration des – Navigation assistée
impôts à la gestion de
budget en ligne
– Diffusion sur le web
– Pics d’utilisation pendant
deux mois
Difficulté : ★★★

33. Cas d’utilisation n°4
• Notre réponse
– Adobe Flex
• Notre argumentation
– Performances
– Protocole de transfert Flex : format AMF natif
– Back Office : on n’imagine pas une plateforme sous x86/Windows
– Diffusion multi-plateformes : maturité des plugins navigateur
– Intégration avec des applications Back Office hétérogènes

34. Cas d’utilisation n°5
• Enjeux
• Marc Héting – Mode 100% ASP
• Directeur – Temps de réponse faibles
• Editeur Dentaface
– Ergonomie proche du
client lourd
• Contexte et objectifs
– Réalisation « from
scratch » d’une
application intégrée de
gestion de clients pour
dentistes
– Diffusion sur le web
Difficulté : ★★

35. Cas d’utilisation n°5
• Notre réponse
– Microsoft Silverlight
• Notre argumentation
– Productivité des développements et maintenance facilitée
– Courbe d’apprentissage faible
– Disponibilité des compétences
– Simplicité de l’infrastructure nécessaire
– Environnements client maîtrisés

36. Conclusion

37. Ce qu’il faut retenir
• La RIA se dote de nouveaux paradigmes
– Dépassez la phase transitoire actuelle
• Basculez !
– La RIA, c’est une meilleure expérience utilisateur
– La RIA, c’est une meilleure expérience développeur
• Silverlight et Flex sont matures
– Cherchez votre cas d’utilisation plutôt qu’une comparaison grille
ou passionnelle
– Et industrialisez, les outils le permettent !
• Et ensuite… la mobilité ?
Crédits photo : http://gombinoscope.free.fr/

38. Questions ?