Xam Xamlé Nouvelles Technologies & Client Riche Sébastien Letélié 10 janvier 2008 www.itaware.eu

Xam Xamlé

Sommaire Evolution des architectures Qu’est ce que RIA, RDA, RMA, RCP …? Technologies du client riche L’approche Web 2.0 avec AJAX La vision Microsoft La percée d’Adobe La continuité de Sun La démarcation d’Eclipse La stratégie Google Et les autres… Communication client/serveur Mode déconnecté Quelles technos pour quels besoins ? L’importance du SOA Architectures émergentes et nouveaux rôles

Evolution des architectures

Qu’est ce que RIA, RDA, RMA, RCP …?

Technologies du client riche

L’approche Web 2.0 avec AJAX

La vision Microsoft

La percée d’Adobe

La continuité de Sun

La démarcation d’Eclipse

La stratégie Google

Et les autres…

Communication client/serveur

Mode déconnecté

Quelles technos pour quels besoins ?

L’importance du SOA

Architectures émergentes et nouveaux rôles

Evolutions des architectures Client Réseau Serveur Riche Léger Lourd SQL Socket HTML, XML/XSLT HTTP XML, JSON HTTP, SOAP, MQ

Qu’est ce que RIA … ? Rich = Meilleure expérience utilisateur Gestion du mode déconnecté Pallier les contraintes du Web (fin du modèle HTTP request/response) Émergence du SOA Séparation des tâches : conception / design / développement RIA Rich Internet Application RWA Rich Web Application RDA Rich Desktop Application RMA Rich Mobile Application RCP Rich Client Platform RWP Rich Web Platform

Rich =

Meilleure expérience utilisateur

Gestion du mode déconnecté

Pallier les contraintes du Web (fin du modèle HTTP request/response)

Émergence du SOA

Séparation des tâches : conception / design / développement

Technologies du client riche L’approche Web 2.0 avec AJAX La vision Microsoft La percée d’Adobe La continuité de Sun La démarcation d’Eclipse La stratégie Google Et les autres…

L’approche Web 2.0 avec AJAX

La vision Microsoft

La percée d’Adobe

La continuité de Sun

La démarcation d’Eclipse

La stratégie Google

Et les autres…

L’approche Web 2.0 avec AJAX AJAX : Asynchronous Javascript And XML XMLHttpRequest / Iframe invisible DOM + CSS XML ou JSON Objectif : pouvoir ne rafraîchir que les composants qui en ont besoin suivant les actions de l’utilisateur Plus de rafraichissement complet Une page unique Historique Techno existante depuis longtemps Mais problématiques majeures: interprétation différente des navigateurs du code Javascript Difficulté de débuggage Pas d’IDE DHTML fut une première étape

AJAX : Asynchronous Javascript And XML

XMLHttpRequest / Iframe invisible

DOM + CSS

XML ou JSON

Objectif : pouvoir ne rafraîchir que les composants qui en ont besoin suivant les actions de l’utilisateur

Plus de rafraichissement complet

Une page unique

Historique

Techno existante depuis longtemps

Mais problématiques majeures:

interprétation différente des navigateurs du code Javascript

Difficulté de débuggage

Pas d’IDE

DHTML fut une première étape

L’approche Web 2.0 avec AJAX Pourquoi maintenant ? Emergence d’API : prototype, dojo, scriptaculous Emergence de framework de composants : Rialto, Ext … Emergence des outils : Eclipse ATF Firebug GWT Volta Que devient l’existant : JSF, Struts, WebObjects, Wicket, ASP… ? Complémentarité Rialto JSF, PHP… WebObjects & Project Wonder A terme ces framework ne seront peut être plus utilisés que pour la partie serveur Abandon des JSP, WOD

Pourquoi maintenant ?

Emergence d’API : prototype, dojo, scriptaculous

Emergence de framework de composants : Rialto, Ext …

Emergence des outils :

Eclipse ATF

Firebug

GWT

Volta

Que devient l’existant : JSF, Struts, WebObjects, Wicket, ASP… ?

Complémentarité

Rialto JSF, PHP…

WebObjects & Project Wonder

A terme ces framework ne seront peut être plus utilisés que pour la partie serveur

Abandon des JSP, WOD

