RIA | Tangane - Solutions for Business Value
avr 15
Fiche technologie - Flex
icon1 Fabien Deshayes | icon2 RIA | icon4 15 avril 2009 |  icon3Aucun commentaire »

Présentation

La technologie Flex a été créée par Macromedia en 2004 puis reprise par Adobe en 2006. La version actuelle est la 3.2, et une version 4.0 (nom de code Gumbo) est en préparation pour la seconde moitié 2009. Au sens strict, Flex est un framework de développement s’appuyant sur le Flash Player et offrant des éléments facilitant la création d’applications riches. Depuis la version 3, Flex est devenu un projet open source.

logo_flex

Principes et caractéristiques

La technologie Flex peut être expliquée en trois couches :

  • L’interface est décrite à l’aide d’une syntaxe MXML (Macromedia XML). On peut y placer et organiser les conteneurs, composants et contrôles selon une hiérarchie. Les fichiers .mxml sont ensuite transcrits en ActionScript (fichiers .as) au moment de la compilation.
  • La logique applicative sera généralement contenue dans des fichiers ActionScript. L’ActionScript 3 est le langage utilisé pour créer des exécutables Flash (.swf). C’est un langage objet basé sur ECMAScript (norme ECMA), ce qui lui donne une forte ressemblance avec le Javascript au niveau grammatical, bien qu’il soit également assez proche du Java.
  • Les applications Flex, tout comme ce que l’on peut créer avec le logiciel Flash CS4, sont de simples exécutables Flash de type .swf. Flex fournit tout de même une page HTML permettant simplement d’intégrer l’application sur une page web.
  • Flex permettant de réaliser des RIA, on peut effectuer un certain nombre de traitements coté client. Néanmoins, son architecture reste la plupart du temps de type client-serveur. Flex (et les diverses communautés open source) offre diverses possibilités de communication avec un serveur, qu’il s’agisse du PHP (AMFPHP), du .NET (FluorineFx), du Java (BlazeDS, LCDS) ou toute technologie pouvant exposer des web services.

La version actuelle de Flex offre les possibilités suivantes :

  • un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
  • le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
  • la lecture de médias (vidéo, audio) dans les formats H264, H263, On2VP6, MP3 et des images de types GIF, JPG et PNG
  • l’intégration de l’e4x, permettant de manipuler simplement du XML
  • la possibilité de personnaliser l’application avec des feuilles de styles CSS et de les skinner en utilisant des images ou des animations de type .swf

Outils

La technologie Flex s’appuie sur l’éditeur Flex Builder, lui même basé sur Eclipse : il profite donc des possibilités de cet environnement. Précision : Flex Builder existe en version “stand-alone” ou en tant que plugin Eclipse. Cet éditeur offre de nombreuses possibilités, se rapprochant de celles disponibles en Java sur Eclipse : complétion, coloration syntaxique, refactoring mais aussi une version WYSIWYG (What You See Is What You Get) des fichiers MXML et CSS, un mode débug et un profiler (pour monitorer la mémoire utilisée).

flex_builder

L’une des forces de Flex est aussi de s’interfacer correctement avec les autres produits d’Adobe : il est en effet tout à fait possible d’utiliser les logiciels Flash, Fireworks ou Illustrator pour créer des skins et des composants Flex. Le lien entre designers et développeurs est très important pour Adobe : c’est également pour cela qu’un nouveau logiciel, nommé Flash Catalyst, arrive bientôt. Il permet très simplement de créer une interface Flex (aspect graphique, comportement)  sans avoir à écrire une ligne de code ! L’ensemble de éléments mis bout à bout forme un workflow designer / développeur, thème récurrent autour de la technologie Flex.

Flex_designer_developer_workflow

Adobe propose également des solutions serveur Java pour faciliter la communication et les échanges avec une interface Flex. Il s’agit de BlazeDS, projet open source et de Live Cycle Data Services, solution payante. La première est un sous-ensemble de la seconde, mais elles offrent toutes les deux les meilleurs outils de communication Flex - Java. Il existe également d’autres outils de communication mais ceux-ci ne sont pas gérés par Adobe.

Points forts

