Du RIA pour mon SI : Microsoft      Silverlight vs Adobe Flex                       David Alia                   Djamel Zo...
IntroductionL’évolution des applications web
Une évolution naturelle…
Modèle classique d’application web
Modèle web 1.x
Modèle Full Ajax
Modèle RIA
L’évolution des applications web              Modèle classique                                                            ...
L’évolution des applications web              Modèle classique                               Modèle 100%                  ...
Les enjeux de la RIA• Selection naturelle… Darwin… mais encore ?• L’ergonomie n’est plus une option, elle fait partie  int...
Tour d’horizon de la RIA
Expérience                                                  Les concepts RIAutilisateur   • Des interfaces novatrices     ...
Expérience                                              Les concepts RIAdéveloppeur • Multi-plateformes       – Coté clien...
Les acteursEt aussi…            GWT       HTML 5
Zoom sur les technologiesMicrosoft Silverlight et Adobe Flex
La plateforme
L’industrialisation des développements
Du code : Flexvar auteurs =                                                            E4X<auteurs><auteur>  <nom>Pennac</...
Du code : Silverlight
Du code : Silverlightprivate void txtFilter_TextChanged(object sender, TextChangedEventArgs e)                         C# ...
Du code : Silverlightprivate void txtFilter_TextChanged(object sender, TextChangedEventArgs e)                         C# ...
Les avantages de chaque plateforme    Microsoft Silverlight                          Adobe Flex• Plateforme de            ...
Microsoft Silverlight vs Adobe Flex                           Le match
Une grille de lecture…                                 Silverlight     FlexContexte .netContexte JavaProductivité des devs...
Une grille de lecture…                                 Silverlight     FlexContexte .netContexte JavaProductivité des devs...
Cas d’utilisation n°1                                     • Enjeux       • Roger d’Ubontaba               – Intégration da...
Cas d’utilisation n°1• Notre réponse  – Microsoft Silverlight  – ASP.NET (oui, mais non)• Notre argumentation  – Pour les ...
Cas d’utilisation n°2                                   • Enjeux       • Désiré Sponsable             – Vaincre l’habitude...
Cas d’utilisation n°2• Notre réponse  – Adobe Flex  – GWT (oui mais non)• Notre argumentation  – Pour les deux réponses : ...
Cas d’utilisation n°3                                   • Enjeux       • Eddy Teurdetexte             – Connectivité avec ...
Cas d’utilisation n°3• Notre réponse  – Adobe Flex  – Microsoft Silverlight• Notre argumentation  – Pour les deux réponses...
Cas d’utilisation n°4                                   • Enjeux      • Jean Tourloupe               – Haute performance  ...
Cas d’utilisation n°4• Notre réponse  – Adobe Flex• Notre argumentation  – Performances      – Protocole de transfert Flex...
Cas d’utilisation n°5                                  • Enjeux       • Marc Héting                 – Mode 100% ASP       ...
Cas d’utilisation n°5• Notre réponse  – Microsoft Silverlight• Notre argumentation  –   Productivité des développements et...
Conclusion
Ce qu’il faut retenir• La RIA se dote de nouveaux paradigmes   – Dépassez la phase transitoire actuelle• Basculez !   – La...
Questions ?
Prochain SlideShare
Chargement dans…5
×

USI 2009 - Du RIA pour SI

519 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
519
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Rappel des durées : 8-5-12-15 min
  • USI 2009 - Du RIA pour SI

    1. 1. Du RIA pour mon SI : Microsoft Silverlight vs Adobe Flex David Alia Djamel Zouaoui
    2. 2. IntroductionL’évolution des applications web
    3. 3. Une évolution naturelle…
    4. 4. Modèle classique d’application web
    5. 5. Modèle web 1.x
    6. 6. Modèle Full Ajax
    7. 7. Modèle RIA
    8. 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 maisExpérience plus au sein de la même page moins dans les SIutilisateur • 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 navigateurdéveloppeur
    9. 9. L’évolution des applications web Modèle classique Modèle 100% Modèle « web 1.x » Modèle RIA d’application web AjaxExpérienceutilisateur Expériencedéveloppeur
    10. 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. 11. Tour d’horizon de la RIA
    12. 12. Expérience Les concepts RIAutilisateur • 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. 13. Expérience Les concepts RIAdé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. 14. Les acteursEt aussi… GWT HTML 5
    15. 15. Zoom sur les technologiesMicrosoft Silverlight et Adobe Flex
    16. 16. La plateforme
    17. 17. L’industrialisation des développements
    18. 18. Du code : Flexvar 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. 19. Du code : Silverlight
    20. 20. Du code : Silverlightprivate 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. 21. Du code : Silverlightprivate 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. 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. 23. Microsoft Silverlight vs Adobe Flex Le match
    24. 24. Une grille de lecture… Silverlight FlexContexte .netContexte JavaProductivité des devsOuverture au webPerformanceCourbe d’apprentissageDisponibilité des ressources...
    25. 25. Une grille de lecture… Silverlight FlexContexte .netContexte JavaProductivité des devsOuverture au webPerformanceCourbe d’apprentissageDisponibilité des ressources...
    26. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Conclusion
    37. 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. 38. Questions ?

    ×