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

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!


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 »


Ajax – Une véritable percée!

AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005


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


Client léger HTML vs client riche Ajax


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


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


JavaScript - Inconvénients

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


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


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

undefined
0
?
null false ""


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.


JavaScript – Pas conçu pour de gros logiciels

Made in
Ja vaScript


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


Découplage


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


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

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

Choix d'une technologie serveur


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


Choix d'une méthodologie de développement


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)

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

Questions

?


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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

Similar to Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09 (20)

More from Claude Coulombe

More from Claude Coulombe (17)

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