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

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


Web 2.0 Web 2.0 –– Patrons d'applicationsPatrons d'applications

* Source Clipart : http://www.clipart.com


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)


Web 2.0 Web 2.0 –– Nouveaux designs, vieilles technos! Nouveaux designs, vieilles technos!



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


Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »



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



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


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)


Ajax - InconvénientsAjax - Inconvénients

JS

Ajax


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


JavaScript - InconvénientsJavaScript - Inconvénients

Euh!..., il ne connaissait pas assez le JavaScript...



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


JavaScript - JavaScript - null vs undefined vs false vs "" vs 0null vs undefined vs false vs "" vs 0

nullnull falsefalse

undefinedundefined

""

??00


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


JavaScript – JavaScript – Pas conçu pour de gros logicielsPas conçu pour de gros logiciels

Made in JavaScript



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


DécouplageDécouplage



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


Choix d'une technologie clientChoix d'une technologie client



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


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$


Choix d'une technologie serveurChoix d'une technologie serveur



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


Choix d'une méthodologie de développementChoix d'une méthodologie de développement



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)


Si seulement on pouvait utiliser Java!Si seulement on pouvait utiliser Java!

* Source image : http://www.sun.com* Source Clipart : http://www.clipart.com


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


QuestionsQuestions

??


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

Technology

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