Clients riches

12 . Les technologies du marché

 Plan du cours
Différents types d’application : client lourd
Différents types d’application : client léger
Client léger
Client riche : internet pilier des nouveaux clients
XUL
AJAX
AIR
Eclipse
.NET Framework
Applet Java
 Différents types de client
• Définition de « client »
-Logiciel médiateur entre l’utilisateur et le service proposé
-Exemples : FTP, messages électroniques (mailer), navigateur internet,
webmail, jeux vidéo, …

• Différentes catégories de client

• Lourd : le service est disponible sur le poste client avec possibilité
de connexion à des serveurs
-Exemples : Skype, client DropBox, Steam, …
• Léger : tout le service est disponible sur des serveurs et
l’utilisateur y accède par un conteneur spécialisé
- Exemples : Google, Office 365, …
Différents types d’application : client lourd

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

• Avantages :
- Interfaces utilisateurs riches (WIMP / Windows, icon,
Menu, Pointing )

• Inconvénients :
- Déploiement (utilisation de CD, téléchargement /
installation)
- Gestion des versions (patch, problème de compatibilité)
 Différents types d’application : client léger
• Application à architecture client / serveur
-Les technologies pour la génération et le traitement de la présentation sont
présentes à la fois sur le client mais aussi sur le serveur

• Technologies côté client : HTML, DHTML, JavaScript, …

• Technologies côté serveur : PHP, ASP, JSP, JSF, …

• Avantages :
- Maintenance
- Accessibilité

• Inconvénients :
- Interfaces utilisateurs pauvres et proches du classique formulaires
 Client léger : Internet et HTTP
• Les clients légers désignent essentiellement toutes les applications
associées aux sites Web

• L’accès aux services se fait par l’intermédiaire d’un conteneur spécialisé

qui est généralement un navigateur (FireFox, Internet Explorer, Chrome)

• Les technologies pour le transport entre le serveur et le client sont

Internet (HTTP, HTTPS)

• Les sites Web actuels se caractérisent par le fameux mode page par page
- A chaque requête de l’utilisateur (demande) le serveur génère une
nouvelle présentation
- L’affichage n’est pas continu
 Client léger : Internet à l’origine
• A l’origine Internet a vocation de diffuser de l’information
statique
- HTTP (déconnecté)
- HTML (langage de description de document)

• Déploiement
- Universel (protocoles standards et réseau standard)
- Un navigateur suffit

• Pas prévu pour embarquer des applications

- Afficher des données en temps réel
Client riche : Internet pilier des nouveaux
clients
 Client riche : Internet pilier des nouveaux
clients
• Depuis peu un nouveau modèle d’application fait son apparition : Clients « riches
»

• Les clients riches représentent une fusion des clients « lourds » et « légers »
- Interfaces utilisateurs riches
- Déploiement et maintenance

• Ce sont des applications distantes avec les avantages des applications locales

• Technologie permettant de développer la couche présentation

d’une application

• La conception d’une application en mode « page » disparaît.

La reconstruction de la présentation après chaque requête n’existe plus
 Client riche : Internet pilier des nouveaux
clients
• Pas de standardisation du terme client riche

• Pour simplifier, on peut voir les choses de la façon suivante :

• Clients lourds riches ?
- Un client lourd offrant des fonctionnalités de déploiement et de mise à jour facilité
• Clients légers riches ?
- Un client léger offrant des possibilités d’interactions évoluées comme celles proposées par le client lourd

Evolution :
• web 1.0 : le web pyramidale, où les acteurs sont passifs, l'information est diffusée vers les utilisateurs,
• web 2.0 : le web participatif, les utilisateurs créés du contenu et la partage, ils deviennent des
consomateurs. 
• web 3.0 : le web sémantique, proposé par Tim Berners-Lee. Les données sont représentées de manière à
ce que les machines puissent en comprendre le sens. Les résultats de recherche deviennent
plus pertinents et les informations peuvent être liées entre elles.
• web 4.0 : l'environnement cliquable, la réalité augmentée, les différents capteurs, GPS, boussoles et
centrales à inertie permettent d'obtenir des informations sur les lieux ou objets qui nous entourent.
• web 5.0 : dans une dizaines d'années, nous ne serons plus sur le web mais dans le web en permanence.
Les objets, les pièces et les humains eux mêmes seront dotés de puces et formeront le symbionet.
 Client riche : Internet pilier des nouveaux
clients
• D’avantage de traitement sur le poste client
• Bien pourvu en composants graphiques de haut niveau
• Facilement accessible (déploiement et mise à jour)
• Nécessite un conteneur sur le poste client (c’est plus une
conséquence qu’un impératif)
- Navigateur
- Java Machine virtuelle

• Les clients « riches » existent avec des technologies comme

- Applet, Active X
- HTML 5
- Unity WebPlayer
 Clients « riches »
• Les clients « riches » sont en pleines évolutions et les standards ne se sont pas
encore établis et imposés

• Les technologies actuelles vont être remplacées ou complétées puisqu’elles ne

répondent plus aux besoins d’interfaces évoluées
- Applet, Active X et HTML

