RIA : Silverlight & FlexDEMANY Vincent

N’GUYEN Christophe

Xposé 2009 – 2010INGENIEURS2000

Sommaire

L’évolution des modèles

RIA

Zoom sur Silverlight & Flex

Silverlight & Flex : Le duel

Conclusion

L’évolution des modèles

4

Modèle classique

5

Modèle classiqueCoté Utilisateur

Préférence du contenu au contenantNavigation Page à PageEléments graphiques de baseErgonomie quasi nulle

Coté Développeur Utilisation de langages simples (HTML, Python, ASP, JSP)

Facile à écrire mais très difficile à maintenir et faire évoluer

Mélange entre la vue et le modèle Pas d’utilisation du pattern MVC et donc on mélange l’IHM et le côté métier

6

Modèle Web 1.X

7

Modèle Web 1.XCoté Utilisateur

Quelques composants graphiques richesPlus ergonomique que la version précédente

Coté Développeur Idem que le modèle classiqueExpérience plus enrichissante

8

Modèle Ajax

9

Modèle AjaxCoté Utilisateur

Rafraichissement de la page en coursLes rechargements asynchrones donnent une impression de fluiditéLa navigation se fait de plus en plus au sein de la même pageBien plus agréable à utiliser que les deux derniers modèles

Coté Développeur Utilisation de librairies mais maintenance

très complexeUtilisation de CSS

10

Modèle RIA

11

Modèle RIACoté Utilisateur

Très fluideGraphismes riches (ex: animation 3D)Ergonomie similaire à celle d’un client lourd

Coté Développeur Paradigmes de développement proches du client lourdLangages puissants et très outillésUtilisation du pattern MVC

12

L’évolution des application WEB

Series1

Series1Expérience Utilisateur

ExpérienceDéveloppeur

Modèle classique Modèle Web 1.x Modèle Ajax Modèle RIA

Site de Rémi Forax Site de SNCF Site de Yahoo Site RIA

RIA : Rich Internet Application

RIA = Rich Internet ApplicationTerme inventé par Macromedia en 2002Application riche dans un navigateur WebConvergence du client lourd et du client léger

RIA : Définition

HTML AjaxFlex

SilverlightAIR

SL OOBWindows

MacClient léger Client lourd

Accessible « partout »Pas de problème de déploiement

Interface intuitiveRéponse immédiate

Bénéfice des deux clients

Rich !?Interactions (glisser/déplacer, redimensionnement, zoom, effets, translations, rotations, déformations, animations)Contenu / média (musique, vidéos, affichage vectoriel)Nouvelle perception de navigation

14

15

Unir les deux mondes => « Agréable à utiliser et à construire »

Ergonomie, ergonomie!

Maintenabilité,

productivité, pérennité!

Utilisateur Développeur

RIA : Les enjeux

16

Interfaces novatricesPlus intuitive et adaptivesAdaptées aux gestes métiersDisposant d’un meilleur look & field

Avantages des deux mondesClient lourd

FluiditéVectoriel

Client légerAucune installationDiffusion maximale

Le navigateur se fait oublier au profit de l’application

RIA : Les concepts (côté utilisateur)

17

MultiplateformesCôté client : plugin navigateurCôté métier : pas d’adhérence avec la technologie serveur

RIA : Les concepts (côté développeur)

Paradigme de développementAllégement des tâches côté serveurMaintenance : Distribution de l’application par le serveurProductivité & maintenabilité : code plus court / non spécifique

18

Et aussi…

RIA : Les acteurs

Zoom sur Silverlight & Flex

Plateforme

20

Plateforme : Fiche / Présentation

21

Nom : SilverlightEditeur : MicrosoftDate de création : Mars 2007Version : SL 3Licence : PropriétaireIDE : Visual Studio / BlendLangages : XAML / .NET

Fiche / Présentation

22

Nom : FlexEditeur : MacromediaDate de création : 2004Reprise : 2006 par AdobeIDE: Flex Builder / AirLicense : Propriétaire / LibreLangages : MXML / ActionScript 3Version : Flex 3

Fiche / Présentation

23

Plateforme : Support

24

Multi-navigateursInternet ExplorerFirefoxSafariChromeOpéra

