Vous êtes sur la page 1sur 49

Industrialisation des

développements
AJAX - J2EE

Laurent Guérin
( lguerin@sogeti.com )

25 Janvier 2007 - « Les Jeudis de l’objet »


Ecole des Mines de Nantes

1 - Retour d’expérience
& naissance d’un framework

2 - AJAX

3 - Telosys

Jeudis de l'objet - EMN - 25/02/2007 1


1.1 - Constats

Constats
• Statistiques du Standish Group
18 %
29%
Succès
CHAOS
Report Dépassement
2004 Abandon
53%

• Quelques constantes :
 Productivité insuffisante (manque d’outils)
 Faiblesse des tests (unitaires, fonctionnels, couverture)
 Problème d’estimation des charges (activité peu prédictible)
 Mauvaise gestion des risques
 Pas (ou trop peu) de « capitalisation du savoir faire »

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 4

Jeudis de l'objet - EMN - 25/02/2007 2


Architectures « web – n-tiers »
• Tendance forte :
« webiser » les applications métier pour …
 Réduire les coûts de déploiement et de gestion de parc
 Rendre les applications accessibles à partir de postes de
travail banalisés  utilisation en mode « extranet »
• Mais le « web traditionnel » a atteint ses limites
 Ergonomie inadaptée aux applications à usage intensif
 Le « client léger » est de plus en plus « riche »
(  plus complexe )
 Utilisation croissante de technologies de type AJAX
•  Projets complexes, parfois chaotiques

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 5

Architectures « web – n-tiers »


Environnement => Compétences multiples
souvent complexe
UML
Design
Patterns

services
métier
Réseau

navi- appli- persis-


façade
gation cation tence
objets
métier
navigateur
framework 1 framework 2 framework 3

HTML, CSS
JavaScript, Java, SQL
L3G !
DOM, DHTML, C#, …
XML/XSL, …

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 6

Jeudis de l'objet - EMN - 25/02/2007 3


Architectures « web – n-tiers »
• La productivité a régressé !
Productivité

Client -
serveur
L4G

L3G Web
C/C++
COBOL n-tiers

Proportion de
code technique
encore trop
1970 1980 1990 2000
importante !
Années

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 7

Objectifs
• Accroître la productivité
• Améliorer la qualité
• Favoriser la capitalisation des composants et des
compétences
• Combler le vide du « client léger riche »
 répondre aux attentes :
 des utilisateurs (meilleure ergonomie)
 des développeurs (environnement de développement
simple et efficace)

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 8

Jeudis de l'objet - EMN - 25/02/2007 4


Démarche d’industrialisation
• 3 axes de rationalisation des
développements « n-tiers/J2EE »

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 9

Démarche d’outillage
• Détecter & éviter une
situation classique :
le « syndrome du bûcheron »
• S’attaquer aux causes plutôt qu’aux effets
 mettre en place les outils adaptés …
 Coût initial
 Mais le retour sur investissement peut être important et
rapide ( loi des 20/80 )
 Ne pas chercher à tout industrialiser
 Mesurer le coût d’exploitation des outils
 Adopter une démarche d’amélioration progressive
( principe du « Kaïsen » )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 10

Jeudis de l'objet - EMN - 25/02/2007 5


1.2 – Un projet de
migration technologique
vers AJAX/J2EE

Situation initiale
« client/serveur »

Protocole
ire
propriéta

Run
- tim
ent e
Dép loiem

qu es »
lassi
n s«c
Ecra

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 12

Jeudis de l'objet - EMN - 25/02/2007 6


Cible

standards

 Suppression des « run-times »


 Adoption de « standards »
 « client léger »  suppression des contraintes de
déploiement

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 13

AJAX, une histoire ancienne ?


• Le projet cité en exemple débute en 2003
• Les choix technologiques ( « XML/http »
via le composant « XMLHttpRequest » )
sont basés sur des retours d’expérience des années
2001 et 2002 :
 Navigateur :
 Internet Explorer
 Serveurs de tous types :
 Java (J2EE)
 Microsoft ASP
 PHP
•  « AJAX » : seul le nom est récent !

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 14

Jeudis de l'objet - EMN - 25/02/2007 7


Contraintes et moyens
• Contraintes fortes :
 Logiciel « lourd » : 210 écrans, 64 éditions, batchs, …
 Portabilité : bases de données, serveurs J2EE, O.S.
 Usage intensif : IHM riche  préserver l’ergonomie
 Autres : internationalisation, capacité réseau limitée,
capacité à monter en charge ...
• Moyens limités :
 450 j/h de réalisation et tests unitaires
 Equipe : majorité de débutants / J2EE
• Points positifs :
 Comportement stéréotypé des écrans et des éditions
  Industrialisation possible
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 15

Démarche d’industrialisation
• Phase de « R&D » en amont du projet
 noyau du framework
• Processus d’ enrichissement continu
• Réalisation d’un générateur de code
• Stabilisation de l’équipe (pour appropriation du
cycle de développement et des outils)
• Normes, méthodes, « best practices », …

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 16

Jeudis de l'objet - EMN - 25/02/2007 8


