Support de cours Master 2/Miage Université de Nantes 2009-2010

1. Rich Internet Application
Introduction
Tugdual Grall (tugdual@gmail.com)
http://www.tugdualgrall.com
Decembre 2009
1

2. Introduction
2

3. Introduction
Qui suis-je ?
2

4. Introduction
Qui suis-je ?
Responsable Produit et Business chez
www.exoplatform.org
2

5. Introduction
Qui suis-je ?
Responsable Produit et Business chez
www.exoplatform.org
Co-fondateur: www.nantesjug.org
2

6. Introduction
Qui suis-je ?
Responsable Produit et Business chez
www.exoplatform.org
Co-fondateur: www.nantesjug.org
Les Buzzwords associés à RIA ...
2

7. Introduction
Qui suis-je ?
Responsable Produit et Business chez
www.exoplatform.org
Co-fondateur: www.nantesjug.org
Les Buzzwords associés à RIA ...
Let’s Dive Into RIA ...
2

8. Quelques exemples:
3

9. Quelques exemples:
3

10. Quelques exemples:
3

11. Quelques exemples:
3

12. Quelques exemples:
3

13. RIA: Objectifs
Amélioration de l'expérience utilisateur
Meilleure ergonomie, performance, interactivité
Rafraîchissement partiel des “écrans”
Asynchrone: l’utilisateur n’attend pas
4

14. Technologies
AJAX
Adobe Flex/AIR
Java Applications
Applets/WebStart
JavaFX
Microsoft Silverlight
5

15. AJAX
Asyncrhonous Javascript And XML
6

16. AJAX
AJAX: Une nouvelle approche pour les applications
Webs
Février 2005: Jesse James Garrett, Adaptive Path
Ajax: A New Approach to Web Applications
7

17. Définition
AJAX n’est pas un “standard” mais un ensemble de
technologies:
HTML / XHTML & CSS pour la présentation
JavaScript & DOM pour manipuler le contenu
XML & XMLHttpRequest pour communiquer avec le
serveur
8

18. Differences...
9

19. Web “Classique”
10

20. Web avec AJAX
11

21. Web “Classique”
Applications Web “sans” AJAX:
Le client -navigateur- envoie une requête HTTP
Le serveur renvoie une page HTML “complète”
Pour échanger des données toute la page est
rafraîchie
12

22. Applications AJAX
Applications AJAX:
Le navigateur envoie une premiere requête HTTP
pour charger la page et autres documents:
Images, CSS, Javascript
Envoi de requêtes HTTP asynchrones pour récupérer
les données en fonction des besoins et événements
utilisateur
13

23. Quelques Caractéristiques
Applications AJAX:
diminution de la quantité d’information échangées
entre le client et navigateur
Utilisation intensive de JavaScript
Utilisation de l’object XMLHttpRequest
Attention à la compatibilité entre navigateurs
14

24. AJAX: Partout!!!
Widget/Module Environments
Mac OS X
Vista
Netvibes, iGoogle, MyYahoo!
Game Consoles
Wii (Opera)
Mobile
Opera Mobile and Opera Mini
Symbian S60
Pocket IE
Motorola Q
15

25. Ajax “in action”
Création d’un object XMLHttpRequest
if (window.ActiveXObject)
{
// Microsoft Way
httpRequest = new
ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
// Others...
httpRequest = new XMLHttpRequest();
}
16

26. Ajax “in action”
Appel du serveur
httpRequest.open("GET", "./getEmployeeList?deptno=10", true);
httpRequest.onreadystatechange =
function () { processRequest(); } ;
httpRequest.send(null);
17

27. Ajax “in action”
Récuperation de la réponse
function processRequest()
{
if (httpRequest.readyState == 4)
{
if(httpRequest.status == 200)
{
// process data as XML
httpRequest.responseXML;
// or Text
alert(httpRequest.responseText);
}
else
{
alert("Error loading pagen"+ httpRequest.status +":"+ httpRequest.statusText);
}
}
}
18

28. Démonstration
AJAX: Les Basiques
19

