MTI - RIA

Tutorial : Helloworld avec Apollo

Après un tutorial sur flex et fluorine, quittons le monde du RIA pour nous intéresser aux RDA (Rich Desktop Applications). Tout comme la RIA, les RDA sont des applications riches du poste de travail. Et voici donc un tutorial basique sur le nouveau né de chez Adobe, j’ai nommé Apollo.

I. Overview

Apollo est un runtime d'exécution permettant la construction d'applications riches de bureau, à l'aide de technologies comme Flash, Flex, AJAX, HTML, JS. Apollo est concurrent des technologies comme .net et Java pour ne citer qu'eux. Il en est qu'à ses débuts avec déjà de grandes possibilités :

• Multiplateforme :      plus besoin de développer différentes versions pour les différents OS.
• Gestion du HTML/JS/CSS/AJAX
• Gestion du PDF
• API de gestion IO :      Nous allons pouvoir enfin, lire, écrire et modifier des fichiers.
• Extension Apollo pour Eclipse : un environnement assez complet pour développer      rapidement.

Voici un diagramme, nous présentant les différentes combinaisons de technologies citées plus haut :

II. Ma première application

Ce tutorial utilise l'extension pour Eclipse (dans un prochain billet, nous parlerons de l'utilisation du compilateur en ligne de commande d'Apollo).

Lançons Eclipse, créons un nouveau projet Apollo (Ctrl + N).

Nous allons construire un projet basique, et nous l'appellerons HelloWorld.

Une application Apollo est basée sur un composant conteneur ApolloApplication qui lui même hérite du composant Application (Flex 2), imaginez le portage de vos applications Flex 2 sous Apollo, il suffit de remplacer Application par ApolloApplication mais nous allons voir que ce n’est pas obligatoire.

Passons en mode design, pour travailler dans un environnement RDA :

1. Sélectionner le conteneur gris (ApolloApplication) et choisissez un mode de placement vertical (par défaut absolute). Il y a 3 modes de placement dont un, le mode absolute est disponible uniquement pour les conteneurs : Panel, TitleWindow, Canvas et Application.
Ce mode permet de placer les composants à l'aide de leurs coordonnées x et y. Les deux autres permettent le placement des composants verticalement et horizontalement.

2. Ajoutons maintenant un contrôle Label que nous trouverons dans l'onglet composants (drag & drop). Ouaa trop dur.

3. Modifions le texte et le style de notre Label. Le contrôle Label se trouve toujours en haut de votre application, nous allons y remédier.

4. Dans le panneau des propriétés, afficher les propriétés par catégories. Dérouler la catégorie Styles et modifier la valeur du style VerticalAlign à middle

 

5. Testons notre application. Pour compiler, nous pouvons cliquer sur la flèche verte en haut ou en utilisant le raccourci (Ctrl + F11). Pour compiler en mode debug, il suffit de cliquer sur l'insecte vert ou avec le raccourci (F11).

Notre application est une application bureau, ce qui implique la possibilité de réduire, agrandir et de fermer l'application.

III. Quelques changements peuvent toujours être utiles

Il existe sous Apollo un fichier XML de configuration de votre application Apollo.

Ce fichier nous permet de définir :

• un attribut appId : identifiant unique de      l'application
• un attribut version : version="major.minor"      - ex : version="1.0"
• un ensemble de propriétés indiquant : un nom, une description,      un auteur et un copyright
• un nœud rootContent : définit l'apparence      de votre fenêtre d'application à l'aide de l'attribut systemChrome      avec deux valeurs possibles : standard (défaut) celle que nous      avons actuellement pour notre application et aucune none à savoir      l'apparence proposée par le composant ApolloApplication.

· des icones : plusieurs formats, un format pour l'icone de la fenêtre, un autre pour l'icone de raccourci bureau et sur l'exe.

Si vous choisissez none pensez à mettre l'attribut transparent à true pour éviter de laisser la couleur de fond par défaut de votre application.

 

Et voila, vous obtenez quelque chose qui ressemble à ça, avouez que c’est bien plus stylé.

Nous arrivons à la fin de ce tutorial consacré à notre première application Apollo. Certes c’est un exemple relativement simpliste, mais son but est de vous présenter ce runtime et de vous faire une idée de ce qu’est une RDA.

Tutorial : Intégration de Flex 2 dans .net grâce à Fluorine.

J’ai eu comme projet de développer une application en flex 2 intégrée dans du .net.  Afin de pouvoir interagir avec des requêtes en C#, j’ai trouvé un tutorial fort intéressant qui m’a permis de comprendre l’utilisation de Flash remoting : Fluorine. Il existe aussi sur le marché « WebOrb » qui supporte  le Flash Remoting (AMF) et les communications via socket. De plus il gère le .net, et le Java.

