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 Explorer
Firefox
Safari
Chrome
Opéra
SupportMulti-plateformes
Windows
Mac OS (avec Intel)
Linux (avec Moonlight)
MobilesWindows Mobile
Nokia (Symbian)
25
Les plateformes compatibles
Windows
Linux
Mac OS
Nécessité seule du Flash
Player qui existe sur toutes
ses 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 framework
Traitement Métier
Plusieurs langages de développementC#, VB.NET
JavaScript
IronPython, 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és
Les 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 / maintenance
Bénéficie des performances d’exécution de l’ordinateur
Mode déconnecté
Meilleure intégration avec le système d’exploitation
Apparition 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 comparaison
FACTEURS Silverlight Flex
Contexte .NET
Contexte JAVA
Communauté
Environnement
Industrialisation
Connaissances
Courbe d’apprentissage
STOP!!! PAS CA!!!
53
Scénario d’utilisation 1Fiche
Nom : RemI MetAGirl
Poste : Directeur de service
Service : R&D
ContexteRéalisation d’une application pour leur centre d’appel
Equipe à très forte culture Java
Diffusion de 50 utilisateurs
ObjectifsFaire évoluer le système de gestion actuel
Interface graphique dynamique et ergonomie avancée
Réutilisation de services existants
54
Scénario d’utilisation 1 : SolutionLes deux :
Interaction Java avancée
Culture des développeurs
GWTProductivité plus faible
Lourdeur de développement / maintenance
Adobe FlexRapidité
Meilleure productivité
Maintenance aisée
Design poussé
55
Scénario d’utilisation 2Fiche
Nom : Thibault Lévèk
Poste : Directeur technique
Société : Les Trottinettes
ContexteSI full Microsoft
Réalisation d’un gestionnaire de planning
Diffusion : 150 utilisateurs
ObjectifsIntégration avec Access, SQL Server…
Réalisation rapide
Budget alloué faible
56
Scénario d’utilisation 2 : SolutionLes deux
Homogénéité des technologies du SI
Coût d’entrée faible
ASP .NETProductivité plus faible
Lourdeur de développement / maintenance
Microsoft SilverlightDesign riche rapidement
Meilleure productivité des développements
Maintenance facilitée
57
Scénario d’utilisation 3Fiche
Nom : Aravidan Mahendran
Poste : Chef de projet PHP
Société : Tamoul Society
ContexteRéalisation d’une vidéothèque pour les professionnels
Equipe à la triste culture PHP
Diffusion : 500 utilisateurs
ObjectifsRemplacer le client léger obsolète
Interface graphique la plus ressemblante à une application bureau
Facile à déployer
Simple d’utilisation
Gestion poussée des médias
58
Scénario d’utilisation 3 : SolutionMicrosoft Silverlight | Adobe Flex
Performances et ergonomie équivalentes
Coût d’entrée sur la technologie
Distribution aisée
Maintenance facilitée
Gestion 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$oft
Poste : Big Boss
Société : I Love Micro$oft
ContexteConcurrencer GoogleDocs
Grosse équipe de .Netiste
ObjectifsInterfacer avec la suite Microsoft Office
Ergonomie poussée
Rapidité d’exécution
60
Scénario d’utilisation 4 : SolutionMicrosoft Silverlight
Productivité des développements
Maintenance facilitée
Courbe d’apprentissage faible
Disponibilité des compétences
Interface intuitive
61
Scénario d’utilisation 5Fiche
Nom : Marko$$ Larnaque
Poste : Président
Société : Les Arnaqueurs
ContexteApplication de gestion d’un réseau professionnel international
Diffusion internationale
ObjectifsDiffusion maximale
Ergonomie proche du client lourd
Temps de réponse courts
62
Scénario d’utilisation 5 : SolutionAdobe Flex
Distribution simple et rapide
Design futuriste
Performances (AMF)
Ouverture de l’application sur Internet
63
ConclusionChoix selon le contexte
Adoptez le RIAMeilleure expérience utilisateur
Meilleure expérience développeur
Silverlight & FlexTechnologie mature
Prêt pour l’industrialisation
Gamme d’outils complète
64
BibliographieSilverlight
http://www.microsoft.com/fr/fr/default.aspx
http://msdn.microsoft.com/fr-fr/
http://silverlight.net/
Flexhttp://www.adobe.com/
http://www.flex-tutorial.fr/
http://flex.org/
Questions
Top Related