Introduction aux RIA (Rich Internet Applications)

5 542 vues

Publié le

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

Publié dans : Technologie
1 commentaire
6 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
5 542
Sur SlideShare
0
Issues des intégrations
0
Intégrations
37
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive















































































  • 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

    ×