Pour ce tutoriel, nous allons utiliser Fluorine, qui est la solution de Flash remoting OpenSource, contrairement à WebOrb , gratuit mais limité.

Nous allons développer une application très simple en Flex 2, pour cela, des connaissances en programmation Objet seront nécessaires, plus particulièrement en  .net et bien sûr quelques notions en Flex 2(utilisation de MXML et de AS3). Je précise que je ne rentre pas dans certains détails, que je ne juge pas importants afin de ne pas alourdir la lecture.

I. Téléchargement

 

Télécharger et installer Fluorine : http://fluorine.thesilentgroup.com/fluorine/fluorine.exe

Télécharger et installer Adobe Flex Data Services 2 : ici

 

II. Création du nouveau projet .net et configuration

 

1. Créez un dossier      « FlexFlorine », puis 2 dossiers à l’intérieur de celui-ci      appelés « dotNet » et « Flex » qui serviront pour      stocker les sources de chaque projet.
2. Sous Visual Studio 2005,      Créez un nouveau projet « Empty website » et nommez le « FluorineFlex »      par exemple et indiquez le chemin de votre dossier « dotNet »      précédemment créé.
3. Ajoutez une référence dans      ce projet « FluorineFlex », clic droit, puis  « add      reference », sous l’onglet .net, sélectionnez      « Fluorine ». Ceci permet      à .net de pouvoir utiliser les bibliothèques Fluorine installées.
4. Ajoutez un fichier de      configuration au projet si le fichier « Web.config » n’existe      pas déjà puis ajoutez ces lignes dans la balise      <system.web></system.web>

   <httpModules>

 <add name="FluorineGateway" type="com.TheSilentGroup.Fluorine.FluorineGateway,com.TheSilentGroup.Fluorine" />

 </httpModules>

       5. Ajouter un      fichier « Gateway.aspx » dans le projet, qui servira de      passerelle entre .net et flex 2. Si ce Fichier n’existe pas, vous aurez      une erreur.

        6.Créez un      nouveau dossier « WEB-INF » dans le projet .net. Puis créez un      sous dossier « flex » dans Web-INF. Ajouter un fichier « XML File » dans flex et      nommez le « services-config.xml ». Puis ajouter ces lignes sous      le tag XML :

<services-config>

 <services> 

 <service id="remoting-service"

 class="flex.messaging.services.RemotingService"

 messageTypes="flex.messaging.messages.RemotingMessage">

 <destination id="fluorine">

 <channels>

 <channel ref="my-amf"/>

 </channels>

 <properties>

 <source> *</source>

 </properties>

 </destination>

 </service>

 </services>

 <channels>

 <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">

 <endpoint uri="http://{server.name}:{server.port}/{context.root}/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/>

 </channel-definition>

 </channels>

</services-config>

Ce fichier configure les services à utiliser au sein de .net avec le URI du type : http://localhost/fluorineflex/Gateway.aspx si vous êtes en local, ou sinon votre URL si vous le déployez.

La configuration est terminée pour .net, nous allons voir du côté de Flex 2.

 

III. Créer un nouveau projet Flex 2

 

1. Si ce n’est pas déjà fait,      installez « flex builder » que vous trouverez sur le site      d’Adobe.

Créez un nouveau projet « Flex data services » dans flex, choisissez « Compile application locally in Flex Builder. » puis décochez « Use default local Flex Data Services Location». Puis indiquez les différents chemins comme ceci :

Root folder : chemin vers votre dossier dotNet (D:\Projects\Flexfluorine\dotNet.)