La vision Microsoft Silverlight RWA Sous-ensemble de WPF WPF (Windows Presentation Foundation) RDA Bibliothèques de composants riches XAML WCF (Windows Communication Foundation) 70% du .NET 3.0 SOAP, HTTP, Socket, MQ … CLR (Common Language Runtime) IronPython, IronRuby, C++, C#, VB.NET Volta Recompilateur Web de formulaire WinForms Outils Visual Studio 2008 Expression Tools (Blend, Media, Web, Design)

Silverlight

RWA

Sous-ensemble de WPF

WPF (Windows Presentation Foundation)

RDA

Bibliothèques de composants riches

XAML

WCF (Windows Communication Foundation)

70% du .NET 3.0

SOAP, HTTP, Socket, MQ …

CLR (Common Language Runtime)

IronPython, IronRuby, C++, C#, VB.NET

Volta

Recompilateur Web de formulaire WinForms

Outils

Visual Studio 2008

Expression Tools (Blend, Media, Web, Design)

XAML Exemples Démo <Page xmlns=&quot;&quot;> <TextBlock> Salut, le Monde! </TextBlock> </Page> <windows Width=&quot;600&quot; Height=&quot;480&quot; Text=&quot;Mon Programme&quot;> <FlowPanel> <Label Name=&quot;Montexte&quot; FontSize=&quot;20&quot;> Mon application </label> <Button Width=&quot;80&quot; Click=&quot;BoutonClic&quot;> Fermer </Button> </FlowPanel> </windows>

Exemples

Démo

La vision Microsoft Points Forts Vidéo Richesse des composants Multi-Langage Communauté existante Points Faibles Totalement propriétaire Faible pénétration du plugin Peu mature doit faire ses preuves

Points Forts

Vidéo

Richesse des composants

Multi-Langage

Communauté existante

Points Faibles

Totalement propriétaire

Faible pénétration du plugin

Peu mature doit faire ses preuves

La percée d’Adobe FLEX RWA Extension de Flash pour l’entreprise Bibliothèque de composants d’informatique de gestion formulaire & tableau MXML AIR RDA FlashPlayer + Flex Communication Web Services (SOAP/AMF/HTTP) MQ (BlazeDS) Langage ActiveScript 3.0 Outils FlexBuilder : Eclipse plugins Thermo

FLEX

RWA

Extension de Flash pour l’entreprise

Bibliothèque de composants d’informatique de gestion

formulaire & tableau

MXML

AIR

RDA

FlashPlayer + Flex

Communication

Web Services (SOAP/AMF/HTTP)

MQ (BlazeDS)

Langage

ActiveScript 3.0

Outils

FlexBuilder : Eclipse plugins

Thermo

MXML & Action Script 3 Exemples & DEMO Appel de service Data binding <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; applicationComplete=&quot;employees.send()&quot;> <mx:HTTPService id=&quot;employees&quot; useProxy=&quot;false&quot; method=&quot;POST&quot; url=&quot;http://localhost:8080/test/employees.jsp&quot; /> <mx:DataGrid dataProvider=&quot;{employees.lastResult.people.person}&quot; width=&quot;60%&quot;> <mx:columns> <mx:DataGridColumn dataField=&quot;name&quot; headerText=&quot;Name&quot;/> <mx:DataGridColumn dataField=&quot;age&quot; headerText=&quot;Age&quot;/> <mx:DataGridColumn dataField=&quot;skills&quot; headerText=&quot;Skills&quot;/> </mx:columns> </mx:DataGrid> </mx:Application>

Exemples & DEMO

Appel de service

Data binding