29. XMLHttpRequest: Détails
onreadystatechange : Listener d'événements de la
requêtes HTTP; utiliser une fonction pour le “callback”
readyState : statut de l'objet (Requête).
responseText : Réponse sous forme de texte.
responseXML : Réponse sous forme d'objet DOM.
status : code numérique de réponse du serveur HTTP
statusText : message associé au code de réponse.
Les code possibles pour le statut de l'objet sont :
0 = non initialisé
1 = ouverture. La méthode open() a été appelée avec succès
2 = envoyé. La méthode send() a été appelée avec succès
3 = en train de recevoir. Des données sont en train d'être transférées, mais
le transfert n'est pas terminé
4 = terminé. Les données sont chargées.
20

30. AJAX: X comme XML
Echange de données, plutôt que HTML pour laisser
l’application gérer la présentation
Utilisation de la méthode responseXML pour
récupérer un Document XML
Utilisation du “Parser XML” et APIs associées pour
manipuler les données depuis l’application
var items = req.responseXML.getElementsByTagName("item");
21

31. Démonstration
AJAX: XML
22

32. Vue Generale
HTTP
Client Applications
“AJAX” Java, PHP, Ruby, .net, ...
23

33. JSON: Alternative à XML
XML est “coûteux” particulièrement dans le navigateur
Une alternative: JSON: JavaScript Object Navigation
JSON: un format d’échange/sérialisation d’objets
JSON
XML
{
<rss version="2.0">
"Version":"2.0",
<channel>
"Channel": {
<item>
"Items": [{
<link>http://tug.com</link>
"Link":"http://tug.com",
<title>Demo Item</title>
"Title":"Demo Item"
</item>
}]
</channel>
}
</rss>
}
24

34. JSON in Action
Client Serveur
JSON est inclus dans le Sérialisation des objects
moteur JavaScript des par les applications
navigateur
Parseurs: Java, C, PHP,
Ruby, Perl, ...
JSON
25

35. Démonstration
AJAX: JSON
26

36. Je dois donc devenir un expert
Javascript / HTML?
27

37. Je dois donc devenir un expert
Javascript / HTML?
Non pas vraiment...
27

38. Outils?
Nombreux frameworks JavaScript, intégrés ou non aux
plateformes serveurs
Dojo Google Web Toolkit (GWT)
Prototype Direct Web Remoting (DWR)
Scriptaculous JavaServer Faces
JQuery RichFaces, IceFaces, Trinidad
Yahoo! UI (YUI) Echo3
28

39. Google Web Toolkit
Les concepts:
Développer en Java
Compiler / Générer une application JavaScript
29

40. GWT: Développement
GWT Designer
Outils Java
Eclipse
Netbeans
IDEA
GWT Designer
30

41. Démonstration
Google Web Toolkit
Dojo, JQuery, ...
31

42. Ajax: Bonnes Pratiques
JavaScript est un vrai langage, et très puissant
dynamique, gestion d’exception, ...
Ne pas réinventer la roue
Prendre un framework existant
Tester votre application dans les navigateurs ciblés
32

43. Java (Client)
Applet / JavaFX
Java WebStart
33

44. RIA & Java
Java sur le Client
Basé sur JavaSE, JavaME
Utilisation de Swing et des fonctionnalités Java
Déploiment/Execution:
Applets
Java WebStart
34

45. Applets
Une application Java embarquée dans une page HTML
S’execute au sein du Navigateur
35

46. Java WebStart
Technologie de déploiement des applications Java
Utilise JNLP (Java Network Launching Protocol / JSR-56)
Java WebStart supporte:
Mode Déconnecté
Code Signing
Isolation (Sandboxing)
Mise à jour des applications/Versionning
Installation des composants à la demande 36

47. JavaFX
Langage de script permettant la création d’interfaces
riches en tirant partie de la plateforme Java
Demos en ligne: http://jfx.wikia.com/wiki/Demos
37

48. Adobe
Flash / Flex / Air
38