SupportMulti-plateformes

WindowsMac OS (avec Intel)Linux (avec Moonlight)

MobilesWindows MobileNokia (Symbian)

25

Les plateformes compatibles

Windows

Linux

Mac OS

Nécessité seule du FlashPlayer qui existe sur toutesses plateformes.

Support

26

Plateforme : Outils

27

Création Distribution Expérience

• Expression Studio (Design, Blend, Encoder)

• Visual Studio,

mais aussi Eclipse4SL, Notepad…

• Tous serveurs(Windows Server, Apache)

• Tous navigateurs(IE, Firefox, Opera, Chrome, Safari)

• Toutes plateformes (Windows, Mac OS X, Linux)

• Mobiles

Outils & matériels nécessaires

28

Designer/Developer Tools

Creative Suite 3

Flex® Builder

Servers/Services

ColdFusionLiveCycle Flash Media Server

FlashCast Scene7

ApplicationsAdobeMediaPlayer

Frameworks

ClientsAdobe AIR

Adobe Flash Player

AdobeBuzzword

AcrobatConnect

Ajax Flex

Outils & matériels nécessaires

29

Plateforme : Description du code

30

Framework .NETSous ensemble du frameworkTraitement Métier

Plusieurs langages de développementC#, VB.NETJavaScriptIronPython, IronRuby

Apports du frameworkGenerics LINQ

31

Description du code : .NETC#:MessageBox.Show(“Hello”);

LINQ:dg.ItemsSource = from author in authors

where author.Name.Contains(txtFilter.Text) select author;

31

Generics:public class Test<Type>{ … }

Test<char> = new Test<char>();Test<int> = new Test<int>();

Langage de script orienté objet

Semblable à JavaScript

Support total de la norme ECMAScript4 (ES4)

Ajout d’interactivité au Flash

Vérification des types à la compilation et à l’exécution

32

Description du code : Action Script 3

32

eXtensible Application Markup Language

Langage déclaratif basé sur XMLDéfinir une hiérarchie d’objets graphiques

Un langage objetLes balises deviennent des objets & les attributs des propriétésLes balises prédéfinies du langage représentent des classes .NET

33

Description du code : XAML (1/2)

33

<Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow">

<Content> <TextBlock Text=“Hello World!” /></Content>

</Rectangle></Canvas>

Canvas Hello World!Rectangle

Description du code : XAML (2/2)Avantages / Inconvénients

Gains de productivité et de maintenanceLangage simple à comprendreLangage uniquement MicrosoftLangage très verbeux

34

Macromedia fleX Markup Language

Gains de productivité et de maintenance

Un langage simple à comprendre

Langage basé sur XML

Deux types de composantsConteneurs (boîtes, panneaux, fenêtres…)Eléments de contrôle (champs texte, listes, datagrids, tree…)

35

Description du code : MXML (1/2)

35

Exemple de code Hello World

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="Hello World Application" > <mx:Label text="Hello World!"/> </mx:Panel></mx:Application>

Panel

Label

Description du code : MXML (2/2)

36

Plateforme : Fonctionnement

37

38

Poste ClientServeur

<HTML />

Page HTML ?

Silverlight / Flex ? ServeurPoste Client

XAP / SWF ?Poste Client

Serveur

Installation du plugin…~

Démarrage de l’appli.~

Fonctionnement : côté client (1/2)

Fonctionnement : côté client (2/2)

Traitement effectué chez le clientDiminution de l’utilisation des ressources serveursFluidité de l’application

39

40

Fonctionnement : côté développeur

Compile

Packaging

HTTP

HTTPSOAP

XAP

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

Fonctionnement : côté développeur

Plateforme : RDA

42

Rich Desktop ApplicationFacilité de déploiement / maintenanceBénéficie des performances d’exécution de l’ordinateurMode déconnectéMeilleure intégration avec le système d’exploitationApparition de nouvelles fonctionnalités (autonomie)

RDA

43

Industrialisation

44

Industrialisation : Environnement de développement

45

Industrialisation : Usine de développement

46

Industrialisation : Usine de tests

47

Industrialisation : Patterns architecturaux

48

49

Zéro déploiement (site web)

Idéal pour les architectures orientées services

