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