La technologie Flex s’appuyant sur le Flash Player, elle profite de ce fait des avantages de ce dernier. Cela lui fait donc profiter de l’expérience des 10 versions du Player mais également d’une communauté importante de développeur “Flash”.  On peut ainsi citer quelques points forts de Flex :

  • sa capacité de déploiement : le Flash Player est installé sur près de 98% des ordinateurs (source : chiffres Adobe) en version 9 ou plus. Un site indépendant, RIAStats, montre un taux de 97% d’installation.
  • son ubiquité : il existe un Flash Player sur Windows, Mac OS et Linux (encore en version 9 sur ce dernier).
  • son environnement de développement, basé sur Eclipse.
  • sa capacité à pouvoir dialoguer avec différents languages serveur, en utilisant les différents moyens de communication : les appels http classiques, les web services, les RemoteObject, l’AMF, etc.
  • sa gestion des médias : le format Flash est en effet le plus répandu sur Internet pour la diffusion de contenu vidéo (cf. des sites comme Youtube ou dailymotion).
  • sa large communauté, s’appuyant en partie sur les nombreux développeurs Flash déjà existants. On trouve de nombreux documents et exemples sur Internet.

Points faibles

De la même manière que Flex profite des points forts de Flash, elle souffre également des mêmes problèmes. De nombreux développeurs web n’apprécient pas Flash en mettant en cause son incapacité à créer des applications accessibles, à être correctement référencées ou encore à fonctionner correctement avec les barres de navigation des navigateurs.

Ces affirmations ne sont pas tout à fait vraies. En effet, il existe un ensemble de propriétés permettant de rendre accessible les applications. Les moteurs de recherche commencent à référencer le contenu de fichier .swf et la version 3 de Flex permet d’interagir correctement avec la barre de navigation des navigateurs. Des efforts sont donc fait mais ces points restent vrais et demanderont forcément un supplément de travail comparé par exemple à un développement d’une application web en HTML.

De plus, si l’on constate que la communauté Flash est importante, elle est en grande partie constitué de designers ayant des connaissances en développement, et pas toujours de développeurs confirmés ou d’architectes. Bien que ce type de profil est en train de se répandre, elle reste encore une minorité dans le monde de l’ActionScript.

Le futur

Une version 4 du framework Flex ainsi que du Flex Builder est en préparation, elles devraient être disponibles durant la seconde moitié de 2009 et apporter leur lots de nouveautés :

  • une amélioration de la collaboration entre design et développement, notamment en simplifiant le processus de skinning de composants pour qu’il soit très poussé sans avoir à coder en ActionScript, juste avec une description mxml.
  • l’ajout de nouveaux éléments pour profiter des capacités du Flash Player 10, notamment un composant vidéo refait et peut-être de la 3D
  • une amélioration de la productivité en optimisant le compilateur, avec pour objectif des temps divisé par 5 !
  • une plus grande interaction avec la technologie AIR d’Adobe
flex_3d

Une présentation plus complète est disponible sur le site du Flex SDK : Gumbo Themes (Gumbo étant le nom désignant Flex 4)

Flex étant devenu récemment un projet open source, il n’est pas simple à l’heure actuelle de voir une stratégie à long terme. On peut toutefois penser que cette technologie va continuer à s’ouvrir pour agrandir encore sa communauté et renforcer sa position. De la même manière, le portage d’applications Flex sur des téléphones mobiles dépendra de la future version du Flash Player, dont on dit que c’est son objectif principal.

Références

Voici quelques applications réalisées avec Flex :

  • Le Tour de Flex, application AIR compilant des possibilités de Flex
  • Acrobat.com, un ensemble de services d’Adobe dont notamment les impressionants Buzzword (traitement de texte avancé) et ConnectNow (pour le travail collaboratif)
  • Aviary, un suite d’outil d’édition graphique
  • Le décorateur de Sherwin-Williams, permettant de colorer des pièces d’intérieur ou des extérieurs avec plus d’un millier de couleur. Le rendu est bluffant, et l’on se rend bien compte des possibilités utilisés au niveau du rendu des ombres et des couleurs.
aviary

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Flex :

Bilan

En se basant sur le Flash Player, la technologie Flex a su s’imposer pour devenir très utilisée dès lors que l’on parle d’applications RIA. En effet, en s’appuyant sur l’écosystème Flash déjà existant, elle a su se développer rapidement et communiquer efficacement. Flash étant par définition une technologie graphique, il est normal que les rendus proposés soient de qualité supérieure aux interfaces “classiques”. Le virage open source pris par Flex va certainement changer l’évolution de cette technologie qui semble atteindre une certaine maturité.

