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

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 (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

Web 2.0 – Nouveaux designs, vieilles technos!
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

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

Web 2.0 – « L'expérience-utilisateur »
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

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

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

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

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

Ajax - Inconvénients
JS
Ajax
GTI-780 / MTI-780 ETS - Montréal - 2009

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

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

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

JavaScript - null vs undefined vs false vs "" vs 0
undefined
0
?
null false ""
GTI-780 / MTI-780 ETS - Montréal - 2009

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

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

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

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
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

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, etc.
Machines virtuelles / plugiciels
Sun JVM – Java Applet – JavaFX
Adobe Flash – Flex – AIR
Microsoft .Net – Silverlight
GTI-780 / MTI-780 ETS - Montréal - 2009

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

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, 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

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

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

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

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

Questions
?
GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009