• Plusieurs technologies se sont confrontés historiquement :

- 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)
- Unity
 Clients « riches » historique
• Quelle que soit la technologie choisie, une notion de
conteneur sur le poste client apparaît …
• Le conteneur peut être de nature diverse
- Navigateur Web (Ajax, XUL, …)
- Adobe Integrated Runtime
- Eclipse RCP, RAP
- FrameWork .NET
- Machine virtuelle (Applet, JWS)
 XUL : XML User Language
• XUL (XML User Language) est proposé par Mozilla et a été le précurseur pour ces
technologies

• Catégorie de client : client léger riche

• L’idée des développeurs a été de remplacer HTML et d’apporter une richesse graphique
supérieure

• Ce langage possède une série de balises correspondant à des composants graphiques

(boutons, menus, listes, …)

• Gecko est un moteur de rendu de XUL

• Le conteneur (c’est-à-dire un navigateur de la famille de Mozilla) reçoit un fichier au

format XUL et génère du HTML
AJAX : Asynchronous JavaScript And XML
• AJAX signifie Asynchronous JavaScript And XML

• Catégorie de client : client léger riche

• Ce n’est pas une nouvelle technologie à part entière mais une technologie qui
regroupe des technologies existantes.
C’est une façon d’utiliser intelligemment certaines technologies WEB
- HTML + CSS + JavaScript + DHTML + … = AJAX

• Le principe d’AJAX est d’éviter de régénérer dans son intégralité la page à chaque
requête du client mais uniquement par morceau (utilisation du DHTML)

• Il s’agit d’une façon de développer une « application HTML » ancienne (2002)

initiée par Microsoft … mais non portable à l’époque
AJAX
 AJAX
• AJAX impose aucun modèle de programmation côté serveur

• Le moteur AJAX est purement abstrait : il ne nécessite aucune librairie sur le client

• Le mode « page » disparaît seule les données transitent par HTTP

• L’interface graphique utilisateur n’est pas rafraîchie à chaque action de l’utilisateur

• La requête HTTP émise est asynchrone. Pas bloquant, la réponse n’est pas
attendue

• Le modèle « événementiel » est obtenu grâce aux fonctions JavaScript au dessus

de HTML
 AJAX
• Google notamment propose une « complétion » automatique du champs
de saisie avec les valeurs couramment recherchées par les utilisateurs de
ce service

• Comportement similaire aux mécanismes de « complétion »

automatique des environnements de développement

• L’ensemble des valeurs envisageables ne peut être disponible que sur le

serveur Web et non pas en local

• Une requête au serveur est émise à chaque fois que la liste des
propositions doit être mise à jour (seul les données sont retournées au
client)
 Flex
• Flex se décompose de la façon suivante :
- Les fichiers MXML : descriptif XML de l’interface graphique
- Les fichiers de type ActionScript : utilisation d’un langage script pour décrire les interactions
entre tous les composants graphiques

• Principe de fonctionnement côté serveur

- Lors de la première invocation du client les fichiers MXML et ActionScript sont compilés :
fichier SWF généré
- Le fichier SWF est transmis au client sous un flux

• Nécessite un serveur d’exécution côté serveur

- Application J2EE pour le moment

• Outils de développement
- Adobe Flash Builder (basé sur Eclipse)
 AIR
• Air d’Abobe est une sorte d’environnement d’exécution
multi-plateforme qui peut être vu comme un lecteur de
contenu vecrtoriel, html et pdf

• Les applications pourront être exécutées directement sur le

système d’exploitation et pas uniquement dans un
navigateur
- Accès aux ressources systèmes (fichier)
- Mode connecté ou pas
- Utilisation de fonctionnalités natives (tray icon)
 Eclipse
• Environnement de développement très utilisé

• Catégorie de client : client lourd riche

• Un noyau très extensible à base de plug-in qui permet d’étendre les

fonctionnalités d’Eclipse
- Accès aux données
- Débuggeur
- Gestion de documents XML
- Maven / Ant

• Les plug-ins ne sont pas forcément orientés développement

- Lecteur de mail : GMailEclipse
 Eclipse
• Une application = un ensemble de plug-in

• C’est la philosophie d’Eclipse RCP (« Rich Client Platform »)

• On désactive l’ensemble des fonctionnalités de l’environnement de

développement

• On implémente la couche de présentation d’une application comme un plug-

in d’Eclipse

• Les bénéfices sont :

- La richesse des composants et du framework Eclipse (SWT, JFace)
- Des mécanismes de gestions de versions des plugins offerts par Eclipse
 .NET Framework
