Rich Clients

7/22/2019 Rich Clients

1/63

Clients Riches : les

technologies du march

Mickal BARON - 2007 (Rv. Janvier 2009)mailto:[email protected] ou mailto:[email protected]

Etat de lart


2/63


3/63

3Clients Riches - M. Baron - Pagekeulkeul.blogspot.com

Clients Riches

Lobjectif de cette prsentation Essayer de clarifier les informations concernant les clients riches

Aperu global des technologies actuelles et venir

Lister les solutions par plateforme de dveloppement (Java, .NET, )

Mise en place du cours

Diffrents articles et billets sur le web traitant du sujet

Ressources sur Developpez.com

Les clients riches, Valtech Training, Peyrusaubes Denis

Les technologies riches, Fabien Deshayes

Tous les liens de la prsentationsont disponibles directement surmon blog keulkeul.blogspot.com


4/634Clients Riches - M. Baron - Pagekeulkeul.blogspot.com

Diffrents types de client

Dfinition de client Logiciel mdiateur entre lutilisateur et le service propos

Exemples : FTP, messages lectroniques (mailer), navigateur internet,webmail, jeux vido,

Diffrentes catgories de client

Lourd: le service est disponible sur le poste client avec possibilit de

connexion des serveurs

Exemples : Yahoo Messenger, Word, Money, Battlefield 2,

Lger: tout le service est disponible sur des serveurs et lutilisateur y

accde par un conteneur spcialis

Exemples : Google, Yahoo Mail,



Diffrents types dapplication : client lourd

Technologies : Java/Swing, C#/.NET, Tcl/Tk, C++/QT

Avantages

Interfaces utilisateurs riches (WIMP, POST-WIMP)

Inconvnients

Dploiement (utilisation de CD, tlchargement/installation)

Gestion des versions (patch, problme de compatibilit)

Interfaces riches (possibilitde dessiner dans un canvas,

notion hirarchique de

composants, )

Interactions volues

(Drag&Drop, popup menu, )



Diffrents types dapplication : client lger

Application architecture client / serveur Les technologies pour la gnration et le traitement de la

prsentation sont prsentes la fois sur le client mais aussi

sur le serveurTechnologies ct client

HTML, DHTML, JavaScript,

Technologies ct serveurPHP, ASP, JSP, JSF,

Avantages

Maintenance

Accessibilit

Inconvnients

Interfaces utilisateurs pauvres et proches duclassique formulaires



Client lger : Internet et HTTP

Les clients lgers dsignent essentiellement toutes lesapplications associes aux sites Web

Laccs aux services se fait par lintermdiaire dun

conteneur spcialis qui est gnralement un navigateurFireFox, Internet Explorer

Les technologies pour le transport entre le serveur et le

client sontInternet

HTTP, HTTPS

Les sites Web actuels se caractrisent par le fameux modepage par page

A chaque requte de lutilisateur (demande) le serveur gnre unenouvelle prsentation

Laffichage nest pas continu


8/638Clients Riches - M. Baron - Page

keulkeul.blogspot.com

Client lger : Internet lorigine

A lorigine Internet a vocation de diffuser de linformationstatique

HTTP (dconnect)

HTML (langage de description de document)

Dploiement

Universel (protocoles standards etrseau standard)

Un navigateur suffit

Pas prvu pour embarquer desapplications

Afficher des donnes en temps relLe premier navigateur pour

Internet : Mosaic




Client lger : Internet et HTTP

Application Web et page par page

On assiste actuellement lmergence

de nouvelles technologies permettantdviter le mode page par page introduit

par HTTP et Internet

Mode page par page chaque

requte un raffichagepermanent de la prsentation




Client riche : Internet pilier des nouveaux clients

Richesse de lIHM*

A

ccessibilitdelIHM*

Client Lourd

Client Lger

Terminaux

IHM* = Interfaces Homme-Machine


11/63

11Clients Riches - M. Baron - Pagekeulkeu

l.blogspot.com


Depuis peu un nouveau modle dapplication fait sonapparition

Clients riches

Les clients riches reprsentent une fusion des clients lourds et lgers

