RIA : Silverlight & Flex
description
Transcript of RIA : Silverlight & Flex
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