MXML & Action Script 3 Exemples Event Driven Programming <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Button xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; width=&quot;104&quot; height=&quot;28&quot; cornerRadius=&quot;10&quot; fillColors=&quot;[#00ff00, #00B000]&quot; label=&quot;Add Item&quot; fontSize=&quot;12&quot; click=&quot;greenClickEventHandler()&quot;> <mx:Metadata> [Event(name=&quot;addItemEvent&quot;, type=&quot;flash.events.Event&quot;)] </mx:Metadata> <mx:Script> <![CDATA[ private function greenClickEventHandler():void{ trace(&quot; Ouch! I got clicked! Let me tell this to the world.&quot;); dispatchEvent(new Event(&quot;addItemEvent&quot;, true)); } ]]> </mx:Script> </mx:Button>

Exemples

Event Driven Programming

La percée d’Adobe Points Forts Pénétration du plugin Flash > 98% Communauté importante Flex 3 SDK sera open source Flex Builder en Eclipse Intégration avec applications Web existantes Blaze DS gratuit Indépendant de la techno coté serveur Points Faibles Solution propriétaire Adaptation au monde de l’entreprise Nécessité de maitriser un nouveau langage Dépendant du Flash Player

Points Forts

Pénétration du plugin Flash > 98%

Communauté importante

Flex 3 SDK sera open source

Flex Builder en Eclipse

Intégration avec applications Web existantes

Blaze DS gratuit

Indépendant de la techno coté serveur

Points Faibles

Solution propriétaire

Adaptation au monde de l’entreprise

Nécessité de maitriser un nouveau langage

Dépendant du Flash Player

La continuité de Sun JavaFX Ensemble d’outils pour la mise en œuvre d’applications RIA Java FX Script F3 – Chris Oliver Langage de script pour la conception rapide de UI riches Java FX Mobile J2ME + API Swing - le retour Amélioration des performances depuis Java 6 SwingLabs JDIC, SwingX Outils NetBeans 6.0 Java FX Pad NetBeans Platform RCP

JavaFX

Ensemble d’outils pour la mise en œuvre d’applications RIA

Java FX Script

F3 – Chris Oliver

Langage de script pour la conception rapide de UI riches

Java FX Mobile

J2ME + API

Swing - le retour

Amélioration des performances depuis Java 6

SwingLabs

JDIC, SwingX

Outils

NetBeans 6.0

Java FX Pad

NetBeans Platform

RCP

Exemple de code Java FX Script import javafx.ui.*; import javafx.ui.canvas.*; import java.util.Date; import java.lang.Math; import java.lang.System; public class Timer { private attribute elapsed: Number; public attribute minutes: Number; public attribute seconds: Number; public attribute hours: Number; public attribute running: Boolean; } attribute Timer.elapsed = bind if running then [1..20] dur 1000 linear while running continue if true else 0; trigger on Timer.elapsed = value { var now = new Date(); minutes = now.getMinutes(); seconds = now.getSeconds() + (now.getTime() % 1000)/1000; hours = now.getHours(); } public class Clock extends CompositeNode { public attribute ticking: Boolean; } operation Clock.composeNode() { var t = Timer {running: bind ticking}; return Group { var font = new Font(&quot;Dialog&quot;, &quot;PLAIN&quot;, 15) var secs = bind t.seconds var mins = bind t.minutes + secs/60 var hrs = bind t.hours + mins/60 content:[ Rect { height: 200, width: 5000, fill: white}, Circle {cx: 100, cy: 100, radius: 80, fill: white, stroke: black, strokeWidth: 1}, Group { transform: translate( 100, 100 ) content: foreach( i in [1..12] ) Text { var radians = Math.toRadians( 30 * i - 90 ) transform: [translate( 70*Math.cos( radians ), 70*Math.sin( radians ) )] content: &quot;{i}&quot; valign: MIDDLE, halign: CENTER } }, Group { transform: translate(100, 100) var hourHand = Line {x1: 0, y1: 0, x2: 0, y2: -35, strokeWidth: 4, stroke: black transform: bind rotate(hrs*30, 0, 0) } var minuteHand = Line {x1: 0, y1: 0, x2: 0, y2: -55, strokeWidth: 2, stroke: black, transform: bind rotate(mins * 6, 0, 0) } var secondHand = Line {x1: 0, y1: 0, x2: 0, y2: -75, strokeWidth: 1, stroke: red, transform: bind rotate(t.seconds * 6, 0, 0) } content: [hourHand, minuteHand, secondHand] }, Circle {cx: 100, cy: 100, radius: 3, fill: black, stroke: black } ] }; }

content:[

Rect { height: 200, width: 5000, fill: white},

Circle {cx: 100, cy: 100, radius: 80, fill: white, stroke: black, strokeWidth: 1},

Group {

transform: translate( 100, 100 )

content: foreach( i in [1..12] )

Text {

var radians = Math.toRadians( 30 * i - 90 )

transform: [translate( 70*Math.cos( radians ), 70*Math.sin( radians ) )]

content: &quot;{i}&quot;

valign: MIDDLE, halign: CENTER

}

},

Group {

transform: translate(100, 100)

var hourHand =

Line {x1: 0, y1: 0, x2: 0, y2: -35,

strokeWidth: 4, stroke: black

transform: bind rotate(hrs*30, 0, 0)

}

var minuteHand =

Line {x1: 0, y1: 0, x2: 0, y2: -55,

strokeWidth: 2, stroke: black,

transform: bind rotate(mins * 6, 0, 0)

}

var secondHand =

Line {x1: 0, y1: 0, x2: 0, y2: -75,

strokeWidth: 1, stroke: red,

transform: bind rotate(t.seconds * 6, 0, 0)

}

content: [hourHand, minuteHand, secondHand]

},

Circle {cx: 100, cy: 100, radius: 3, fill: black, stroke: black }

]

};

}