Interfaces utilisateurs riches

Dploiement et maintenance

Ce sont des applications distantes avec les avantages desapplications locales

Technologie permettant de dvelopper la couche prsentationdune application

La conception dune application en mode page disparat.La reconstruction de la prsentation aprs chaque requtenexiste plus


12/63


l.blogspot.com


Pas de standardisation du terme client riche Pour simplifier, on peut voir les choses de la faon suivante

Clients lourds riches ?

Un client lourd offrant des fonctionnalits de dploiement et de mise

jour facilit

Clients lgers riches ?Un client lger offrant des possibilits dinteractions volues comme

celles proposes par le client lourd

Cest quoi alors le Web 2.0 ?

Gnralement cela sadresse la bulle Internet donc pour le client

lger riche

Un rseau social o les utilisateurs partagent des photos, du texte, de

la vido


13/63


l.blogspot.com


Davantage de traitement sur le poste client (pas trop nonplus)

Bien pourvu en composants graphiques de haut niveau

Facilement accessible (dploiement et mise jour)Ncessite un conteneur sur le poste client (cest plus une

consquence quun impratif)

Navigateur

Java Machine virtuelle

Eclipse RCP

Les clients riches existent depuis environ 4~5 ans avecdes technologies comme

Applet, Active X

Flash

HTML avec une bonne dose de JavaScript


14/63


l.blogspot.com


JWS, EclipseRCP,

ClickOnce.net

Clients Riches Lourds

Flash, Applet,

AJAX, XUL

Clients Riches Lgers

Client WEB

Client non WEB

Couche tudie dans ce

cours

Couche Applicative

Couche Services

Couche donnes

Le serveur ne vhiculeque des donnes via le

protocole HTTP

Persistance des

objets de laprsentation

Technologies

EJB

Outils degestion des

informations

TechnologiesFTP, MAIL

Stockage des

informations

Technologies

Oracle

Le reste de lapplication ne faitpas parti du sujet de ce cours

Ct serveur

Ct client


15/63


l.blogspot.com

Clients riches

Les clients riches sont en pleines volutions et lesstandards ne se sont pas encore tablis et imposs

Les technologies actuelles vont tre remplaces ou

compltes puisquelles ne rpondent plus aux besoinsdinterfaces volues

Applet, Flash, Active X et HTML

Actuellement plusieurs technologies mergent et commencent se confronter

Mozilla avec XUL (XML User Language)

Ajax ( a la mano , GWT)

Flash (Flex, AIR)

Eclipse RCP, Eclipse RAP

.NET, ClickOnce.Net, WPF, XAML, Silverlight de Microsoft

Java (Applet et Java Web Start)

Lvolution des clientsamne une intgrationplus pousse du langage

de description XML


16/63


l.blogspot.com

Clients riches

Quelle que soit la technologie choisie, une notion deconteneur sur le poste client apparat

Le conteneur peut tre de nature diverse

Navigateur Web (Ajax, XUL, )

Interprteur Flash (Flex, Lazsio)

Eclipse RCP, RAP

FrameWork .NET

Machine virtuelle (Applet, JWS)

Pour chaque technologie nous essaierons de les illustrer par

des dmonstrations interactives

Plusieurs conteneurs peuventtre utilises. Exemple Applet une machine

virtuelle et un navigateur


17/63


l.blogspot.com

XUL : XML User Language

XUL (XML User Language) est propos par Mozilla et a t leprcurseur pour ces technologies

Catgorie de client : client lger riche

Lide des dveloppeurs a t de remplacer HTML etdapporter une richesse graphique suprieure

Ce langage possde une srie de balises correspondant des composants graphiques (boutons, menus, listes, )

Gecko est un moteur de rendu de XUL

Le conteneur (cest--dire un navigateur de la famille deMozilla) reoit un fichier au format XUL et gnre du HTML

Dmonstration

www.akbkhome.com/wiki.php/Edit/phpmole_IDE

www.abrahamjoffe.com.au/ben/canvascape


18/63


l.blogspot.com


Applications dans le conteneurFireFox

Composantsgraphiques

volus

01 - WYSIWYG Editor


19/63


