Web 2.0 - Quelques considérations
               du génie logiciel
                         Sujets spéciaux en TI

       ...
Web 2.0 – Patrons d'applications




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Web 2.0 – Patrons d'applications
   Conteneur (Container) : à base de plugiciels (plugins) ou de
    petites applications...
Web 2.0 –           Nouveaux designs, vieilles technos!




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com ...
Web 2.0 –                           Nouveaux designs, vieilles technos!
   Réseau & protocoles : TCP/IP – HTTP -
   Arch...
Web 2.0 – « L'expérience-utilisateur »




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal ...
Ajax – Une véritable percée!




                    AJAX
                                                                ...
Ajax - Avantages
   Réponses rapides aux actions de l'utilisateur
   Applications Web riches, rapides et légères
   Pas...
Client léger HTML vs client riche Ajax




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal ...
Client léger HTML vs client riche Ajax


                         Client HTML
                          (fureteur)
       ...
Ajax - Inconvénients


                    JS
                         Ajax




GTI-780 / MTI-780               ETS - Mont...
Ajax - Inconvénients
   Phénomène de mode
   Problèmes de compatibilité entre les différents fureteurs
   Ne fonctionne...
JavaScript - Inconvénients

                                     Euh!..., il ne connaissait pas
                          ...
JavaScript - Inconvénients
 Problème de portabilité, incompatibilités des fureteurs, fuites de mémoire
 & longs chargement...
JavaScript - null vs undefined vs false vs "" vs 0

undefined
                                         0
                 ...
JavaScript - null vs undefined vs false vs "" vs 0
  null représente l'absence d'une référence à un objet
(no object), c'e...
JavaScript – Pas conçu pour de gros logiciels




                    Made in
                            Ja       vaScrip...
JavaScript – Pas conçu pour de gros logiciels
 Excellent pour l'écriture rapide de petites applications, la souplesse de
J...
Découplage




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Découplage
Dissocier le contenu de la présentation (forme)
=> XHTML & CSS

 Découpler le contenu et le comportement
JavaSc...
Choix d'une technologie client




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
JavaScript & DHTML vs Machines virtuelles
  Outils purs JavaScript
    Scriptaculous, Prototype, DWR, jQuery,
    YUI, GWT...
Technologies Sources Libres vs Propriétaire$
  Sources Libres
    Scriptaculous, Prototype, DWR, jQuery,
    YUI, GWT, etc...
Choix d'une technologie serveur




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Survol des technologies serveurs
  Architecture client-serveur
  SOA (Service Oriented Architecture)
  Services Web : REST...
Choix d'une méthodologie de développement




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montré...
Choix d'une méthodologie de développement

  Cycles très court - sorties rapides et fréquentes
  Applications toujours en ...
Si seulement on pouvait utiliser Java!




                    * Source Clipart : http://www.clipart.com
GTI-780 / MTI-780...
Si seulement on pouvait utiliser Java!
 Conçu pour le génie logiciel
     Véritable langage de POO
     typage statique, c...
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - ...
Prochain SlideShare
Chargement dans…5
×

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

1 534 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 534
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
64
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×