Organisation et méthodes
Stabilité Outils

Spécialisation
Cadre

Normes
Refactoring

Itérations

Prototypes

Généralisation

Améliorations
Kaïsen

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 17

Architecture Web classique ?


• Pattern « MVC » ou « MVC 2 » ?

pté 1
Inada Requête Servlet 2
c o n te x te
au <form>
GET/POST
Utili-
forward 3
Bean
sateur
5 4
Réponse use
Page JSP
complète

Réaffichage ! Données utiles :


Pas de requêtes Maintien de contexte
10 à 20 %
transparentes détaillé ( postback )
du volume de la page !
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 18

Jeudis de l'objet - EMN - 25/02/2007 9


Le socle technique
• Framework spécifique, adapté au besoin :
 global ( écrans  base de données )
 orienté « écrans » ( principe de dialogue « client / serveur » )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 19

Cadre & outillage


Organisation Cadrage

Génération de code + plugins

Normes

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 20

Jeudis de l'objet - EMN - 25/02/2007 10


1.3 – Bilan du projet

Portabilité vers le « Web »


• Les « applications métier » à usage intensif
peuvent être portées vers des postes de travail de
type « client léger » sans dégrader leur
ergonomie, mais …
• L’interface Web ne peut se satisfaire du HTML
de base !
• Il est souvent indispensable de fonctionner dans un
mode « client serveur » ( => AJAX )
• La complexité induite par la technologie AJAX doit
être encapsulée dans le socle technique (non
visible par le développeur)

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 22

Jeudis de l'objet - EMN - 25/02/2007 11


XML / http ( AJAX )
Découplage total entre le poste de travail et le
serveur
Application « orientée écrans »
( et non « navigation de pages » )
 ergonomie très réactive, sessions multi-écrans,
contrôles champ par champ, …
 idéal pour les « applications métier » ( usage intensif )

Uniquement du XML dans les flux de données ?


 Approche trop « puriste » ?
 Complexe à traiter « côté client » dans certains cas
exemple : mise en forme de listes ( JavaScript inefficace
=> XSL ! )
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 23

XML / http ( AJAX )


Ne pas « abuser » des requêtes AJAX
 Penser à la montée en charge …
 Contrôles champ par champ  suffisant
 Contrôles sur saisie de caractères  excessif !

Localisation des traitements :


 Est-il judicieux de coder des « règles métier »
en JavaScript ?
 Equilibre à trouver :
- Contrôles de surface  côté client ( JavaScript )
- Règles métier  côté serveur ( Java )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 24

Jeudis de l'objet - EMN - 25/02/2007 12


Industrialisation
• Rationalisation des développements :
 Framework
 Outils indispensable
 Méthode
• Productivité reste faible sur la couche de
présentation …
 Renforcer le socle technique et les outils
 Le développement JavaScript doit être professionnel !
• Générateurs de code :
 Outils relativement coûteux
 Doivent être souples, paramétrables et intégrés dans
l’environnement de développement (ex : Eclipse)
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 25

Les limites du navigateur


• Ne pas essayer de tout faire dans le navigateur !
• Il reste de nombreux cas qu’un navigateur ne peut
pas résoudre …
 Gestion du mode déconnecté
 Notification à l’initiative du « monde extérieur »
 Intégration avec des solution externes (bureautique, .. )
 Gestion de périphériques spécialisés
• Pour les cas d’utilisation très complexes
(ex : gestion d’un diagramme de Gantt )
 conserver un client lourd
 conserver autant que possible le protocole http

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 26

Jeudis de l'objet - EMN - 25/02/2007 13


Conclusions
• Un seul framework couvrant toutes les couches
est particulièrement efficace :

Réseau
Présen- persis-
métier
tation tance
navigateur

framework
framework « serveur »
« client »

 Cohérence globale
 Economie d’objets inutiles ou redondants
 Permet de « rapprocher l’IHM des données »
(comme un AGL « client / serveur » )
• NB: L’efficacité ne doit pas être obtenue aux dépens
de l’isolation des couches
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 27

Conclusions
• La plupart des « applications métier » à base de
« client lourd » peuvent être « webisées »
• Certaines applications devront cependant conserver
une partie de leur IHM en « client lourd »
•  les architectures doivent prévoir l’utilisation de
postes de travail hybrides
Serveur
Navigateur Requête

( AJAX ) XML
http
Eclipse RCP,
Swing, etc.. Réponse
WebApp

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 28

Jeudis de l'objet - EMN - 25/02/2007 14


1.4 – Emergence de Telosys

Constat ( début 2005 )


• Le principe de dialogue « client / serveur » avec
« XML / http » a fait ses preuves
• J.J.Garrett vient de lancer le terme « AJAX »
• Ce principe commence à être reconnu et peut être
réutilisé sur d’autres projets
•  Lancement des travaux pour préparer un
framework générique :
 Architecture plus modulaire & outillage renforcé
 Simplification de la création des écrans ( bibliothèque
de « TagLibs » + système de « templates » )
 protocole d’échange XML simple et évolutif
 framework JavaScript plus complet
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 30