• Catégorie de client : client lourd riche ?
• Les clients s’appellent SmartClient
• La technologie de déploiement est appelée Clickonce.net
- Déploiement d’application .NET (c#, …)
- Gestion de versions de l’application concernée
- Possibilité de revenir à une version antérieure

• WPF (Windows Presentation Foundation) est le nom de la couche présentation à

travers le framework .NET

• WPF permet la séparation de la couche présentation grâce à l’utilisation du langage

XML XAML (Extensible Application Markup Language)

• Silverlight (ancien WPF/E) est une technologie permettant d’utiliser WPF sur le web
(un plugin est ajouté au navigateur web)
 Solutions Java
• Catégorie de client : client lourd riche
• Pour le déploiement des applications deux solutions sont
proposées : Applet et Java Web Start

• Pour la partie graphique différentes API sont disponibles :

- AWT : première boîte à outils livrée avec la première
version de Java (composants heavyheight)
- Swing : évolution de la boîte à outils AWT (composants
lightheight)
- JavaFX : bibliothèque graphique apparue récemment
destinée à concurrencer les technologies d’animation
vectoriels
- Mais aussi les API d’Eclipse SWT et Jface
 Applet Java
• Une Applet est un programme Java qui s’exécute dans un navigateur web
ou dans l’appletviewer du JDK

• Une Applet Java peut exploiter toutes les API fournies par la JDK de Sun
(Swing, Réseau, …)

• Une Applet est une application qui s'exécute du côté client et qui se trouve
physiquement sur un serveur web

• L’exécution de l’Applet est obtenue dans la page html via l’utilisation de

balises spécifiques

• Possibilité de combiner plusieurs Applets dans une même page web

 Applet Java
• Une Applet fonctionne par l’intermédiaire d’une machine virtuelle Java

• Par défaut, les navigateurs disposent d’une machine virtuelle pour

exécuter toutes Applet Java de version <= 1.1
-Utilisation de l’API graphique AWT

• Si l’Applet a été développée avec une JDK > 1.1 nécessité d’installer
explicitement une machine virtuelle sur le poste client
- Utilisation de l’API graphique SWING

• Les Applets sont multi systèmes mais nécessitent généralement le

téléchargement d’une machine virtuelle récente
 Applet Java
• 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
- Sécurité via le bac à sable (voir section suivante)

• Inconvénients :
- Connaissance nécessaire de Java pour faire des interfaces même si des générateurs de
présentation existent
- Installation de la dernière JDK pour exécuter des Applets qui utilisent Swing
- Non homogénéité des interfaces entre les Applets et les pages HTML/JSP
- Technologie trop récente à l’époque et victime de sa puissance
- Utilisation non adaptée
 Java Web Start
• Java Web Start permet le déploiement d’applications en locale à travers le réseau (stand-alone)

• Permet l’installation d’une application dite « client lourd » grâce à un simple lien hypertexte
d’une page web

• Il est inutile de modifier une application déjà développée pour qu’elle puisse être utilisée avec
Java Web Start

• Les avantages de cette technologie sont :

- mise à jour automatique de l’application si une nouvelle version est disponible
- assure une mise en cache locale des applications pour accélérer leur réutilisation ou si la
machine client n’est pas connectée
- sécurité des applications assurée par l’utilisation du bac à sable (voir section précédente)

• Toute application déployée avec JWS est une application dite client « lourd/riche »
 Java Web Start
• Java Web Start utilise et implémente une API et un protocole appelés Java
Network Lauching Protocol (JNLP)

• Pour utiliser cette technologie il faut définir un fichier de description XML

décrivant l’application à exécuter (JNLP)

• Cette technologie est disponible sur toutes les plateformes qui

supportent Java (apparu depuis la version J2SE 1.4)

• L’utilisation d’une application implique de :

- Packager l’application dans un fichier JAR (section précédente)
- Créer le fichier de lancement au format « jnlp »
- Copier les deux fichiers sur le serveur web
 JavaFX
• Différentes boîtes à outils sont disponibles pour la
plateforme Java : AWT, Swing, SWT et Jface

• JavaFX se veut être un concurrent aux langages de types

Flex et Silverlight

• JavaFX est un langage de script basé sur le projet F3 (Form

Follows Function) orienté IHM

• Ce langage est destiné également à être diffusé sur

différentes plateformes : Desktop, Web et mobile
 eDriven.gui
• Framework GUI puissant pour unity3D
• Workflow similaire à Apache FLEX ou Java Swing
• Accessible depuis l’asset store Unity
 Conclusion
• Un marché en pleine effervescence avec des technologies nombreuses :
- Mozilla avec XUL (XML User Language)
- Ajax (« a la mano », GWT)
- AIR
- Eclipse RCP, Eclipse RAP
- .NET, ClickOnce.Net, WPF, XAML, Silverlight de Microsoft
- Java (Applet, Java Web Start, AWT/Swing, JavaFX)
- Unity

• Des solutions techniquement très différentes et à des stades de maturité inégaux

• Des enjeux qui dépendent finalement beaucoup du contexte

- Les technologies « client riche » apportent des solutions à de nombreux besoins des
applications de gestion développées en intranet
 Conclusion
• Plusieurs freins apparaissent toutefois :
- Pas toujours facile d’entendre dire que le langage HTML
ne répond pas toujours au besoin
- Problème d’outillage : les outils ne sont pas forcément
existant (XUL, Ajax, …)

• Qu’en est-il de HTTP ?

- Protocole déconnecté implique beaucoup de problèmes
importants : transaction, sécurité, …
- Les volumes d’information sont de plus en plus
importants et le nombre de requêtes va en constante
augmentation