Profite des capacités du poste client

Basé sur un moteur graphique vectoriel

Multiplateformes / Multi-navigateurs => Pas de code spécifique par navigateur ou plateforme

Amélioration de l’expérience utilisateur et développeur

Avantages

DEMONSTRATION

Silverlight & Flex : Le duel

52

Grille de comparaisonFACTEURS Silverlight Flex

Contexte .NET

Contexte JAVA

Communauté

Environnement

Industrialisation

Connaissances

Courbe d’apprentissage

STOP!!! PAS CA!!!

53

Scénario d’utilisation 1Fiche

Nom : RemI MetAGirlPoste : Directeur de serviceService : R&D

ContexteRéalisation d’une application pour leur centre d’appelEquipe à très forte culture JavaDiffusion de 50 utilisateurs

ObjectifsFaire évoluer le système de gestion actuelInterface graphique dynamique et ergonomie avancéeRéutilisation de services existants

54

Scénario d’utilisation 1 : SolutionLes deux :

Interaction Java avancéeCulture des développeurs

GWTProductivité plus faibleLourdeur de développement / maintenance

Adobe FlexRapiditéMeilleure productivitéMaintenance aiséeDesign poussé

55

Scénario d’utilisation 2Fiche

Nom : Thibault LévèkPoste : Directeur techniqueSociété : Les Trottinettes

ContexteSI full MicrosoftRéalisation d’un gestionnaire de planningDiffusion : 150 utilisateurs

ObjectifsIntégration avec Access, SQL Server…Réalisation rapideBudget alloué faible

56

Scénario d’utilisation 2 : SolutionLes deux

Homogénéité des technologies du SICoût d’entrée faible

ASP .NETProductivité plus faibleLourdeur de développement / maintenance

Microsoft SilverlightDesign riche rapidementMeilleure productivité des développementsMaintenance facilitée

57

Scénario d’utilisation 3Fiche

Nom : Aravidan MahendranPoste : Chef de projet PHP Société : Tamoul Society

ContexteRéalisation d’une vidéothèque pour les professionnelsEquipe à la triste culture PHPDiffusion : 500 utilisateurs

ObjectifsRemplacer le client léger obsolèteInterface graphique la plus ressemblante à une application bureauFacile à déployerSimple d’utilisationGestion poussée des médias

58

Scénario d’utilisation 3 : SolutionMicrosoft Silverlight | Adobe Flex

Performances et ergonomie équivalentesCoût d’entrée sur la technologieDistribution aiséeMaintenance facilitéeGestion des médias innovante (animation, effets,…)

Côté FlexOuverture de l’application sur Internet

Côté SilverlightDisponibilité des compétences Microsoft

59

Scénario d’utilisation 4Fiche

Nom : Rémi Kro$oftPoste : Big BossSociété : I Love Micro$oft

ContexteConcurrencer GoogleDocsGrosse équipe de .Netiste

ObjectifsInterfacer avec la suite Microsoft OfficeErgonomie pousséeRapidité d’exécution

60

Scénario d’utilisation 4 : SolutionMicrosoft Silverlight

Productivité des développementsMaintenance facilitéeCourbe d’apprentissage faibleDisponibilité des compétencesInterface intuitive

61

Scénario d’utilisation 5Fiche

Nom : Marko$$ LarnaquePoste : PrésidentSociété : Les Arnaqueurs

ContexteApplication de gestion d’un réseau professionnel internationalDiffusion internationale

ObjectifsDiffusion maximaleErgonomie proche du client lourdTemps de réponse courts

62

Scénario d’utilisation 5 : SolutionAdobe Flex

Distribution simple et rapideDesign futuristePerformances (AMF)Ouverture de l’application sur Internet

63

ConclusionChoix selon le contexte

Adoptez le RIAMeilleure expérience utilisateurMeilleure expérience développeur

Silverlight & FlexTechnologie maturePrêt pour l’industrialisationGamme d’outils complète

64

BibliographieSilverlight

http://www.microsoft.com/fr/fr/default.aspxhttp://msdn.microsoft.com/fr-fr/http://silverlight.net/

Flexhttp://www.adobe.com/http://www.flex-tutorial.fr/http://flex.org/

Questions