Root URL : chemin vers votre projet .net  sur le serveur (http://localhost/fluorineFlex/), si vous rencontrez des difficultés pour la mise en marche, rajoutez le port, chez moi 1101.

Context Root : dossier du projet (/fluorineFlex).

2. Indiquez ensuite le chemin      où vous allez stocker votre projet Flex, dans notre cas, le dossier Flex      créé dans (D:\Projects\Flex\Flexfluorine\Flex.

IV. Créer un service fluorine pour .net

 

Bon, nous allons enfin pouvoir mettre quelques lignes de code pour faire un test. Pour commencer, revenons sur Visual Studio 2005.

1. Créez une nouvelle classe      dans le projet .net et nommez      le « FlexService.cs » qui      sera directement placé dans « app_code ». Ajoutez un namespace      si vous en avez besoin pour plus tard, et ajoutez une fonction de test :      echo.

using System;

using System.Web;

namespace MyFirstApp

{

 public class FlexService

 {

 public FlexService() { } 

 public string echo(string msg){

 return "helloWorld: " + msg;

 }

}

} 

C’est cette dernière fonction echo, qui sera appelée par flex 2 au sein de son application. Nous y reviendrons pour l’explication dans la dernière partie.

 

V. Création d’une application Flex 2

 

1. Dans Flex, créez un objet      RemoteObject  dans le fichier MXML      principal comme ceci :

· <mx:RemoteObject

·     id="roFlexService"

·     destination="fluorine"

·     source="myFirstApp.FlexService"

·     showBusyCursor="true"

·     result="roResult(event)"

·     fault="roFault(event)"

·     />

 

Explication :

Id : Identifiant de l’objet, qui sera utilisé pour des appels de fonctions.

Destination : Correspond à la destination définie dans le services-config.xml pour utiliser fluorine.

Source : la classe à instancier que nous avons créée dans .net.

Result et fault, correspondent respectivement aux fonctions qui seront appelées suivant que l’événement du RemoteObject a réussi ou pas.

2. Ajoutez dans ce même      fichier, un « input field » et un champ de texte et 2 boutons      comme ceci :

· <mx:TextArea id="taMessage" width="250" height="150"  x="50" y="40"/>

· <mx:TextInput x="50" y="10" id="txtInput" width="185"/>

· <mx:Button x="243" y="10" label="Echo!" id="btnSend" click="submitText()"/>

· <mx:Button x="50" y="198" label="Submit Bad Call" id="btnBad" click="badCall()"/>

 

Explication:

Au click sur l’un des boutons, la fonction correspondante sera appelée via du code AS.  Pour cela, 2 façons de procéder : soit nous mettons le code directement dans le fichier MXML, soit nous le mettons dans un fichier .as à part et nous l’attachons au fichier MXML via les balises  <mx:Script source= monfichier.as></mx:Script>

 

Fichier « monScript.as » :

· import mx.rpc.events.FaultEvent;

·         import mx.rpc.events.ResultEvent;

·        

·         public function submitText():void

·         {

·             roFlexService.echo(txtInput.text);

·         }

·            

·         public function badCall():void

·         {

·             //this won't work because there is no method called badCall()

·             roFlexService.badCall(txtInput.text);

·         }

·            

·         public function roResult(e:ResultEvent):void

·         {

·             taMessage.text = "roResult(e)";

·             taMessage.text += "\n" + e.result;

·         }

·            

·         public function roFault(e:FaultEvent):void

·         {

·             taMessage.text = "roFault(e)";

·             taMessage.text += "\n" + e.fault.faultCode;

·             taMessage.text += "\n" + e.fault.faultString;

·             taMessage.text += "\n" + e.fault.faultDetail;

·         }

 

 

Explication:

Au click sur le bouton “echo”, la fonction  submitText() sera appelée. Cette fonction déclenche l’événement echo de l’objet RemoteObject qui est rattaché à la classe MyfirstApp.FlexService que nous avons créée auparavant dans le projet .net. Echo retourne la chaine « Helloword » suivie de la chaine passée en paramètre qui n’est autre que le contenu saisi dans « input Text ». Tout s’est bien déroulé, donc roResult() sera déclenché , d’où le message dans le champ de texte.

Au click sur le bouton « Submit… », la fonction badCall() sera appelée. Or badCall n’est pas définie dans la classe MysFirstApp.FlexService, donc il y a une erreur. roFault() sera enclenché.

 

Nous avons vu comment Configurer Flex 2 et .net afin d’assurer la communication et d’intégrer flex 2 dans un projet .net. Ce tutoriel part du principe que vous ayez des notions en programmation objet mais aussi en .net et Flex. Certes, ce mini tutoriel est très basique, mais il a pour but de vous guider dans les premiers pas quand à l’utilisation de Fluorine. Pour la suite, je laisse la main à vos imaginations.

J’espère que ce tutorial a pu aider des gens et n’hésitez pas à laisser vos commentaires ou toute remarque.

La guerre des technologies RIA s'intensifie

Des nouvelles techniques de création d'interfaces riches arrivent rapidement sur le marché et ne cessent de se multiplier. Avec Sun qui vient d'annoncer la sortie de JavaFX, Microsoft qui a dévoilé Silverlight, Flex qui s'est déjà fait une place dans le domaine des RIA, la guerre des interfaces riches ne fait que commencer. Les technologies concurrentes pour développer des interfaces riches sont nombreuses et aucune standardisation n'est à l'ordre du jour. Comment chacun des concurrents se positionnera pour s’imposer dans le monde des applications riches ? 

Ajax

Ajax se retrouve sur une lame à double tranchant. Le nombre de frameworks pour Ajax dépasse les 160. Les développeurs peuvent choisir leur framework Ajax selon leurs besoins. Mais ces frameworks sont généralement incompatibles entre eux.

Contrairement aux autres technologies RIA telles que Flex, Lazlo, XUL ou encore les plateformes basées sur le XAML, Ajax n’est pas basé sur modèle déclaratif dérivé du XML. Construire des interfaces riches en JavaScript devient difficile à maintenir et les problèmes de compatibilité d’un navigateur à l’autre ne manquent pas. 

Ajax n’est cependant pas mort. Les plus grands noms de l’informatique ont décidé de s’unir autour d’une initiative de standardisation d’Ajax : Open Ajax. L’avenir d’Ajax se jouera sur sa standardisation et sur sa capacité à s’intégrer aux autres technologies RIA.   

XUL

XUL de la fondation Mozilla a été le pionnier à réaliser des applications riches en décrivant des interfaces web dans un langage open-source dérivant du XML. Pour l'instant, XUL est exécutable et affichable uniquement sur un navigateur dont le moteur graphique passe par Gecko, c'est-à-dire Mozilla. La part de marché mondiale de Firefox est de 16% (alors que Flash Player a un taux de pénétration de 98% parmi les internautes). Sa faiblesse actuelle est qu’il n'existe pour le moment aucun environnement de développement finalisé, spécifique au développement d'application en XUL. Et concernant l’avenir de XUL, il n'y a aucune chance pour que XUL soit reconnu nativement par Internet Explorer.

Silverlight

XAML est comme XUL un langage de description d'interface basé sur XML. Mais il est vu par Microsoft comme un moyen de créer des applications Internet riches. De même que XUL est reconnu par Firefox, XAML est reconnu par Internet Explorer, avec l'avantage d'un nombre d'utilisateur très supérieur. Il complète donc .NET, avec un langage d'interface. Il est fourni nativement avec Vista et est utilisé pour l'interface graphique de Vista.

Microsoft espère détrôner Adobe avec l’annonce de son plugin Silverlight, une alternative à Flash. Silverlight est une version allégée de WPF qui interprète le langage XAML. Pour rattraper le taux de pénétration de Flash, SilverLight utilisera probablement Windows Update.

OpenLazlo

OpenLaszlo est une plate forme de développement Open Source qui permet de construire des applications riches en DHTML ou Flash. Le fonctionnement de Laszlo est proche de celui de Java : le langage LZX (Laszlo XML, basé sur le langage XML et le JavaScript) est exécuté au sein d'un serveur OpenLaszlo (une applet java tournant sur un serveur J2EE) qui renvoie vers le navigateur le fichier SWF compilé. Le Servlet Java d’OpenLaszlo permet de compiler une interface dans 3 technologies différentes : Flash, DHTML/AJAX/Javascript, JAVA ME (avec les mêmes fichiers source). OpenLaszlo se pose donc comme une alternative gratuite et open-source à Flex pour générer des applications riches.

Flex

Flex permet de développer rapidement des applications riches à travers le langage MXML compilé en SWF. L’avantage de Flex est qu’il possède un environnement de développement de qualité basé sur Eclipse. Pour mieux contrer les menaces de Silverlight et OpenLaszlo, Adobe a annoncé le passage de Flex à l’open-source sous la licence Mozilla Public License (MPL). Ce choix stratégique permet de rendre le développement de Flex accessible à tous. Les sources des composants Flex, du SDK, le code source Java pour les compilateurs Actionscript 3 et MXML ainsi que les sources du debugger seront donc disponibles.

JavaFX

Sun Microsystems a présenté JavaFX Script à la conférence JavaOne 2007, une version de Java adapté pour construire des interfaces riches. Il s’adresse donc autant aux développeurs Java qu’aux web designers. JavaFX se veut multi-plateforme. Les applications JavaFX tourneront donc sur toutes les plateformes supportant JavaSE dont les mobiles. JavaFX vient donc s’ajouter aux participants dans la compétition pour la domination des technologies d’applications internet riches.    

La bataille entre les technologies RIA pour s'imposer comme la prochaine plateforme web de référence s’annonce terrible.

OpenAjax: vers une standardisation d'Ajax

Ajax n’est pas une technologie mais une un ensemble de méthodes pour améliorer le confort et la productivité de l’utilisateur en offrant l’ergonomie d’un client lourd dans une page Web.

Ajax combine plusieurs technologies Web:

•  une couche de présentation basée sur les standards XHTML et CSS
•  la modification dynamique des objets composant une page Web en utilisant DOM
•  l’échange et la manipulation de données avec XML et XSLT
• la récupération asynchrone des données par l’objet XMLHttpRequest.

C’est le mélange de toutes ces technologies anciennes qui permettent de donner plus d’interaction avec l’utilisateur et de construire des applications riches et dynamiques.

Ajax a été propulsé par Google qui y a fait d’importants investissements (GMail, Google Maps, Google Groups, Google Suggest). D’autres ont également misé sur Ajax: Flickr, Yahoo Mail, Netvibes, Writely ou encore Goowy. 

De nombreux frameworks et environnements de développement existent déjà pour faciliter et accélérer la construction d’applications en Ajax. Des projets Open Source et commerciaux ne cessent d’apparaître. On en est d’ailleurs à plus de 160 frameworks pour Ajax dont aucun ne s’est réellement imposé. Les possibilités ne manquent pas. Mais la multiplication de ces initiatives a clairement fait apparaître un besoin de standardisation. 

Pour pallier à la lenteur du W3C, les grands acteurs du monde de l’édition, de l’open-source et des communautés utilisatrices ont décidé de s’unir autour d’une standardisation d’Ajax : OpenAjax. Cette initiative, lancée par IBM en février 2006, réunit de grandes organisations telles que BEA Systems, Borland, Eclipse, Google, Laszlo Systems, Mozilla, Oracle, Red Hat, Yahoo, Dojo, Zend, Zimbra. D’autres ont également rejoint le consortium : Adobe, SAP, Intel, Opera et même Microsoft depuis mars 2007.

Cette alliance aura comme principale mission de promouvoir l’interopérabilité entre les technologies en mettant en place des spécifications standards sur Ajax. Son autre mission sera de définir les meilleures pratiques pour développer des applications avec Ajax. 

En utilisant des technologies conformes aux recommandations de l’alliance OpenAjax, les avantages pour les développeurs seraient:

• une intégration plus simple des différentes technologies dans une même application Web
• plus de modularité et d’organisation, donc une meilleure qualité des technologies répondant aux normes OpenAjax
• une baisse des coûts de développement et d’apprentissage et une accélération des développements d’applications riches grâce à des approches standardisées d’Ajax

Pour les éditeurs de logiciels propriétaires et open-source, l’objectif est de développer des outils de développement et des frameworks qui resteraient compatibles sur l’ensemble des systèmes d’exploitation, des navigateurs et des serveurs d’applications.

L’OpenAjax Hub est le nom de code pour désigner l’ensemble des fonctionnalités standards qui permettront d’utiliser rapidement plusieurs frameworks Ajax dans une même application Web. La première version de l’OpenAjax Hub impose ces fonctionnalités :

• Contrôle du chargement et déchargement des bibliothèques Ajax
• Des outils qui minimisent les possibilités de collision entre les objets et les fonctions d’une même page
•  Un hub d’événement qui permet aux bibliothèques de publier et de souscrire à des événements d’une manière fiable en vue de coordonner les différentes actions
• Un détecteur de markup.

Grâce à l’alliance OpenAjax, l’avenir d’Ajax est plutôt prometteur. Favoriser l’interopérabilité des frameworks et outils de développement pour Ajax permettront de développer plus efficacement des applications Web riches. Mais les mashups (agrégation de contenus venant de différents sites Web) représentent tout de même des dangers pour les systèmes d’information : le scripting côté serveur et un code JavaScript malveillant exécuté sur le poste client. Sécuriser les mashup devra être une des missions de l’alliance OpenAjax.

Voici deux liens intéressants:

•  Le site de l'OpenAjax Alliance.
• Le point de vue de John Resig concernant OpenAjax.

Les technologies de demain en concurrence

Le design et l’interactivité des interfaces utilisateurs sont les clefs de réussite des applications modernes. Elles apportent à l’utilisateur des éléments porteurs de sens à l’ instant précis où il en a besoin dans son processus de création et de conception. Elles renforcent également la productivité en utilisant au mieux les éléments du contexte de l’utilisateur.
Mais quels sont les moyens pour réaliser ces designs novateurs et cette interactivité sans précédent ?

Nous connaissons à présent les atouts que possède Adobe avec ses nouvelles technologies (Flex, Flash, Apollo, …) pour le développement d’applications nouvelle génération. De plus, pour marquer le coup, se démarquer et prendre de l’avance face à ses concurrents, Adobe a annoncé il y a de cela un mois que Flex, la plate-forme de développement d’applications riches, deviendra Open Source. Le kit de développement (SDK) et la documentation seront disponibles sous Mozilla Public License (MPL). Pour mieux comprendre leurs motivations, Jeff Whatcott, vice-président en charge de la division développeurs chez Adobe, s’est prononcé : « Pour beaucoup de gens, l'open source est un pré-requis pour considérer l'intégrité et la confiance dans un fournisseur. Nous procédons à la transition vers l'open source car Flex est une technologie mature et que cette démarche doit faire grandir l'intérêt des développeurs pour les applications internet riches ».

Il est évident qu’Adobe a des concurrents sur cette course aux technologies Web 2.0. Ce concept de client riche, c’est pour moi la capacité à allier les avantages des clients légers et des clients lourds. Coté client riche internet (applications déployées sur le Web), que nous avons déjà détaillé dans des précédents articles, on trouve AJAX et Flex. Chacun a ses avantages et ses inconvénients. Des outils et bibliothèques sont apparus facilitant le développement avec AJAX tel Atlas, l’«OS Web » par Microsoft (voir http://www.01net.com/article/310455.html). Pour le développement avec Flex, on trouve l’incontournable Flex Builder. Coté client riche autonome, davantage destiné aux applications d’entreprise, on trouve Sun, Microsoft et IBM qui mettent en œuvre leur propre technologie (voir tableau ci-dessous). Elles sont assez identiques dans leur principe, avec une fonction de déploiement complétant une technologie de client lourd, ainsi que des environnements de développement prenant en compte cette fonction.

Pour revenir à Flex d’Adobe que nous avons d’un coté, nous avons de l’autre Microsoft qui entend bien y faire concurrence. Nous savons tous que Microsoft ne laissera jamais quelqu’un avoir un monopole sans réagir. Tel était déjà le cas lorsque Java est apparu où ils n’ont pu s’empêcher de fournir .Net. C’est donc logiquement que Microsoft a développé un outil pour le développement facile de RIA appelé WPF. Windows Presentation Foundation est la spécification graphique du framework .Net 3.0 et basé sur du XAML. Etant plus récent, WPF a du mal à se faire connaitre et la documentation et les tutoriaux sont encore peu nombreux mais Microsoft compte bien y remédier avec notamment l’inclusion native dans Windows Vista.

L’avenir du Web est à présent tracé, il faut faire un choix sur la technologie que l’on adoptera pour ses futurs projets et les possibilités ne manquent pas.
Microsoft parviendra-t-il à séduire et à prendre une grande part de marché sur le Web et les RIA avec leurs outils de développement d’applications de nouvelles générations face à Adobe qui a déjà bien marqué les esprits ?

Silverlight, l'animation par Microsoft

Cela fait maintenant quelques temps qu’Adobe est leader sur les petites animations avec sa solution Flash très répandue. Dans la majorité des sites assez récents nous trouvons des animations Flash, celles-ci s’y trouvant pour de diverses utilisations (un menu interactif, un diaporama d’images, …).
Mais le temps où il se trouvait seul sur ce marché serait-il révolu ?

L’éditeur de Redmond a présenté il y a environ un mois sa propre alternative comme il le fait si bien à chaque fois. Nommée Silverlight, elle met l’accent sur la vidéo dans le but de détrôner Flash sur des plates-formes communautaires telles que YouTube et MySpace.

Microsoft s’attaque donc au nouveau marché de l’animation pour sites Web. Silverlight est une technologie évoquée jusqu'ici comme Windows Presentation Foundation/Everywhere (WPF/E, intégrée au .NET Framework 3.0). Sur le même principe que le Flash Reader, le lecteur Flash d’Adobe installé sur plus de 95% des ordinateurs connectés sur la toile, elle se présente sous la forme d’un plug-in à télécharger (2 Mo) puis à installer dans le navigateur (voir http://silverlight.net/Default.aspx).
L'additif fonctionne sans surprise avec Internet Explorer, mais aussi avec les navigateurs Safari d'Apple et Firefox de Mozilla. En plus de s’intégrer dans plusieurs navigateurs, elle est également multi plates-formes, mais ces deux choses étaient indispensables pour concurrencer l’incontournable Flash.

Silverlight permet de visionner des animations de type vectorielles, mais surtout des contenus multimédias intégrant de l'audio et de la vidéo. Microsoft met d'ailleurs l'accent sur les vidéos, basées sur le format maison Windows Media Video.
Silverlight pourrait ainsi être un moyen de donner un second souffle à cette technologie qu’est Windows Media Video sur les plates-formes d'échange de contenu, telles que YouTube ou MySpace. Toutes deux ont pour l'instant retenu Flash pour la diffusion de vidéos.

Pour le moment, nous pouvons voir la plate-forme Brightcove utiliser la technologie Silverlight pour la diffusion de vidéos en streaming tel YouTube. La vice-présidente marketing de cette société pense que l’expérience utilisateur de Windows Media Video n’est pas satisfaisante et que la chose la plus intéressante de Silverlight est l’intégration de manière très ergonomique dans le navigateur.

De plus, une version de ce plug-in pour les appareils mobiles est également disponible. Reste donc à savoir quelle sera la réaction d'Adobe au sujet du marché des terminaux mobiles, la marque n'ayant fournie à ce jour qu'une vieillissante version de son logiciel Macromedia Flash qui possède comme principal inconvénient de ne pas être à ce jour intégrée dans les navigateurs Web Internet Explorer ou Opera Mobile.

Avec Silverlight, Microsoft entend bien répondre aux besoins des fournisseurs de contenu qui cherchent de nouveaux moyens de distribuer leurs contenu multimédia ainsi qu'aux attentes des développeurs qui souhaitent pouvoir mettre au point des applications Internet toujours plus riches.
La sortie de Silverlight intervient alors qu’Adobe lance sur le marché la nouvelle version de sa suite de conception graphique CS3, intégrant Flash dans plusieurs logiciels, dont Photoshop.
Pour conclure nous savons que Microsoft finalise par ailleurs la suite Expression, justement destinée aux développeurs et présentée comme un pendant à la Creative Suite 3 d'Adobe.

Une méthode de recherche insolite dans les RIA

Alors que le marché des RIA est en train d'exploser, le site browsegoods.com  propose de modéliser un magasin en se basant sur le célèbre site google map. Les RIA ont déjà proposées plusieurs méthodes de recherche plus ou moins pratiques, voyons voir si cette nouvelle technique d'exploration pour le moins insolite pourra séduire les internautes.

Adobe digital editions : une RIA prometteuse

Sortie tout droit des laboratoires d'ADOBE, cette RIA conçue avec les technologies Flash Player 9 et Flex 2 n'est disponible à ce jour qu'en version BETA mais mérite d'hors et déjà que l'on s'y interesse.
Pour information, la release de ce produit, c'est à dire la version finale devrait, selon ADOBE, être disponible d'ici 2 à 4 mois. 

Les technologies RIA de demain

    Le Web 2.0 et les technologies RIA marquent une nouvelle ère dans le développement web. Les RIA offrent de grandes capacités d’interaction entre l’utilisateur et son application web. Les interfaces sont plus ergonomiques et améliorent la productivité des utilisateurs.

    Pour développer des applications web riches, les entreprises font maintenant face à plusieurs technologies. Pour choisir la technologie adaptée à leurs besoins, il faut connaître les forces et les faiblesses de chacune de ces technologies.

    Les deux technologies qui vont être comparées dans cet article sont:

• AJAX
• Flex

    Basé sur des technologies standards telles que Javascript, XML, HTML et CSS,  AJAX (Asynchronous JavaScript and XML) permet de mieux récupérer les données du serveur sans recharger une page web complète. La classe XmlHttpRequest est utilisée pour communiquer avec le serveur. Elle permet de charger les données des fichiers XML du serveur de manière tout à fait transparente pour l’utilisateur.

    Les avantages pour utiliser AJAX sont d’abord la rapidité de lancement et l’adaptabilité d’AJAX dans les applications web existantes. En effet, le Javascript est utilisable dans les pages HTML. De plus, il existe déjà une grande communauté de développeurs Javascript et HTML expérimentée, ce qui fait que les applications sont développées rapidement. AJAX peut être implémenté sur toute plateforme Web (PHP, JSP, .NET …) Et le coût de déploiement est faible puisqu’il suffit d’un simple navigateur (aucun plugin à installer) pour déployer une application en AJAX.

    Cependant, AJAX souffre de faiblesses qui pourraient faire pencher les entreprises vers d’autres solutions pour concevoir des applications riches. AJAX peut devenir difficile à maintenir et à développer. Le code Javascript n’est pas standardisé et peut se comporter différemment selon les navigateurs et debugger des scripts Javascript peut rapidement devenir cauchemardesque. Le large choix des frameworks permet de faciliter le développement en AJAX. Mais les performances et les fonctionnalités d’AJAX atteignent bientôt leur limite. Il est possible d’intégrer des animations et de la vidéo avec AJAX. Mais il existe des outils bien plus puissants et adaptés pour fournir des medias riches.

     Flex, édité par Adobe, permet d’écrire rapidement des applications basées sur la plateforme Flash dont la principale force réside dans la gestion des medias riches. Le langage de script utilisé est l’ActionScript. Le compilateur de Flex se charge de convertir le code MXML (le langage XML pour manipuler les composants graphiques) en ActionScript puis va créer un fichier binaire en SWF qui sera exécuté sous Flash player. Pour concevoir des graphiques vectoriels, de la vidéo, du chat, de la synchronisation de données dans le cas d'une application de travail collaboratif, les technologies Flash s'avèrent plus appropriées.

 

Flex a beaucoup de points forts :

•  Gestion efficace des interfaces multimédia riches
•  Flash player est présent sur 98% des navigateurs
•  Flash player est présent sur Windows, Linux et Mac
•  Pas de problème de compatibilité entre navigateurs
• Une communauté importante de designers Flash
•  Adobe est un éditeur fiable qui a su montrer la qualité de ses produits (Photoshop, Acrobat reader)
• Le développement avec l’environnement Flex Builder est rapide

Mais aussi des faiblesses :

• Technologie propriétaire, sous licence restrictive
•  FlexBuilder est payant
•  Il n’y a pas encore assez de bons développeurs Flex, les designer Flash ne sont pas forcément des développeurs
  
• Le bouton de retour à la page précédente et le clic droit ne sont pas géré nativement

     Cet article a comparé AJAX et Flex pour développer une RIA. Ces deux technologies ont leur place dans les RIA. Ils répondent à des besoins différents. Mais Flex et AJAX sont des technologies  qui peuvent être complémentaires. Des composants Flex peuvent s’intégrer dans une page AJAX et communiquer ensemble.

Utiliser AJAX pour:

•  Intégrer rapidement le marché
•  Faire progressivement évoluer un site web existant
•  Développer à moindre coût

Utiliser Flex pour:

•  Produire des interfaces riches pour des applications de grande envergure
•  Ajouter des animations et du contenu multimédia riche
• Plus de coopération entre les designers et les développeurs

X-Internet, une prédiction réussie

Les applications web du début du siècle ne fournissaient qu’un contenu classique, utilisant des technologies vieillissantes. Celles-ci proposaient donc que peu de praticité d’utilisation et, hormis les liens hypertextes, une interactivité quasi-nulle.

Partant de ce constat les paris furent pris très tôt sur l’avenir d’internet. Des idées d’évolution sont ainsi apparues dès octobre 2000. Forrester, société de conseil et de recherche en technologies web, apporta son point de vue sur le sujet par le biais d’un rapport de son directeur. Celui-ci y présente sa vision des futurs architectures web et internet qu’il nomme X-Internet (pour executable Internet).

L’X-Internet est selon lui l’évolution logique des pages statiques de l’époque. Les nouvelles applications internet feront télécharger dynamiquement à l’utilisateur du code exécutable, afin de lui fournir du contenu plus précis, plus ciblé et de manière interactive. L’article exprime ses idées de manière très concrète :

"Think of pages versus executables as the difference between reading a book and talking to a friend. Yes, all of those pages in the book are interesting and instructive. But you can't converse with a book the way you can with a friend. You can't cooperate with a book to perform a task. A book won't answer an unexpected question. The Web is like reading a book. An executable-powered Internet is like a two-way conversation."

Les avantages de cette méthode sont selon lui multiples :

• Accès à grande échelle à des services plus performants
• Réduction de la bande passante
• Réorganisation progressive de l’Internet de client-serveur à peer-to-peer

Il attend cette révolution dans les 2 ou 3 années suivantes, et par l’intermédiaire de la communauté plutôt que par l’initiative des grands groupes.

Toutes les prédictions de G.F. Colony se sont révélées exactes. Le principe même de l’executable Internet est ce qui régit les RIA de nos jours, c’est-à-dire le fait de fournir un contenu de meilleure qualité grâce à l’exécution de code coté client. On peut même le rapprocher du concept des RDA. Ces applications à part entière fourniront bientôt des fonctionnalités encore supérieures (ou complémentaires) à celles des RIA.

Le directeur a vu également juste en laissant sous entendre que l’accès à l’internet ne se ferait plus uniquement par le biais d’un ordinateur, mais également à travers d’outils mobiles. Depuis, l’interactivité avec l’internet s’est largement amélioré sur les assistants personnels, les téléphones portables et les consoles de jeux.

Je vous invite à lire le rapport concret et intéressant dont une partie se trouve toujours sur le site de Forrester Research.