La continuité de Sun JSR : Swing Application Framework & Beans Binding Démos Joshua Marinacci : LightOut Roman Strobl : NetBeans 6.0 Points Forts API ouvertes API complètes Communauté très importante Historique Sécurité Points Faibles Pénétration de la JVM Temps de chargement, taille et installation du plugin Consumer JRE Outils de design pour Java FX Script Java FX Designer

JSR : Swing Application Framework & Beans Binding

Démos

Joshua Marinacci : LightOut

Roman Strobl : NetBeans 6.0

Points Forts

API ouvertes

API complètes

Communauté très importante

Historique

Sécurité

Points Faibles

Pénétration de la JVM

Temps de chargement, taille et installation du plugin

Consumer JRE

Outils de design pour Java FX Script

Java FX Designer

La démarcation d’Eclipse Eclipse RCP Rich Client Platform SWT+JFace Nebula Widgets Eclipse Data Binding EXSWT BIRT : Business Intelligence Reporting Tool Eclipse RAP Rich Ajax Platform &quot; build rich, Ajax-enabled Web applications by using the Eclipse development model &quot; RWT+JFace QOOXDOO (Inoopract)

Eclipse RCP

Rich Client Platform

SWT+JFace

Nebula Widgets

Eclipse Data Binding

EXSWT

BIRT : Business Intelligence Reporting Tool

Eclipse RAP

Rich Ajax Platform

&quot; build rich, Ajax-enabled Web applications by using the Eclipse development model &quot;

RWT+JFace

QOOXDOO (Inoopract)

EXSWT DEMO RCP & RAP XSWT Dave J. Orme SWT en XML 30% de code en moins Couplage lâche EXSWT Tom Shindl XBL <w:composite background=&quot;#82cff1&quot;> <a:layout x:class=&quot;gridLayout&quot; f:numColumns=&quot;2&quot; /> <w:label background=&quot;#82cff1&quot; text=&quot;Raison :&quot;> <a:layoutData x:class=&quot;gridData&quot; f:horizontalAlignment=&quot;GridData.END&quot; /> </w:label> <w:text w:style=&quot;SWT.BORDER&quot; x:id=&quot;callReason&quot; font=&quot;Arial,10,SWT.BOLD&quot;> <a:layoutData x:class=&quot;gridData&quot; f:widthHint=&quot;320&quot; f:horizontalAlignment=&quot;GridData.BEGINNING&quot; /> </w:text> <w:label background=&quot;#82cff1&quot; text=&quot;Type :&quot;> <a:layoutData x:class=&quot;gridData&quot; f:horizontalAlignment=&quot;GridData.END&quot; /> </w:label> <v:comboViewer x:id=&quot;missionType&quot; v:style=&quot;SWT.READ_ONLY&quot; font=&quot;Arial,10,SWT.BOLD&quot;> <a:combo.layoutData x:class=&quot;gridData&quot; f:widthHint=&quot;120&quot; f:horizontalAlignment=&quot;GridData.BEGINNING&quot; /> </v:comboViewer> </w:composite>

DEMO RCP & RAP

XSWT Dave J. Orme

SWT en XML

30% de code en moins

Couplage lâche

EXSWT Tom Shindl

XBL

