Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction aux RIA (Rich Internet Applications)

5 779 vues

Publié le

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

Publié dans : Technologie

Introduction aux RIA (Rich Internet Applications)

  1. 1. Rich Internet Application Introduction Tugdual Grall (tugdual@gmail.com) http://www.tugdualgrall.com Decembre 2009 1
  2. 2. Introduction 2
  3. 3. Introduction Qui suis-je ? 2
  4. 4. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org 2
  5. 5. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org Co-fondateur: www.nantesjug.org 2
  6. 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. 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. 8. Quelques exemples: 3
  9. 9. Quelques exemples: 3
  10. 10. Quelques exemples: 3
  11. 11. Quelques exemples: 3
  12. 12. Quelques exemples: 3
  13. 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. 14. Technologies AJAX Adobe Flex/AIR Java Applications Applets/WebStart JavaFX Microsoft Silverlight 5
  15. 15. AJAX Asyncrhonous Javascript And XML 6
  16. 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. 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. 18. Differences... 9
  19. 19. Web “Classique” 10
  20. 20. Web avec AJAX 11
  21. 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. 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. 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. 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. 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. 26. Ajax “in action” Appel du serveur httpRequest.open("GET", "./getEmployeeList?deptno=10", true); httpRequest.onreadystatechange = function () { processRequest(); } ; httpRequest.send(null); 17
  27. 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. 28. Démonstration AJAX: Les Basiques 19
  29. 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. 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. 31. Démonstration AJAX: XML 22
  32. 32. Vue Generale HTTP Client Applications “AJAX” Java, PHP, Ruby, .net, ... 23
  33. 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. 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. 35. Démonstration AJAX: JSON 26
  36. 36. Je dois donc devenir un expert Javascript / HTML? 27
  37. 37. Je dois donc devenir un expert Javascript / HTML? Non pas vraiment... 27
  38. 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. 39. Google Web Toolkit Les concepts: Développer en Java Compiler / Générer une application JavaScript 29
  40. 40. GWT: Développement GWT Designer Outils Java Eclipse Netbeans IDEA GWT Designer 30
  41. 41. Démonstration Google Web Toolkit Dojo, JQuery, ... 31
  42. 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. 43. Java (Client) Applet / JavaFX Java WebStart 33
  44. 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. 45. Applets Une application Java embarquée dans une page HTML S’execute au sein du Navigateur 35
  46. 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. 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. 48. Adobe Flash / Flex / Air 38
  49. 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. 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. 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. 52. Flex Builder Environnement de Dev Intégré (IDE) Edition des MXML, ActionScript, ... Basé sur Eclipse Tire partie des plugins 42
  53. 53. SilverLight RIA Selon Microsoft 43
  54. 54. Silverlight Applications Riches selon Microsoft Utilisation d’un plugin (comme Flash) Gestion des animations, composants, données, ... 44
  55. 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. 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. 57. Conclusion ... 47
  58. 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. 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. 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. 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. 62. Résumé Browser Desktop Portabilité Prise en Main AJAX +++ --- +++ +* Flex ++ - ++ +++ Air - ++ ++ +++ Silverlight ++ - + +++ JavaFX + + +++ - Java + + +++ +++ *: Depend de la solution choisie 52
  63. 63. Exemple d’analyse Xebia RIA Contest Flex / Silverlight / GWT / Echo3 / JavaFX 53
  64. 64. Web 2.0 Introduction Tugdual Grall http://www.tugdualgrall.com 54
  65. 65. Blogs 55
  66. 66. Blogs 55
  67. 67. Blogs 55
  68. 68. Blogs 55
  69. 69. Wikis 56
  70. 70. Wikis 56
  71. 71. Wikis 56
  72. 72. Wikis 56
  73. 73. Réseaux Sociaux 57
  74. 74. Réseaux Sociaux 57
  75. 75. Réseaux Sociaux 57
  76. 76. Social Bookmarking 58
  77. 77. Social Rating 59
  78. 78. Social Rating 59
  79. 79. Social Rating 59
  80. 80. Mashups 60
  81. 81. Mashups 61
  82. 82. Autres... 62
  83. 83. Software As A Service (SaaS) 63
  84. 84. Rich Internet Application Introduction Tugdual Grall http://www.tugdualgrall.com 64

×