l.blogspot.com


Les amliorations de Gecko ontpermis dajouter la notion de

Canvas permettant ainsi dedessiner dans une zone du

document

Safari utilise dj la notionde Canvas pour dessiner les

composants de Dashboard

Sous MAC avecSafari afonctionne

galement !!!Mais pas sous IE

02 - Canvascape


20/63


21/63

AJAX A h J S i t A d XML


22/63


l.blogspot.com

AJAX : Asynchronous JavaScript And XML

Interface Utilisateur

Navigateur

Serveur Web et XML

Serveur

Services ct serveur

(base de donnes, )

Architecture Web avec AJAX

RequteHTTP

Rponse

HTTPTransport HTTP

Interface Utilisateur

Navigateur

Serveur Web

Serveur

Services ct serveur(base de donnes, )

Architecture Web classique

RequteHTTP

RponseHTTP

Transport HTTP

HTML + CSS

AJAX Engine

Appel JavaScript HTML + CSS

HTML + CSS


23/63


24/63


25/63



26/63


l.blogspot.com


04 - Netvibes



27/63


l.blogspot.com


Adresses utiles

ASP.Net Ajax (Microsoft) : www.asp.net/ajax

Sajax : www.modernmethod.com/sajax

Framework JavaScript : prototype.conio.net

DOJO the Javascript toolkit : dojotoolkit.org

DWR : getahead.org/dwr

Script.aculo.us: script.aculo.us

Avis personnels

Rien de nouveau au niveau des technologies, elles existent dj

Rvolutionne la conception dune application web classique : leclassique mode par page est oubli

Rend la maintenance volutive et corrective complexe

Complexit de DHTML

On trane les problmes lis JavaScript (pas de typage fort,peu de dbuggeur vraiment efficace)

AJAX : GWT lAjax pour les nuls


28/63


l.blogspot.com

AJAX : GWT, l Ajax pour les nuls

GWT (Google Web Toolkit) est un framework pour Java pour

le dveloppement dapplications AJAX et qui ne demande pas

de connaissance en Javascript

AvantagesLe langage Java est utilis pour le dveloppement des IHMs

Indpendance du navigateur Web

Simplicit de lAPI

Programmation la sauce client lourd

Adresses utilesSite Google Code : code.google.com/webtoolkit

Dmonstration

GWT Window Manager : www.gwtwindowmanager.org

Google reader : www.google.com/reader


29/63

AJAX : GWT, lAjax pour les nuls


30/63


l.blogspot.com

AJAX : GWT, l Ajax pour les nuls

06 - Google Reader


31/63

Flash


32/63


Flash

Une application FlashEst un binaire issu dune compilation

Extension SWF

Interprte par le plug-in Flash install dans le navigateur

95% des navigateurs du march sont aujourdhui quips du

plug-in flash

Une pseudo machine virtuelle permet de rendre le fichier SWF

indpendant de la plateforme dexcution

Principe contraire au fameux mode page si cher HTML

Pour les animations, les fichiers SWF peuvent tre crs par

loutil WYSIWYG dAdobe Flash (programmation visuelle)Dmonstration : maps.yahoo.com


33/63


34/63


35/63

Flash : Laszlo


36/63


Fonctionne exactement comme le langage de Adobe FLEXUn langage XML pour dcrire les interfaces graphiques

Un langage script pour leurs interactions

Le compilateur est diffrent et ne permet pas de traiter le

langage Flex

Le compilateur gnre galement un fichier Flash au format

SWF

Sappuie sur le plug-in Flash

Open Source licence de type CPL

Dmonstration : www.laszlosystems.com/demos

Flash : Laszlo


37/63


08 - Amazon.com

Flash


38/63


Adresses utiles

Adobe : www.adobe.com/fr/products/flex

Laszlo : www.laszlosystem.com

Avis personnels

A utiliser pour des applications hautement graphiques

Excellent complment Java

Autant de succs que Flash

Spcialiste du design manipule un langage balises

Outill (dans le cas de Flex)


39/63

Eclipse RCP


40/63


Environnement de dveloppement trs utilis

Catgorie de client : client lourd riche