Eclipse Data Binding Design Pattern Observer Conversion Validation Noyau indépendant d’Eclipse org.eclipse.core.databinding Implémentation pour GWT Realm.runWithDefault(SWTObservables.getRealm(Display.getCurrent()), new Runnable() { public void run() { DataBindingContext dbc = new DataBindingContext(); dbc.bindValue(SWTObservables.observeText((Text) controls.get(&quot;number&quot;), SWT.FocusOut), BeansObservables.observeValue(criterias, &quot;number&quot;), null, null); dbc.bindValue(SWTObservables.observeSelection((Button) controls.get(&quot;isGroup&quot;)), BeansObservables.observeValue(criterias, &quot;group&quot;), null, null); } });

Design Pattern Observer

Conversion

Validation

Noyau indépendant d’Eclipse

org.eclipse.core.databinding

Implémentation pour GWT

La démarcation d’Eclipse Points forts RAD Multi plates-formes Formulaires / Wizards / Editeur Modularité Equinox Points d’extension Points Faibles Visual Editor Instanciations WindowsBuilber Communauté stagnante Richesse des composants

Points forts

RAD

Multi plates-formes

Formulaires / Wizards / Editeur

Modularité

Equinox

Points d’extension

Points Faibles

Visual Editor

Instanciations WindowsBuilber

Communauté stagnante

Richesse des composants

La stratégie Google GWT : Google Web Toolkit Compilateur de code Java en Javascript Masque la complexité de Javascript Facilite le debug Ouvre la porte de l’AJAX au développeur JAVA Gère les incompatibilité entre navigateurs Obfuscation de code => plus léger

GWT : Google Web Toolkit

Compilateur de code Java en Javascript

Masque la complexité de Javascript

Facilite le debug

Ouvre la porte de l’AJAX au développeur JAVA

Gère les incompatibilité entre navigateurs

Obfuscation de code => plus léger

La stratégie Google Google Gears Plugin de navigateur permettant d’étendre la bibliothèque Javascript notamment pour gérer le mode déconnecté Dion Almaer : « Gears is mistakenly seen to be about &quot;offline&quot;, when that is just the surface » Extension du navigateur avec des API Image Manipulation Desktop Shortcut Location WorkerPool Messaging Blob Crypto Android OS pour téléphone mobile Google Maps et Streets Ne fournit pas de solution RIA mais offre des outils pour l’intégrer dans ses applications

Google Gears

Plugin de navigateur permettant d’étendre la bibliothèque Javascript notamment pour gérer le mode déconnecté

Dion Almaer : « Gears is mistakenly seen to be about &quot;offline&quot;, when that is just the surface »

Extension du navigateur avec des API

Image Manipulation

Desktop Shortcut

Location

WorkerPool

Messaging

Blob

Crypto

Android

OS pour téléphone mobile

Google Maps et Streets

Ne fournit pas de solution RIA mais offre des outils pour l’intégrer dans ses applications

Et les autres … OpenLazlo XUL / Prism / XULRunner Akrogen / Tk-UI Wazaabi Appcelerator Widget Server

OpenLazlo

XUL / Prism / XULRunner

Akrogen / Tk-UI

Wazaabi

Appcelerator

Widget Server

Communications client/serveur Web Services / SOAP WCF, JAX-WS, Axis2, Xfire Client Javascript ? REST Messaging (MOM) BlazeDS Google Gears Applet+JMS Sérialization WebObjects EODistribution framework Spring HTTP Invoker JSON/XML Push BlazeDS Applet Comet

Web Services / SOAP

WCF, JAX-WS, Axis2, Xfire

Client Javascript ?

REST

Messaging (MOM)

BlazeDS

Google Gears

Applet+JMS

Sérialization

WebObjects EODistribution framework

Spring HTTP Invoker

JSON/XML

Push

BlazeDS

Applet

Comet

Mode Push : Comet Long lived HTTP request via XmlHttpRequest Pushlet démo Doit être supporté par le serveur Jetty, Apache2.2, Glassfish Gmail, Gtalk, Meebo utilisent déjà cette technique

Long lived HTTP request via XmlHttpRequest

Pushlet démo

Doit être supporté par le serveur

Jetty, Apache2.2, Glassfish

Gmail, Gtalk, Meebo utilisent déjà cette technique