Jeudis de l'objet - EMN - 25/02/2007 15


Les objectifs
• Accessible à des développeurs peu
expérimentés dans le monde Web / J2EE (prise en
main rapide)
• Améliorer la productivité ( capacité de
développement rapide d’applications )
• Faciliter l’utilisation des méthodes
agiles/itératives (utilisable dès la phase de
maquettage)
• Offrir une solution complète, auto-suffisante,
couvrant toutes les couches
• Solution légère et intégrée (  plus efficace )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 31

Evolution ( 2005-2006 )
• Choix du nom : « Telosys »

• Choix de la licence : LGPL

• Intégration dans ObjectWeb :


 Mars 2005 : premiers contacts
 Mai 2005 : proposé au
collège des architectes
 Septembre 2005 : accepté

• 2006 : premières utilisations des versions « alpha »


sur des cas d’utilisation réels
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 32

Jeudis de l'objet - EMN - 25/02/2007 16


Site Web
• http://telosys.objectweb.org/

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 33

2.1 - AJAX

Jeudis de l'objet - EMN - 25/02/2007 17


AJAX : qu’est-ce que c’est ?
• AJAX n’est pas …
 Un produit de nettoyage
 Un club de foot d’Amsterdam
• AJAX n’est pas non plus …
 Une nouvelle technologie
 Une norme
• AJAX = Asynchronous JavaScript And XML
  un nom pour désigner l’utilisation combinée de
technologies existantes ( cf. article de Jesse James
Garrett, février 2005)
  une nouvelle façon de concevoir le dialogue
« navigateur – serveur »  « Web 2.0 »

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 35

Modèle « AJAX »
Modèle de
dialogue avec
le serveur
beaucoup
plus flexible
que le modèle
Web traditionnel

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 36

Jeudis de l'objet - EMN - 25/02/2007 18


AJAX : qu’est-ce que c’est ?
• AJAX repose sur l’utilisation de l’objet natif
« XMLHttpRequest » disponible dans les
navigateurs les plus utilisés
( Firefox, Internet Explorer, Safari, …)
• XMLHttpRequest permet d’effectuer des requêtes sur
un serveur HTTP à partir de la page courante sans
provoquer un rechargement de page …
 nombreuses possibilités :
 effectuer des « requêtes transparentes »
 retrouver des concepts « client / serveur »
 améliorer l’ergonomie
 etc…

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 37

AJAX et Web 2.0 : effet de mode ?


• « Hype Cycle for Web Technologies »
( Gartner Group 2006 )

Web 2.0

AJAX

• Ne pas confondre AJAX, Web 2.0 et RIA …


Industrialisation des développements AJAX/J2EE - Laurent GUERIN 38

Jeudis de l'objet - EMN - 25/02/2007 19


AJAX et RIA
• R.I.A. : « Rich Internet Application »
 Application Web disposant d’une « ergonomie riche »
 Objectif : retrouver des ergonomies comparables à celles
des applications « client lourd » tout en conservant les
avantages du Web
• AJAX n’est pas directement lié à RIA
 AJAX favorise la mise en place d’ergonomies riches,
 Mais n’apporte pas les « composants DHTML »
nécessaires ( bibliothèques de « widgets » )
• Les frameworks « côté client » fournissent des
solutions à différents niveaux : JavaScript, AJAX,
RIA, etc…

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 39

AJAX et Web 2.0


• Web 2.0 = notion floue
 Aucune définition ( terme créé par l’éditeur O’Reilly )
 Désigne une nouvelle génération de sites web :
version 2.0 ( par opposition au « Web 1.0 » ? )
 Effet de mode ?
• Caractéristiques des sites « Web 2.0 »
 Ergonomie et look amélioré (grâce à AJAX)
 Syndication de contenu ( fils RSS et Atom )
• Contraintes induites par l’utilisation d’AJAX :
 Problème de référencement par les moteurs de
recherche
 Pas de gestion de l’ historique de navigation
 Pas de marquage de page dans les favoris

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 40

Jeudis de l'objet - EMN - 25/02/2007 20


AJAX et « applications métier »
• Historiques des applications métier :
 Ecrans passifs « mode caractères »
 Client Serveur
 Web
• AJAX permet :
 Migrations technologiques :
 Ecrans passifs  Navigateur
 Client / Serveur  Navigateur et/ou « poste de travail hybride »
 Amélioration de l’ergonomie des « applications web »
• Applications métier  non impactées par les
problématiques de référencement, historique,
favoris, etc…
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 41

2.2 - AJAX
Aspects Techniques

Jeudis de l'objet - EMN - 25/02/2007 21


AJAX : Synchrone ou asynchrone ?
• Synchrone :
 Navigateur bloqué jusqu’au retour de la réponse
 Événements « empilés » par le navigateur
 Impossibilité d’afficher une information visuelle pour
indiquer à l’utilisateur qu’un traitement est en cours
(problématique de rafraîchissement de l’écran après
interprétation du bloc JavaScript)
• Asynchrone :
 L’utilisateur peut continuer à utiliser le navigateur pendant