avr 10
Fiche technologie - Silverlight
icon1 Fabien Deshayes | icon2 RIA | icon4 10 avril 2009 |  icon3Aucun commentaire »
silverlight_logo

Présentation

Silverlight est la technologie riche de Microsoft. Autrefois appelée WPF/E (Windows Presentation Foundation / Everywhere), cette technologie a été renommée Silverlight puis présentée lors de l’événement MIX 07 de Microsoft. La première version disponible fut la 1.0 bêta, lancée en même temps que Silverlight 1.1 alpha. A l’heure actuelle, la version 2 est sortie en octobre 2008 et la version 3 est en préparation (prévue pour courant 2009).
Silverlight est une machine virtuelle ou plugin permettant d’exécuter des applications Silverlight sur différents systèmes d’exploitations (Windows, Mac OS, Linux via le projet Moonlight) à l’intérieur de différents navigateurs (Internet Explorer, Firefox, Safari). Grâce à son moteur de rendu vectoriel, Silverlight souhaite offrir de nouvelles expériences beaucoup plus riches aux utilisateurs. Un raccourci rapide serait de dire que Silverlight est le FlashPlayer de Microsoft. Elle fut en effet proclamée comme telle lors de sa sortie, beaucoup de personnes parlant alors de “Flash-killer”.

Principes et caractéristiques

Comme la plupart des technologies permettant de réaliser des applications riches, Silverlight se découpe en couches.

  • La première concerne la description de l’interface, faite à l’aide d’une syntaxe XML propre à Microsoft, le XAML. L’avantage de cette syntaxe est qu’elle permet de visualiser plus simplement l’agencement des éléments qu’avec un langage impératif. De plus, Microsoft fournit un outil (ExpressionBlend) permettant de visualiser le rendu du XAML à la volée (on parle alors de WYSIWYG (What You See Is What You Get)).
  • La seconde décrit la logique de l’application, son comportement à avoir en fonction des interactions de l’utilisateur. Cette partie est réalisée en utilisant l’un des langages compatibles avec Silverlight, soit du C#, duVisual Basic, du JavaScript, du Python ou du Ruby. Ainsi, n’importe quel développeur connaissant l’un de ces langages pourra aisément développer une application Silverlight.
  • Enfin, la dernière couche concerne la diffusion et le déploiement. Une application Silverlight s’exécute dans un navigateur, via leplugin du même nom. Il faut donc déposer certains fichiers sur un serveur web : un “conteneur” html qui inclura l’application et un fichier .xap qui est une archive compressée contenant les ressources et le contenu de l’application.

Bien que la version 1 de Silverlight ait apporté quelques fonctionnalités intéressantes (lecture de vidéo haute qualité, DeepZoom), la communauté a vite pointé quelques manques qui ont pour la plupart été comblés avec la version 2. Silverlight propose entre autres les fonctionnalités suivantes :

  • un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
  • le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
  • la possibilité d’accéder au DOM (Document Object Model) de la page html servant de “conteneur” et ainsi d’interagir avec
  • la lecture de médias (vidéo, audio) dans les formats VC1, WMV, WMA, MP3 et des images de types GIF, JPG et PNG
  • la lecture / écriture de fichiers XML
  • la lecture d’un flux ATOM et RSS
  • l’intégration du composant LINQ permettant de requêter des données grâce à une syntaxe proche du SQL et de le transcrire en XML
  • la communication externe avec des appels http, webservice ou la gestion de sockets

Bien évidemment, d’autres fonctionnalités sont disponibles. Pour avoir une vue d’ensemble, vous pouvez consulter le Silverlight 2.0Developer Reference.

silverlight_2_poster

Outils

Le développement d’une application Silverlight se réalise notamment autour de plusieurs outils. Bien qu’il existe de nombreux environnements pour développer en .NET, la solutionVisual Studio est la plus à même de convenir aux développeurs Silverlight. Il suffit pour ce faire d’installer une extension gratuite, les Microsoft Silverlight Tools. La suite Visual Studio est un IDE très répandu parmi les développeurs de très bonne qualité, ce qui ne dépayse pas le développeur .NET.
Il faut toutefois savoir que Visual Studio permet de développer le code de “logique applicative” ainsi que d’écrire du XAML, mais il existe un outil bien plus spécifique pour ce dernier : Expression Blend.
Expression est une suite logicielle de création graphique et numérique. Le logiciel Expression Blend va permettre de créer des interfaces riches (donc du XAML) très facilement avec son système WYSIWYG. Les éléments graphiques sont directement positionnés sur l’application et le XAML est généré, bien qu’il soit possible de l’éditer. Attention toutefois, Expression Blend ne permet pas d’éditer le code de “logique applicative”.
Pour pouvoir développer entièrement une application Silverlight, on va alors avoir besoin de deux outils : Visual Studio et Expression Blend.