49. Flex / AIR : Définition
Framework Open Source pour RIA
Utilisation du plugin Adobe Flash pour executer les
applications
Supporté par toutes les plateformes... sur lesquelles le
plugin Flash existe
AIR: Adobe Integrated Runtime
Possibilité d’utiliser les applications Flash/Flex sur l’OS
39

50. Flex: Composants
Tire partie de JavaEE
MXML (Macromedia XML)
Déclaration de l’interface graphique
Création de applications en assemblant des
composants graphiques
Boutons, Listes, Layouts, Effets, ...
Librairie très riche
40

51. Flex: Runtime
Flex Builder IDE Browser
Flex SDK Flash Player
MXML ActionScript
Flex Class Library Data .swf Data
Web Server
Compile
XML Adobe Life Cycle
JSON Data Services
SOAP Web Services J2EE App Server
.swf
Existing Application Infrastructure
41

52. Flex Builder
Environnement de Dev Intégré (IDE)
Edition des MXML, ActionScript, ...
Basé sur Eclipse
Tire partie des plugins
42

53. SilverLight
RIA Selon Microsoft
43

54. Silverlight
Applications Riches selon Microsoft
Utilisation d’un plugin (comme Flash)
Gestion des animations, composants, données, ...
44

55. Silverlight : Composants
Tire Partie de Microsoft .Net
XAML (Extensible Application Markup Language)
Déclaration de l’interface graphique
Création de applications en assemblant des
composants graphiques
Boutons, Listes, Layouts, Effets, ...
45

56. Les outils
Utilisation des Outils Microsoft pour le Développement
Visual Studio 2008
Orienté Développeurs d’Entreprise
Expression Studio
Création Graphique
46

57. Conclusion
...
47

58. RIA: Attention...
Dépendances sur fonctions “avancées” ou plugins:
Javascript, Flash, Java, ...
L’utilisateur doit s’habituer aux applications:
Navigation, rafraîchissement partiel
L’accessibilité est encore peu intégrée à ces solutions
Gestion difficile -impossible- du bouton “Back”
48

59. RIA: Attention
Tout est “dynamique”
Difficile pour les moteurs de recherche d’indexer les
“pages”
Impossible de passer des URLs/Bookmarks en
gardant un état
Ce n’est pas necessairement un “vrai” problème car il
s’agit ici d’applications et non pas de site.
49

60. Autres solutions?
Il existe beaucoup d’autres solutions:
OpenLazlo : équivalent à Flex avec possibilité de
générer des applications HTML
XUL : XML User Interface Language, création
d’application riches dans Mozzilla
Grails, RubyOnRails ...
Curl, WaveMaker, ZK, Telosys, Wicket, ...
50

61. Comment choisir ?
Choix difficile... à étudier au cas par cas
Besoins “réels”
Indépendance du serveur ?
Type de framework: visuel, data access, ...
Outillage, Documentation disponibles, Support
Communauté
Tenir compte des standards...si possible
notamment l’arrivée de HTML 5 51

62. Résumé
Browser Desktop Portabilité Prise en Main
AJAX +++ --- +++ +*
Flex ++ - ++ +++
Air - ++ ++ +++
Silverlight ++ - + +++
JavaFX + + +++ -
Java + + +++ +++
*: Depend de la solution choisie
52

63. Exemple d’analyse
Xebia RIA Contest
Flex / Silverlight / GWT / Echo3 / JavaFX
53

64. Web 2.0
Introduction
Tugdual Grall
http://www.tugdualgrall.com
54

65. Blogs
55

66. Blogs
55

67. Blogs
55

68. Blogs
55

69. Wikis
56

70. Wikis
56

71. Wikis
56

72. Wikis
56

73. Réseaux Sociaux
57

74. Réseaux Sociaux
57

75. Réseaux Sociaux
57

76. Social Bookmarking
58

77. Social Rating
59

78. Social Rating
59

79. Social Rating
59

80. Mashups
60

81. Mashups
61

82. Autres...
62

83. Software As A Service (SaaS)
63

84. Rich Internet Application
Introduction
Tugdual Grall
http://www.tugdualgrall.com
64