une requête
 Prévoir le cas des plusieurs requêtes émises en parallèle
 Prévoir un moyen de bloquer l’utilisation du navigateur

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 43

AJAX : Transport des données


• Qu’est-ce que l’on transporte ?
 Des « données » ( des « objets » )
 ex : XML, POST http
 Des « vues » ( données déjà mises en forme par le
serveur )
 ex : HTML, XHTML
• Les objectifs :
 Disposer de format de données indépendants des
langages de développement
 Véhiculer des données compréhensibles par
les « deux côtés » ( client et serveur )
 Eviter une analyse de flux ( « parsing » ) trop complexe
( temps de réponse, empreinte mémoire, …)
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 44

Jeudis de l'objet - EMN - 25/02/2007 22


Transport des données : XML
• En principe AJAX => XML
• Avantages :
 Standard
 Indépendant des langages
 Utilisable pour des données brutes ou des présentations
( XHTML )
 Permet de transporter des objets
• Inconvénients :
 Nécessite un « parser » XML
 Objets => mapper/wrapper XML

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 45

Transport des données : Texte


• Le corps de la requête/réponse http peut contenir
tout type de texte

• Données dans un format quelconque (format


spécifique, « CSV », …)

• Du code JavaScript ( ex. Google Suggest ) :


eval ( http.responseText )

• Des données au format « JSON » …

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 46

Jeudis de l'objet - EMN - 25/02/2007 23