Points forts

Bien qu’étant une technologie récente, Silverlight a tout de même de nombreux points forts. Microsoft a su produire un plugin de qualité qui, sans pour autant rattraper le retard sur le Flash Player, a su se faire remarquer dans le domaine des RIA, et ce pour plusieurs raisons :

  • tout d’abord en axant sa communication en partie autour de la qualité vidéo, offrant son propre service de streaming et une très belle qualité d’image. A l’heure où la vidéo sur Internet occupe une place prépondérante, Microsoft a donc pu s’en servir comme fer de lance de sa technologie.
  • des composants intéressants et novateurs, comme le DeepZoom qui permet de visualiser des images et des documents de grande taille en offrant un agrandissement très fluide.
  • le support de différents langages de programmation, permettant ainsi de toucher plus de développeurs ainsi qu’une plus grande communauté.
  • un environnement de développement éprouvé et apprécié : en effet, Visual Studio est un outil bien connu et très utilisé.

Points faibles

Toutefois, Silverlight reste une technologie encore jeune. Pour afficher les applications Silverlight, un plugin est nécessaire et son déploiement sur les navigateurs prendra forcément de nombreuses années. Il existe toutefois un site qui donne des chiffres en se basant sur les statistiques de visites de sitesweb par des utilisateurs lambda. On s’aperçoit que Silverlight est installé sur plus de 16% des ordinateurs, ce qui représente un chiffre relativement faible comparé au taux d’installation du FlashPlayer, mais impressionnant en sachant que celui-ci n’est présent que depuis un an et demi. Microsoft annonçait en octobre 2008 30% de pénétration aux USA et jusqu’à 50% dans certains pays.
Bien que l’utilisation de Visual Studio soit un plus dans le développement d’une application Silverlight, le fait d’avoir besoin de deux logiciels pour travailler est relativement gênant : il n’existe pas de réel outil complet pour créer des applications Silverlight. Peut-être dans un futur proche ?
Enfin, les sources et les exemples sur le net reste assez peu nombreux. La technologie reste jeune et ne bénéficie pas, si on la compare à la technologieFlex, d’un passé de 10 ans (issu de Flash). Les documentations et autres exemples sont donc plus rares, tout comme les compétences.

Le futur

Silverlight prépare sa version 3 qui sortira courant 2009, et l’on sait d’ores et déjà qu’elle se dirige vers des fonctionnalités déjà présente dans le Flash Player, notamment :

  • la prise en charge de la norme h264 pour des vidéos de haute qualité
  • le support de la 3D en utilisant les ressources de la carte graphique
  • une vue graphique (WYSIWYG) entièrement intégrée dans l’outil de développement (Visual Studio)

Mais également une amélioration du data-binding et de nouveaux contrôles.

Le futur de Silverlight se dirige également vers les mobiles ! Ce marché très en vue actuellement se verra doté d’une version spécifique (appelée Silverlight Mobile), basée sur Silverlight 2 et qui sera disponible surWindows Mobile vers la fin 2009.

Références

Voici quelques applications réalisées avec Silverlight :

silverlight_france_televisions


On peut retrouver de nombreuses démonstrations sur le showcase du site Silverlight

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Silverlight :

Bilan

En un peu plus de 2 ans d’existence, Silverlight a su devenir l’une des technologies riches principales du marché, porté par les efforts de Microsoft et de ses nombreux partenaires pour la mettre en avant et la valoriser. Malgré que sa jeunesse la desserve sur certains points comme parfois le manque d’informations ou le taux de pénétration encore “faible”, la technologie Silverlight offre de belle capacités techniques en se positionnant entre autres sur le domaine de la vidéo. En utilisant au mieux ses outils existants (Visual Studio) et en misant sur la pluralité des langages, elle est a même de toucher le plus grand nombre de développeurs possibles, et donc d’utilisateurs.
On suivra donc bien évidemment la troisième version ainsi que le portage sur mobile prévus en 2009.