• Save
Introduction aux RIA (Rich Internet Applications)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introduction aux RIA (Rich Internet Applications)

  • 5,274 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • SVP JE VOURDAI TELECHARGER CETTE PRESENTATION
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,274
On Slideshare
5,242
From Embeds
32
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
1
Likes
5

Embeds 32

http://www.slideshare.net 22
http://www.techgig.com 8
http://techgig.in 1
http://115.112.206.131 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Transcript

  • 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