Transport des données : JSON
• JSON : JavaScript Object Notation ( http://json.org/ )
 permet de représenter des éléments imbriqués
{
"fullname": "Bob Dylan",
"org": "Music Consulting",
"emailaddrs": [
{"type": "work", "value": "bob@foo.biz"},
{"type": "home", "pref": 1, "value": "bob@foo.tv"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
]
}

 notation native var obj = {"fullname":"Bob","org":"Foo"};


var obj2 = eval('(' + jsonText + ')');
en JavaScript
 autres langages (Java, C++, ..) => API
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 47

2.3 - La problématique
« JavaScript »

Jeudis de l'objet - EMN - 25/02/2007 24


AJAX & JavaScript
• AJAX => JavaScript !
• JavaScript a « mauvaise réputation »
 Langage « non contrôlé »
( pas de compilation, faiblement typé, … )
 Faiblesse des outils de développement
 Problèmes de portabilité entre navigateurs
 Programmation par « copier/coller »
 etc...

« The World's Most Misunderstood


Programming Language »
( Douglas Crockford )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 49

AJAX & JavaScript


• Et pourtant … JavaScript n’est pas si mauvais …
• JavaScript est « orienté objet »
 « orienté prototype » ( « prototype based » vs « class based » )
 tout est objet ( même les fonctions )
 dispose d’ « Exceptions »
• JavaScript est normalisé et évolue régulièrement
 ECMA-262 (ECMAScript) JavaScript 1.6  Firefox 1.5
JavaScript 1.7  Firefox 2.0

• Il existe des outils & composants …


 E4X ( ECMAScript for XML - norme ECMA-357 ) : navigation DOM « à la
XPath »
 JavaScipt Templates ( +/- Velocity en JavaScript )
 Frameworks
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 50

Jeudis de l'objet - EMN - 25/02/2007 25


JavaScript : les bonnes pratiques
• Développer en JavaScript comme on développe en
Java
 Pas de variables globales ( risques de collision )
 Concevoir et développer des « classes »
 Documenter les classes ( cf. outillage « JS-doc » )
 Faire des tests unitaires
• Assembler les classes dans un fichier « .js »
( comme un « .jar » en Java )
• Utiliser un environnement de développement adapté
 Exemple : Eclipse / FireFox + extensions / Ant ou Maven
• Mettre en place des composants ou frameworks
JavaScript
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 51

JavaScript : les bonnes pratiques


• Exemple : Diagramme de classes de Telosys-JS

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 52

Jeudis de l'objet - EMN - 25/02/2007 26


JavaScript : les bonnes pratiques
• Exemple : Documentation de Telosys-JS
/**
* Client stub to invoke server actions
* @class ScreenActions
* @param Object the Screen instance
* @author Laurent GUERIN
*/
function ScreenActions( oScreen )
{
.. .. ..
/**
* Invokes the standard "SET" action to
* update data on the server
* Set all the Screen Context elements
* @return Object the server response object
*/
this.doSet = function ()
{
.. .. ..
}
.. .. .. ScreenActions_class.js
}

Telosys
« JS-DOC »

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 53

2.4 - Choisir un
« Framework AJAX »

Jeudis de l'objet - EMN - 25/02/2007 27


Frameworks AJAX
• Une offre pléthorique  à classifier :
• Open Source ou Propriétaire
• « côté client » uniquement
 Orienté présentation ( effets visuels, drag & drop, widgets,
… ) + appels AJAX
 Exemples : Prototype, DOJO (JSON-RPC), script.aculo.us,
OpenRico ( XML-RPC )
• « côté client » et « côté serveur »
 AJAX – Java : DWR,
Echo2 (XML-RPC) , Telosys (XML-RPC)
 AJAX – PHP : CPAINT
 AJAX – Ruby : Ruby on Rails
 AJAX – .Net : ATLAS (Microsoft)

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 55

Frameworks AJAX
• Positionnement des frameworks les plus connus

Prototype
Dojo
script.aculo.us
Open Rico JAVA (J2EE)
Réseau

Processeur
Appli- Persis-
de
cation tance
requêtes
navigateur

( dwr/*.js ) DWR ( dwr.jar )

Echo2 ( echo2_*.jar )

( telosys.js ) Telosys ( telosys.jar )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 56

Jeudis de l'objet - EMN - 25/02/2007 28


Frameworks AJAX
• Quelques critères de choix
 Non intrusif ( ne pas impacter les standards )
 JavaScript : ECMAScript
 Java : Objets « pure POJO »
 Minimum de code (globalement & minimum de code
JavaScript en particulier)
 Intégration avec la couche de présentation ( ex : taglibs
JSP )
 Préserver l’interopérabilité avec des « postes de travail
hybrides »  échanges au format XML

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 57

3.1 - Le framework Telosys

Jeudis de l'objet - EMN - 25/02/2007 29


Telosys
• Un framework conçu pour réaliser des applications
métier de type “Client/Server Web”
• Principe :
 poste de travail de type « client http » (navigateur, …)
orienté « écrans » (« pages web » )
 serveur qui fournit des « actions » et des « services »
 requêtes client/serveur « AJAX » : XML-RPC sur HTTP
(seules les données utiles sont échangées)
• Différentes « briques » intégrées, mais utilisables
séparément : Framework Gestionnaire Couche de
JavaScript d’écran persistance
« screen maps » (mapping O/R)

Gestionnaire Gestionnaire Générateurs


d’actions de services de code

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 59

Pourquoi Telosys ?
• Répondre à la problématique des postes de travail
des applications à usage intensif
• Associer le meilleur des deux mondes :
« client léger » & « client-serveur »

WebApp + Navigateur : Client / Server :


pas de déploiement, “orienté écran”
protocoles standard, mais …  ergonomie riche, mais …

inadapté à une utilisation Telosys Protocoles “Non standard”


intensive + contraintes de déploiement
“voie du
milieu”

• Industrialiser les développements ( améliorer la


qualité et la productivité )
 réduction du « code technique » !
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 60

Jeudis de l'objet - EMN - 25/02/2007 30


Philosophie & principes généraux
• Simplicité :
 Placer l’unique fichier “telosys.jar” dans le projet …
… et l’utiliser
• Ouverture :
 Utilisable avec n’importe quelle autre technologie (Web
Services, EJB, Hibernate, clients lourds, …), intégration
avec des « servlet/JSP classiques », Struts, JSF, …
• Couverture globale & autonomie :
 Toutes les couches d’une application web standard sont
couvertes
 Aucun autre framework n’est nécessaire
• Adaptabilité :
 Comportement standard  peut être adapté/spécialisé
•  Proposer des solutions, ne pas les imposer !
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 61

Telosys : Licence & Technologies


• Licence :
GNU Lesser General Public License (LGPL)
• Technologies standards :
 Côté Serveur :
Java (Servlet, JSP, JDBC)
 Côté client :
DHTML (HTML, Javascript, CSS) or XUL
Browsers : Internet Explorer & Firefox
 Dialogue :
XML / HTTP
 IDE :
Eclipse + plugins

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 62

Jeudis de l'objet - EMN - 25/02/2007 31


Telosys : Architecture
Browser J2EE Web Container Telosys
(Internet Explorer,
Firefox, …) ( Screen Map
UIL Screen templates Server )
HTTP
JSP taglib
Screen
HTML XUL map JavaScript

authentication
(JSP) Telosys
get screen map Framework
Screen map
1 ( Request
( XHTML Server )
or XUL )
Business
request XML Layer
JavaScript
Framework RPL DAL
XML response
2 Screen
context

“AJAX”
Client Server Database
dialog

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 63

Telosys : Couches “côté serveur”


Request Screen Business Layer
Processing Layer Layer B.O.
Screen B.S. D.A.O.
Application

XML Screen Screen


XML Parser Request Session Specific Screen
Action Triggers
Request “Action”
Processor

XML Screen Standard


Data Access Layer
XML Writer Response
Action Standard
Screen-DAO
DAO
Screen

Table-DAO Connection
XmlWrapper ScreenData Pool

POJO Screen-VO Global-VO Table-VO

Commons
J2EE Web Container (Tomcat, … )
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 64

Jeudis de l'objet - EMN - 25/02/2007 32


Telosys : différents types de “clients”
• Telosys fournit un “Screen Map Server” pour
construire des IHM Web ( HTML / XUL )
• Tout type de “client http” peut dialoguer avec le
“Request Processor” ( XML-RPC ) :
 des applications « client lourd », quel que soit le
langage (Java, C++, C#, ..) ou le 4GL (Delphi, … )
 des serveurs (J2EE, .Net, PHP, …)
The “server side”
 etc… is “client agnostic”

Navigateur
( HTML or XUL ) J2EE Web Container
Application « desktop »
( Java, C, C++, C#, …)

Serveur
( J2EE, .Net, PHP, …)
? XML
HTTP Telosys
“Request Processor”

Outil de test
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 65

Principe de développement
• L’indépendance des composants permet d’envisager
différents principes de développement :

UML A partir du modèle


applicatif / métier

Compo-
Présen- sants Persis-
tation applicatifs tance
/ métier
navigateur

IHM vers le modèle de données

Modèle de données vers IHM

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 66

Jeudis de l'objet - EMN - 25/02/2007 33


3.2 - Persistance

Telosys-DAL : Architecture
Application Data Access Layer
init() dbconfig.xml
Connection
getConnection() Manager

« SqlConnection
« DAO » Provider »

SqlConnection
AgencyVO SqlConnection
AgencyDAO Pool

AgencyVOList
SqlConnection
Pool
SqlConnection
EmployeeVO EmployeeDAO
SqlConnection
EmployeeVOList Factory SqlConnection

Value Objects
For each table :
1 DAO
For each table : Pool or single Multiple
1 VO & 1 VOList connection databases

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 68

Jeudis de l'objet - EMN - 25/02/2007 34


Telosys-DAL : DAO – VO – VOList
• Exemple : table « Employe »
EmployeVO EmployeVOList
. getXxxx() . EmployeeVO add()
. setXxxx() 0..N . add( EmployeeVO )
. isXxxx() . insert ( index, EmployeeVO )
. toString() . replace ( index, EmployeeVO )
. remove ( index )
POJO . remove (EmployeeVO )
SqlRequests . EmployeeVO get( index )
. getTableName() . EmployeeVO getFirst()
. getSqlXxxx() . EmployeeVO getNext()
LinkedList

. load() . loadList()
. save() . saveList() ListQuery
Mapping . delete() . deleteList()
Table - VO . insert() . insert() . setParameter()
. update() . count() . getSqlSelect()
. exists() . getSqlCount()
. createQuery() . getSqlDelete()

EmployeDAO

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 69

Telosys-DAL : Générateur de code


• Plugin Eclipse

 Modèle = Base de données


( metadata )

 Mapping
Colonne Table – Attribut Java

 Génération …
. VO
. VOList
. DAO

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 70

Jeudis de l'objet - EMN - 25/02/2007 35


3.3 - Screen Context
& Actions Standards

Telosys-SCL : “Screen Context”


• SCL ( « Screen Context Layer » ) :
Conteneur de « Screen Context »
• Screen Context = assemblage d’objets (éléments)
gérés par les écrans de l’application
 Un écran manipule généralement des « entités »
et des « listes »
 un Screen Context = assemblage de VO et de VOList
 Pattern « SDO simplifié »

Element Name Value Object

Screen Context Value Object List Value Object


Element Name
Value Object
Value Object
1 à N « Elements » Element Name Value Object

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 72

Jeudis de l'objet - EMN - 25/02/2007 36


Telosys-SCL : “Screen Context”
• Exemple de “Screen Context” :
public class EmplData extends StandardScreenData
{
//--- Elements Names
public final static String EMPLOYEE = "employee" ;
public final static String AGENCY = "agency" ;
public final static String PROJECTS = "projects" ;

//------------------------------------------
public EmplData() throws TelosysException
{
//--- Define the Screen Data Elements
defineElement( EMPLOYEE, EmployeeVO.class );
defineElement( AGENCY, AgencyVO.class );
defineElement( PROJECTS, ProjectVOList.class );
}
}

Element Name Element Type ( class )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 73

Telosys-SCL : “Screen Context”


• Chaque utilisateur ( session http ) travaille
sur 1 à N écrans simultanément
donc sur 1 à N « Screen Context »

1 user
Http Session 1 http session
Screen Session 1 Screen Session

0..N 0..N
screens Screen
Screen Context Context

Vue(s) Modèle(s)
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 74

Jeudis de l'objet - EMN - 25/02/2007 37


Telosys-SCL : “Screen Action”
• Les actions utilisateur sont soumises au serveur
(en XML-RPC) qui les exécute dans un « contexte » :
Action Modèle

Standard Actions Screen


Screen
Context Context
Screen
Elements
Triggers
ACTION Value Object
Screen
Procedures

Specific
Screen Actions Screen DAO

Action Implementation
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 75

Telosys-SCL : “Screen Action”


• Telosys fournit un jeu d’actions standards pour
réaliser les opérations classiques d’un écran et
permet d’ajouter des opérations spécifiques
Gestion du Persistance du
Screen Context : Screen Context :
• Open • Load
• Close • Save
• Set Screen • Insert
Context
• Get • Delete
• Clear • Update
Debug :
Appel de Spécifique
Standard • Ping procédure :  à implémenter
 pas de codage • Echo
(surcharge possible )
• Exec
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 76

Jeudis de l'objet - EMN - 25/02/2007 38


Telosys-SCL : exemple d’action
Action « load »
Client set=true Server Data
1 load get=true Params Params Access
ret. code Screen Layer
Data Data
Data

set=false
2 load get=true Params Params

ret. code Data Data


no set

set=true

3 load get=false Params Params

ret. code Screen Data


Data

XML Java objects


Request : default values Response : flag
set="true" / get="true" “found” or “not found”

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 77

Telosys-SCL : “Triggers”
• Chaque exécution d’action est encadrée par le
déclanchement de deux triggers (avant et après)
Return true  « continue »
autorise l’exécution de l’action
1 beforeXxx() Return false  « cancel »
annule l’exécution de l’action

ACTION Traitement de
2 L’action “Xxx”
Return true  action validée
3 afterXxx() ( commit )
Return false  action annulée
( rollback )

Utilisations :
contrôles, règles « métier », traces, journalisation, etc …

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 78

Jeudis de l'objet - EMN - 25/02/2007 39


Telosys-SCL : “Screen Context”
• La classe “Screen Registry” permet de définir les
Screen Context et les composants qu’ils utilisent
Screen Context
Screen DAO Screen Triggers
Screen Name
Screen Data
Screen Actions Screen Procedures

Données ( « éléments » ) Comportements ( « actions » )

public class ScreenRegistry extends StandardScreenRegistry


public void initRegistry()
{
// Parameters :
// Name, Elements, Screen DAO, Actions, Triggers, Procedures
register("S001", S001.class, S001dao.class, null, S001trig.class, S001proc.class);
register("S002", S002.class, S002dao.class, null, null, null );
}

Screen Name Screen Components : data + actions


Industrialisation des développements AJAX/J2EE - Laurent GUERIN 79

3.4 - Dialogue Client-Serveur

Jeudis de l'objet - EMN - 25/02/2007 40


Dialogue « Client/Serveur »
• Le dialogue entre le « poste de travail » et le
« serveur » est basé sur un échange de type
« client/serveur » :
• Les requêtes et les réponses sont encodées en XML

Client Server
XML SAX
1 request XML Parser
Screen
Javascript
2 Data
XmlWrapper
AJAX
framework
généré processing
XML
XML
DOM
3 response XML Writer

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 81

XML : “request” et “response”


• Tag « request » :
 Root tag : <request> … </request>
 Peut contenir …
 Paramètres : <params> … </params>
 Data (objects) : <data> … </data>

• Tag « response » :
 Root tag : <response> … </ response >
 Contient toujours …
 Return status : <return> … </ return >
 Peut contenir …
 Data (objects) : <data> … </data>
 Vues : <view> … </view>
 Valeurs : <values> … </values >

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 82

Jeudis de l'objet - EMN - 25/02/2007 41


XML : exemple de dialogue
• Action « GET » (= récupérer les éléments de
« screen data »)
 Request :
<request screen-name="S001" screen-id="0" action="get" >
</request>

Screen
 Response : Context ID Action C’est
<response screen-name="S001" screen-id="0" action="get" >
tout !
<return code="0" message="Ok" > Status
</return>

<data>
<employe Matricule="23" Nom="Toto" Prenom="Marcel" Contrat="0"
DateNais="2005-01-03" Cadre="0" Agence="0" Salaire="0.0" />
</data>

</response> Data

XML flow  “keep it simple & small”


Industrialisation des développements AJAX/J2EE - Laurent GUERIN 83

Dialogue « Client/Serveur »
• Les flux XML échangés sont très légers
( seules les données utiles sont transportées )
• Ils autorisent tout type de « client »
(pas uniquement un navigateur)
• Ils facilitent la mise au point (lisibles)
• et l’enregistrement et l’exécution de tests (montée
en charge, non régression, …)

Exemple :
requêtes à
partir de JMeter

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 84

Jeudis de l'objet - EMN - 25/02/2007 42


3.5 - Telosys « côté client »

( Screen Maps & framework JavaScript)

Telosys-UIL : Screen Map & Templates


• Un écran ( « screen map » ) = JSP + TagLib
 Une page JSP autonome

ou
 Un « screen body » incrusté dans un « template »

• Principe des « templates » :


« template » (model1.jsp)
element content
element
« value »
body

« screen body »

element
( myscreen.jsp )

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 86

Jeudis de l'objet - EMN - 25/02/2007 43


Telosys-UIL : Screen Map & Taglib
• Exemple ( JSP avec taglib ) :
<%@ taglib uri="/telosys/widgets" prefix="t" %>
« Screen body »
TagLib
<t:screenbody> Widget

<t:label id="L_EmpId" x="40" y="60" txt="Employee Id : " cl="PK_field_label" />


<t:label id="L_LastName" x="40" y="100" txt="Last name : " />
<t:label id="L_FirstName" x="40" y="140" txt="First name : " />
<t:label id="L_Birthdate" x="40" y="180" txt="Birthdate : " />

<t:field x="200" y="60" id="EmpId" cl="PK_field" size="6" maxlength="6" />


<t:field x="200" y="100" id="LastName" size="30" maxlength="30" value="Aaaa" />

<t:button x="460" y="100" id="b1" txt=“My button" onclick="b1_onClick();" />

<t:field x="200" y="140" id="FirstName" size="30" maxlength="30" value="Georges" />


<t:field x="200" y="180" id="Birthdate" size="10" maxlength="10" value="" type="Date" />

<t:radiogroup id="Contract" x="200" y="220">


<t:radioitem id="R_field61" x="0" y="0" value="1" txt="C.D.D. (1)" />
<t:radioitem id="R_field62" x="0" y="20" value="2" txt="C.D.I. (2)" /> Field Type
( for JavaScript
</t:radiogroup > Checking )

<t:checkbox id="Manager" x="340" y="220" value="1" valueoff="9" txt="Manager" />

</t:screenbody > Relative or


absolute (x,y)
positioning

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 87

Telosys-UIL : Référentiel
• Chaque écran est référencé dans le fichier
« screen.xml »
 Association « nom symbolique »  « screen »
 Exemple :

<screen name="EMPLOYE" template="tpl.jsp" body="employe.jsp" script="employe.js" >


<element name="title" value=“Gestion des employés" />
</screen>

• Les écrans sont adressés par leur « nom »


http://…/screenmap?name=EMPLOYE

<t:url_screenmap name="EMPLOYE" />

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 88

Jeudis de l'objet - EMN - 25/02/2007 44


Telosys-UIL : Architecture
Telosys-UIL Server
HTTP Request (GET or POST) screens.xml
http://…/screenmap?name=S001 ( XML file )

ScreenMapServlet
init()

ScreenDefinitions
Séparation
 Fond d’écran (.jsp)
 Comportement (.js) ScreenMap Data used by the TagLib
( TargetURL ) (request attribute)
 Style (.css)
Forward Telosys
Telosys
Telosys (TargetURL) Javascript
JSP taglib
ScreenMap Javascript framework
framework
( XHTML
or XUL ) Template Body Page
xxx.jsp xxx.jsp xxx.jsp

xxx.js xxx.js xxx.css

xxx.css Target

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 89

Telosys-UIL : “framework JavaScript”


• Un seul fichier “telosys.js”, contenu dans
“telosys.jar”
 Ensemble de “classes et fonctions”
telosys.js  Code “Orienté Objet”
 Masque les aspects techniques
( sérialisation XML, mapping, AJAX, etc…)

“screen.js”

(specifique)

ScreenRequest
Keyboard
AJAX
XML
Screen ScreenActions Requester HTTP
- Name
-Context ID
- Fields Browser TelosysEnv ScreenResponse

telosys.js

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 90

Jeudis de l'objet - EMN - 25/02/2007 45


Telosys-UIL : écrans & actions
• Le « comportement » de chaque écran est isolé
dans un fichier « .js »
• Il s’appuie sur les classes et les fonctions du
framework
•  Le code JavaScript est réduit au strict minimum

<t:button width="80" txt="Set" telosys.js


//--------------------------------------------
onclick="actionSet();" /> function actionSet()
{
<t:button width="80" txt="Get" actions.doSet();
onclick="actionGet();" /> }
//--------------------------------------------
« Screen body » (.jsp) function actionGet()
{
var response = actions.doGet();
if ( response.isOK() && response.dataVoid() )
{
alert ( "Aucun employé en cours !" );
}
}
« Comportement » ( .js )
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 91

Conclusion

Jeudis de l'objet - EMN - 25/02/2007 46


Conclusion
• « AJAX » a popularisé un « mode d’utilisation du
Web » (pas nouveau) qui comble une partie des
insuffisances du « web traditionnel »

• NB: AJAX natif (sans outils) est complexe


( à développer et à maintenir )
 outillage indispensable

• Associé à des socles techniques efficaces, AJAX


facilite la réalisation (ou le portage) d’ applications
métier (à usage intensif) dans un environnement
« Web »
Industrialisation des développements AJAX/J2EE - Laurent GUERIN 93

Avenir …
• Nécessité de mixer le « web » et le « desktop »

• Différentes technologies …
 HTML ( XHTML, DHTML, … )
 XUL
 Flash / Flex ou Open Laszlo
 Eclipse RCP (Rich Client Platform)
 Java SWT
 Navigateur embarqué
 Microsoft
 .Net, XAML, Vista / WPF ( Windows Presentation Foundation )
 etc …

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 94

Jeudis de l'objet - EMN - 25/02/2007 47


Avenir …

• Une prédiction ?

Le
Le poste
poste de
de travail
travail de
de l’avenir
l’avenir
sera
sera un
un poste
poste «« hybride
hybride »»

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 95

Avenir …
• Une recommandation …

Méfiez
Méfiez vous
vous des
des prédictions
prédictions !!
;-)

Exemple :

«« There
There is
is no
no reason
reason for
for any
any individual
individual
to
to have
have aa computer
computer inin his
his home
home »»
1977
1977--Ken
KenOlsen,
Olsen,
founder
founderof
ofDigital
DigitalEquipment
EquipmentCorporation
Corporation

Industrialisation des développements AJAX/J2EE - Laurent GUERIN 96

Jeudis de l'objet - EMN - 25/02/2007 48


FIN

Jeudis de l'objet - EMN - 25/02/2007 49