Un noyau trs extensible base de plug-in qui permet

dtendre les fonctionnalits dEclipseAccs aux donnes

Dbuggeur

Gestion de documents XML, Les plug-ins ne sont pas forcment orients dveloppement

Lecteur de mail : GMailEclipse

Jeu : dmineur

A la diffrence des autrestechnologies le support

nest plus le navigateurmais Eclipse


41/63


42/63


43/63


44/63

Eclipse RAP


45/63

45Clients Riches - M. Baron - Pagekeulke

ul.blogspot.com

Eclipse RAP (Rich Ajax Platform) permet le dveloppement

dapplications serveur comme une application Eclipse RCP

Catgorie de client : client lger riche

Une application Eclipse RAP fonctionne dans un conteneur

de type navigateur

La plateforme RAP fournit des quivalents SWTet JFace

appels

RWT (RAP Widget Toolkit)Web-JFace

Le framework RAP est trs proche de celui propos par GWT

dans le sens o le dveloppeur la manire dun client lourd

Eclipse RAP


46/63


ul.blogspot.com

Avantages

Java est utilis pour le dveloppement des IHMs

Le dveloppeur na pas besoin de connatre le javascript

Indpendance du navigateur Web

Programmation par composants via des plug-ins

Adresses utiles

Site Eclipse : www.eclipse.org/rap

RCP vers RAP : www.volanakis.de/nuggets/RCP_Mail_goes_RAP

Dmonstrations

Eclipse RAP : www.eclipse.org/rap/demos.php


47/63


48/63

.NET Framework : Clickonce.net, WPF, XAML, Silverlight


49/63


ul.blogspot.com

Catgorie de client : client lourd riche ?

Les clients sappellent SmartClient

La technologie de dploiement est appele Clickonce.net