Mode déconnecté Java DB Apache Derby Google Gears DOJO offline Firefox 3 Gestion du mode déconnecté ! Synchronisation

Java DB

Apache Derby

Google Gears

DOJO offline

Firefox 3

Gestion du mode déconnecté

! Synchronisation

Bilan Collaboration graphiste / développeur Format pivot : XAML, MXML, HTML/DOM, Java FX Script Importance d’un langage de définition d’UI (script ou XML) Communication La notion de service n’a jamais été aussi importante Toutes les formes de communication ont leur intérêt Mode déconnecté De plus en plus demandé Mode dégradé Mobilité Eléments prépondérant DataBinding client Event Driven Programming

Collaboration graphiste / développeur

Format pivot : XAML, MXML, HTML/DOM, Java FX Script

Importance d’un langage de définition d’UI (script ou XML)

Communication

La notion de service n’a jamais été aussi importante

Toutes les formes de communication ont leur intérêt

Mode déconnecté

De plus en plus demandé

Mode dégradé

Mobilité

Eléments prépondérant

DataBinding client

Event Driven Programming

Quelles technos pour quels besoins Aucune solution ne fait tout Bien connaître les avantages et inconvénients Avoir un minimum de retour d’expérience sur chaque S’assurer de la pérennité Communauté Opensource vs commercial Outils de développement et de design Mixer les technologies IRIS démo

Aucune solution ne fait tout

Bien connaître les avantages et inconvénients

Avoir un minimum de retour d’expérience sur chaque

S’assurer de la pérennité

Communauté

Opensource vs commercial

Outils de développement et de design

Mixer les technologies

IRIS démo

L’importance du SOA Les échanges client / serveur Le client riche implique un nouveau mode d’échange sur le web La combinaison des technologies Du Flex avec du Java, du Rialto avec du PHP Les tests La délimitation des fonctionnalités La souplesse Meilleure évolutivité Facilité de maintenance Le SOA devient une nécessité pour la pérennité des applications

Les échanges client / serveur

Le client riche implique un nouveau mode d’échange sur le web

La combinaison des technologies

Du Flex avec du Java, du Rialto avec du PHP

Les tests

La délimitation des fonctionnalités

La souplesse

Meilleure évolutivité

Facilité de maintenance

Le SOA devient une nécessité pour la pérennité des applications

Les technologies émergentes Orchestration des services : BPM : Business Process Model Machines à états Moteur de règles Intégration ESB : Enterprise Service Bus Facilité de déploiement et maintenance = modularité OSGi démo JSR 277 Java Module System & JSR 291 Dynamic Component Support Architectures EDA : Event Driven Architecture Langages Scripts : Groovy, Ruby, Python, JS … DSL : Domain Specific Language

Orchestration des services :

BPM : Business Process Model

Machines à états

Moteur de règles

Intégration

ESB : Enterprise Service Bus

Facilité de déploiement et maintenance = modularité

OSGi

démo

JSR 277 Java Module System & JSR 291 Dynamic Component Support

Architectures

EDA : Event Driven Architecture

Langages

Scripts : Groovy, Ruby, Python, JS …

DSL : Domain Specific Language

Les nouveaux rôles La persistance du duo développeur/graphiste Plusieurs outils un format L’avènement de l’ergonome Riche mais comment ?! Le médiateur entre l’utilisateur et le réalisateur Le nouvel architecte Penser service Rester objet

La persistance du duo développeur/graphiste

Plusieurs outils un format

L’avènement de l’ergonome

Riche mais comment ?!

Le médiateur entre l’utilisateur et le réalisateur

Le nouvel architecte

Penser service

Rester objet

A surveiller … WebOS Exo Platform Virtualisation Virtual PC, VMWare, QEMU SaaS : Software as a Service Google Docs Zoho Jeux, mondes virtuels et réseaux sociaux

WebOS

Exo Platform

Virtualisation

Virtual PC, VMWare, QEMU

SaaS : Software as a Service

Google Docs

Zoho

Jeux, mondes virtuels et réseaux sociaux

A suivre ... Blogs www.itaware.eu blog.improve.fr ? Xam Xamlé ½ journée par mois

Blogs

www.itaware.eu

blog.improve.fr ?

Xam Xamlé

½ journée par mois