Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09

1,558 views

Published on

Considérations du génie logiciel sur le Web 2.0, dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,558
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
66
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09

  1. 1. Web 2.0 - Quelques considérations du génie logiciel Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 ETS - Montréal - 2009
  2. 2. Web 2.0 – Patrons d'applications GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  3. 3. Web 2.0 – Patrons d'applications  Conteneur (Container) : à base de plugiciels (plugins) ou de petites applications (Netvibes)  Agrégateur / Webagrégat (Aggregator, Mashup) : plusieurs sources de données dans une même interface. Souvent utilisé pour rajeunir de vieilles applications Web. (Google Map)  Espace de travail (Workspace) : basé sur un document et un ensemble d'outils (OpenSyllabus, Wiki)  Outil de collaboration (Collaborator) : permet à plusieurs utilisateurs de travailler ensembles et de communiquer (Skype)  Tableau de bord (Manager) : interface pour accéder et gérer une grosse base de données  Réseau social (Social Network) : à base de profils et de contenus générés par les usagers, possibilité de former des groupes et d'interagir avec des usagers partageant ses intérêts (Ning) GTI-780 / MTI-780 * Source : R. Dewsbury 2008 ETS - Montréal - 2009
  4. 4. Web 2.0 – Nouveaux designs, vieilles technos! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  5. 5. Web 2.0 – Nouveaux designs, vieilles technos!  Réseau & protocoles : TCP/IP – HTTP -  Architectures : Client / Serveur, SOA*, Services web  Documents : HTML – XML – XHTML  Normes Web de base : XHTML – CSS – DOM – JavaScriptBases de données SQL (au coeur du Web 2.0)**  Bande passante plus élevée – Internet haute vitesse  Mobilité – téléphonie intelligente  Vidéo et audio numérique  Réutilisation & transformation facile des données : XSL / XSLT  Normes avancées du Web : Ajax – RSS – JSON – REST – COMET GTI-780 / MTI-780 * SOA : Architecture orientée services ** On parle « d'Infoware » ETS - Montréal - 2009
  6. 6. Web 2.0 – « L'expérience-utilisateur » GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  7. 7. Ajax – Une véritable percée! AJAX Le premier à utiliser le terme AJAX fut Jesse James Garrett en février 2005 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  8. 8. Ajax - Avantages  Réponses rapides aux actions de l'utilisateur  Applications Web riches, rapides et légères  Pas de long téléchargement, ni d'installation  Permet de modifier partiellement la page affichée par le fureteur pour la mettre à jour sans avoir à recharger la page entière.  Réduit la quantité d'information demandée au serveur  Fait davantage de traitement du côté client (en JavaScript) et moins sur le serveur et le réseau  Donc économie en traitement serveur & bande passante GTI-780 / MTI-780 ETS - Montréal - 2009
  9. 9. Client léger HTML vs client riche Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  10. 10. Client léger HTML vs client riche Ajax Client HTML (fureteur) Serveur sans état avec état (stateless) (statefull) Pas d'état persistant entre les transactions qui sont considérées comme indépendantes Client JavaScript (fureteur) Serveur avec état sans état (statefull) (stateless) Pas d'état persistant entre les transactions qui sont considérées comme indépendantes GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  11. 11. Ajax - Inconvénients JS Ajax GTI-780 / MTI-780 ETS - Montréal - 2009
  12. 12. Ajax - Inconvénients  Phénomène de mode  Problèmes de compatibilité entre les différents fureteurs  Ne fonctionne pas si JavaScript est désactivé  Les données chargées de façon dynamique ne sont pas indexées par les moteurs de recherche  Si le traitement du côté serveur est long, le traitement asynchrone d'Ajax fait que les changements se font avec un délai  Le bouton de retour en arrière et les signets ne fonctionnent pas  Sécurité : davantage d'exposition aux attaques et XSS  Basé sur JavaScript qui a ses propres inconvénients GTI-780 / MTI-780 ETS - Montréal - 2009
  13. 13. JavaScript - Inconvénients Euh!..., il ne connaissait pas assez le JavaScript... GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  14. 14. JavaScript - Inconvénients Problème de portabilité, incompatibilités des fureteurs, fuites de mémoire & longs chargements Pas de typage statique des variables en JavaSript Le type d'une variable peut changer lorsqu'une nouvelle valeur lui est affectée (typage dynamique). var unNombre = 2; unNombre = "deux"; Sensible à la moindre coquille, sensible à la casse formulaire.montnat = document.getElementById(''montant''); window.unlod Débogage à l'exécution pas à la compilation Support inégal des outils et IDEs Problème de sécurité XSS (injection de scripts) Rareté des « programmeurs experts » en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
  15. 15. JavaScript - null vs undefined vs false vs "" vs 0 undefined 0 ? null false "" GTI-780 / MTI-780 ETS - Montréal - 2009
  16. 16. JavaScript - null vs undefined vs false vs "" vs 0 null représente l'absence d'une référence à un objet (no object), c'est un objet de type null undefined pour une variable déclarée mais non initialisée ou une propriété inexistante d'un objet Si l'on considère uniquement leur valeur, null et undefined sont égaux (== égalité) pour JavaScript mais pas leur types (=== identité) sous-jacents false est la valeur booléenne correspondant à faux "" la chaîne vide 0 le zéro Si l'on considère uniquement leur valeur false, "" et 0 sont égaux (== égalité) pour JavaScript mais pas leur types (=== identité) sous-jacents. GTI-780 / MTI-780 ETS - Montréal - 2009
  17. 17. JavaScript – Pas conçu pour de gros logiciels Made in Ja vaScript GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  18. 18. JavaScript – Pas conçu pour de gros logiciels Excellent pour l'écriture rapide de petites applications, la souplesse de JavaScript devient un handicap pour l'écriture de gros logiciels et de logiciels complexes Le typage dynamique représente une source importante d'erreurs pour de gros logiciels Normal, car JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un peu d'interactivité dans une page web Pas d'espace de nommage (collision de variables), manque de modularité et de capacité à grandir, pas un véritable langage à objets Mise au point et réutilisation difficiles GTI-780 / MTI-780 ETS - Montréal - 2009
  19. 19. Découplage GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  20. 20. Découplage Dissocier le contenu de la présentation (forme) => XHTML & CSS Découpler le contenu et le comportement JavaScript non intrusif (Unobtrusive) => XHTML & JS Mettre en valeur la sémantique du contenu => XHTML GTI-780 / MTI-780 * Source : R. Dewsbury 2008 ETS - Montréal - 2009
  21. 21. Choix d'une technologie client GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  22. 22. JavaScript & DHTML vs Machines virtuelles Outils purs JavaScript Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc. Machines virtuelles / plugiciels Sun JVM – Java Applet – JavaFX Adobe Flash – Flex – AIR Microsoft .Net – Silverlight GTI-780 / MTI-780 ETS - Montréal - 2009
  23. 23. Technologies Sources Libres vs Propriétaire$ Sources Libres Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc. Sun JVM – Applet Java – JavaFX (?) Technologies propriétaire$ Adobe Flash – Flex – AIR Microsoft .Net – Silverlight GTI-780 / MTI-780 ETS - Montréal - 2009
  24. 24. Choix d'une technologie serveur GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  25. 25. Survol des technologies serveurs Architecture client-serveur SOA (Service Oriented Architecture) Services Web : REST, SOAP, RPC Java / JEE (servlet et/ou JSP), PHP, Ruby, Python, .NET ou un autre langage peut être utilisé du côté serveur GTI-780 / MTI-780 ETS - Montréal - 2009
  26. 26. Choix d'une méthodologie de développement GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  27. 27. Choix d'une méthodologie de développement Cycles très court - sorties rapides et fréquentes Applications toujours en béta Compilation & assemblage (build) en continu Tests automatisés en continu Maintenance continue Approche Kaizen (qualité totale) Le plus souvent méthodologies agiles XP Scrum Orientées tests (Test Driven) GTI-780 / MTI-780 ETS - Montréal - 2009
  28. 28. Si seulement on pouvait utiliser Java! * Source Clipart : http://www.clipart.com GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009
  29. 29. Si seulement on pouvait utiliser Java! Conçu pour le génie logiciel Véritable langage de POO typage statique, compilé, complet Espace de nommage, notion de paquet (Package) Répandu, connu et copié! Langage le plus répandu – 6 millions de développeurs Multiplateforme - “Write Once, Run Anywhere” - Windows, Linux, OS X Abondante documentation, livres et cours Nombreux outils et EDIs Le plus grand nombre de bibliothèques et canevas d'applications Le plus grand nombre d'outils en source libre dont Java lui-même Puissants EDIs* Eclipse, NetBeans ou IntelliJ Débogueur / éditeur de code évolué / outil de refactorisation / outil d'analyse du code GTI-780 / MTI-780 ETS - Montréal - 2009
  30. 30. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

×