Dploiement dapplication .NET (c#, )Gestion de versions de lapplication concerne

Possibilit de revenir une version antrieure

WPF(Windows Presentation Foundation) est le nom de lacouche prsentation travers le framework .NET

WPF permet la sparation de la couche prsentation grce

lutilisation du langage XMLXAML(Extensible ApplicationMarkup Language)

Silverlight (ancien WPF/E) est une technologie permettant

dutiliser WPF sur le web (un plugin est ajout aunavigateur web)

.NET Framework : Clickonce.net, WPF, XAML, Silverlight


50/63


ul.blogspot.com

Adresses utiles

Clickonce.net: msdn.microsoft.com/smartclient

XAML:www.xaml.net

.NET : netfx3.com

silverlight: www.microsoft.com/silverlight

Avis personnels

Cest du Microsoft, outils robustes mais technologie verrouille

Prennit des technologies ?

Uniquement disponibles sur plateforme Windows?

Solutions Java


51/63


ul.blogspot.com

Catgorie de client : client lourd riche Pour le dploiement des applications deux solutions sont

proposes :Appletet Java Web Start

Pour la partie graphique diffrentes API sont disponibles

AWT: premire bote outils livre avec la premire version de Java

(composants heavyheight)Swing: volution de la bote outils AWT (composants lightheight)

JavaFX: bibliothque graphique apparue rcemment destine

concurrencer les technologies flash

Mais aussi les API dEclipse SWTet JFace

Dans la suite, nous approfondirons les solutions dedploiement

Solutions Java : Applet


52/63


ul.blogspot.com

Une Applet est un programme Java qui sexcute dans un

navigateur web ou dans lappletviewer du JDK

Une Applet Java peut exploiter toutes les API fournies par

la JDK de Sun (Swing, Rseau, )

Une Applet est une application qui s'excute du ct client

et qui se trouve physiquement sur un serveur web

Lexcution de lApplet est obtenue dans la page html via

lutilisation de balises spcifiques

Possibilit de combiner plusieurs Applets dans une mme

page web



53/63


ul.blogspot.com

Une Applet fonctionne par lintermdiaire dune machine

virtuelle Java

Par dfaut, les navigateurs disposent dune machine virtuelle

pour excuter toutes Applet Java de version 1.1 ncessit

dinstaller explicitement une machine virtuelle sur le posteclient

Utilisation de lAPI graphique SWING

Les Applets sont multi systmes mais ncessitent

gnralement le tlchargement dune machine virtuelle

rcente

Dmonstration : www.java.com/fr



54/63


ul.blogspot.com

La technologie Applet de Sun est une technologie pour clients

riches et exploite le langage Java

Avantages

API graphiques puissantes AWT et Swing

Portabilit sur toutes les plates-formes qui supportent Java

Scurit via le bac sable (voir section suivante)

InconvnientsConnaissance ncessaire de Java pour faire des interfaces mme si

des gnrateurs de prsentation existent

Installation de la dernire JDK pour excuter des Applets qui utilisentSwing

Non homognit des interfaces entre les Applets et les pagesHTML/JSP

Technologie trop rcente lpoque et victime de sa puissanceUtilisation non adapte


55/63

Solutions Java : Java Web Start


56/63


ul.blogspot.com

Java Web Start utilise et implmente une API et un protocole

appels Java Network Lauching Protocol(JNLP)

Pour utiliser cette technologie il faut dfinir un fichier dedescription XML dcrivant lapplication excuter (JNLP)

Cette technologie est disponible sur toutes les plateformes quisupportent Java (apparu depuis la version J2SE 1.4)

Lutilisation dune application implique depackager lapplication dans un fichier JAR (section prcdente)

crer le fichier de lancement au format jnlp

copier les deux fichiers sur le serveur webRessources sur JNLP et JWS

java.sun.com/j2se/1.5.0/docs/guide/deployment/index.html

today.java.net/pub/a/today/2005/09/01/webstart.htmlwebstartfaq.com



57/63


LimeWire un outil de tlchargement

Site : www.limewire.com


58/63


k l d k


59/63


Jake2 est la version Java de Quake 2

Site : www.bytonic.de/html/jake2_webstart.html

12 - Jake 2

Diff t b t til t di ibl l l t f

Solutions Java : JavaFX


60/63


Diffrentes botes outils sont disponibles pour la plateforme

Java :AWT, Swing, SWTet JFace

JavaFXsorti dernirement se veut tre un concurrent auxlangages de types Flex et Silverlight

JavaFX est un langage de script bas sur le projet F3 (FormFollows Function) orient IHM

Ce langage est destin galement tre diffus sur diffren-tes plateformes : Desktop, Web et mobile

Avis personnel : encore un langage, va-t-il pouvoir simposer?

Adresses utilesSite officiel : openjfx.dev.java.net etjavafx.com

Blog de Chris Oliver : blogs.sun.com/chrisoliver/entry/F3

DmonstrationsSite officiel :javafx.com/samples

Solutions Java : JavaFX


61/63


13 - WeatherFX

14 - Motorola

Clients riches : bilan

U h l i ff


62/63


Un march en pleine effervescence

Mozilla avec XUL (XML User Language)

Ajax ( a la mano , GWT)

Flash (Flex, OpenLaszlo, AIR)

Eclipse RCP, Eclipse RAP

.NET, ClickOnce.Net, WPF, XAML, Silverlight de Microsoft

Java (Applet, Java Web Start, AWT/Swing, JavaFX)

Des solutions techniquement trs diffrentes et des stades

de maturit ingaux

Des enjeux qui dpendent finalement beaucoup du contexteLes technologies client riche apportent des solutions de

nombreux besoins des applications de gestion dveloppes en intranet

Plusieurs sites sur Internet commencent utiliser Flash pour faireautre chose que des animations

Clients riches : bilan

Pl i f i i t t t f i


63/63


Plusieurs freins apparaissent toutefois

Pas toujours facile dentendre dire que le langage HTML ne rpond

finalement plus au besoin !

Problme de formation : il faut trouver les dveloppeurs Flex,

Laszlo ou Eclipse RCP

Problme doutillage : les outils ne sont pas forcment existant

(XUL, Ajax, )

Quen est-il de HTTP ?

Protocole dconnect implique beaucoup de problmes importants :

transaction, scurit,

Les volumes dinformation sont de plus en plus importants et lenombre de requtes va en constante augmentation

Documents

Rich Clients