Impact du WEB 2.0 sur les technologies et les architectures
Vincent CaillyCertified IT [email protected]
Agenda
QuQu‘‘estest --ce que le WEB2.0 ?ce que le WEB2.0 ?
AJAX AJAX
ReSTReST
22
33
44
11
Feed (RSS et ATOM)Feed (RSS et ATOM)
55 MashupMashup
66 Q & AQ & A
Definition Historique du Web 2.0
• Un terme employé pour la première fois par Tim O‘Reilly i n 2004(voir http//www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html )
“Web 2.0 refers to a "second generation" of web sites, primarily distinguished by the ability of visitors to contribute information for collaboration and
sharing...”
• On peut résumer les choses de la manière suivante– Le Web comme source d’information � Web 1.0
– Le Web comme plateforme de participation � Web 2.0
QuQu’’estest--ce que le Web 2.0?ce que le Web 2.0?
•• Les utilisateurs participent Les utilisateurs participent et contribuent sur de et contribuent sur de nombreux aspectsnombreux aspects
•• Les Applications Les Applications interagissent avec les interagissent avec les utilisateursutilisateurs
•• DDéélivrlivréé sous forme de sous forme de Services (Service providers Services (Service providers or IT)or IT)
•• Les utilisateurs peuvent Les utilisateurs peuvent trouver de nouveaux trouver de nouveaux moyens dmoyens d’’exploiter la exploiter la plateforme. plateforme.
•• LL’’Entreprise doit faire Entreprise doit faire confiance confiance àà ses ses utilisateursutilisateurs
Middleware Middleware not an not an ApplicationApplication •• Blogs, Wikis Blogs, Wikis ……
•• Social networkingSocial networking
•• CommunautCommunautééss
•• TaggingTagging
•• RecommandationsRecommandations
•• CommentairesCommentaires
•• Self managementSelf management
Discovery of Discovery of Content & Content & ExpertiseExpertise
•• Interface utilisateur simpleInterface utilisateur simple
•• ModModèèle facile le facile àà comprendre et comprendre et ààutiliserutiliser
•• SimplicitSimplicitéé des Interfaces applicatifs des Interfaces applicatifs
•• IntIntéégration & Mashgration & Mash--UpUp
•• Extensible Extensible àà souhaitsouhait
Simple Simple àà utiliser, utiliser, Simple Simple àà rréé--arrangerarranger
A PLATFORMA PLATFORM
USERUSERGENERATEDGENERATED
CONTENTCONTENT
SIMPLESIMPLE
Web 2.0Web 2.0
• Riche expérience utilisateur• Participation des utilisateurs• Contenu dynamique• Meta données, tagging• Standards Web• Capacité à croître facilement et rapidement• Ouverture• Liberté• Intelligence collective
Quand peut-on parler de Web 2.0 …
Quelques observations
• Le Web 2.0 se caractérise par à la fois des aspects sociaux et des aspects techniques
– Les aspects “sociaux” du Web 2.0 sont beaucoup plus fondamentaux que les aspects techniques
• Les grands acteurs Web 2.0 de l’internet ont su cr éer une valeur immense grâce à la participation des utilisat eurs.
– Plus la participation est massive, plus on crée de valeur– Exemples : Google, Amazon, youTube, WikiPedia …
• Il n’est pas rare sur l’internet qu’un site Web 2.0 ne fournisse uniquement qu’une infrastructure et des lignes guid es permettant la participation des utilisateurs
– La valeur du site est ensuite totalement crée par la communauté des utilisateurs en publiant des articles, postant des vidéos, commentant le contenu, Etc ...
Les technologies et les architectures Web 2.0 dans l’entreprise ?
Source:
- Charts from Giga World IT
- Theme Presentation: Collaboration, Content and Com munity
Ou est le capital connaissance de l’Entreprise ???
Dans la tête des utilisateurs
Dans la donnée non structurée
Dans la donnée structurée
4%
20%
100%
80% du budget IT est depensé pour gérer
4% de l’information & connaissance de l’entreprise
Les technologies et les architectures Web 2.0
permettent de capturer et de valoriser ce capital
Agenda
QuQu‘‘estest --ce que le WEB2.0 ?ce que le WEB2.0 ?
AJAXAJAX
ReSTReST
22
33
44
11
Feed (RSS et ATOM)Feed (RSS et ATOM)
55 MashupMashup
66 Q & AQ & A
D’où vient l’effervescence autour d’Ajax ?
• Google a déclenché l’effervescence autour d’AJAX avec le lancement de son site «Google maps»
• Avant l’existence de «Google maps»on ne connaissait pas d’applicationWEB présentant une expérience visuelle aussi impressionnante (et de plus sans technologie de type Macromedia/flash)
Google avant l’avennement d’ AJAX …L’application AJAX de Google qui a changé la donne …
Qu’est-ce qu’ AJAX (Asynchonous Javascript and XML)
• AJAX n’est pas une technologie ni une architecture mais plus un nouveau modèle de développement utilisant des technologies existantes .
– L’objet XMLhttpRequest ( … ou ses ancêtres iFrame et XMLDoc)– Les feuilles de style CSS (cascading style sheet)– L’arborescence DOM (Document Object Model) et son gestionnaire d’événements– Le javascript pour faire le lien entre les 3 autres briques et construire la logique UI
• AJAX est au cœur du succés du WEB 2.0 . Il permet d’obtenir une expérience utilisateur jamais atteinte au préalable pour des applications WEB
– Les requêtes asynchrones XMLhttpRequest permettent d’obtenir une grande fluidité des applications Web avec des interfaces utilisateur très interactives.
– AJAX permet de construire des interfaces utilisateur riches, simples à utiliser– Des fonctions AJAX peuvent être ajoutées sur des sites existants (pour les rendre plus attractifs)
• La programmation AJAX n’est pas quelque chose de to talement trivial. – Les toolkits AJAX (Dojo, Prototype, Backbase, library X…) facilitent les développements AJAX.– IBM est un contributeur majeur au projet open source Dojo . Le toolkit Dojo est de plus en plus
utilisé dans les logiciels du portfolio IBM (WebSphere portal, Lotus Quickr, Lotus Connections, Lotus Domino …)
DH
TML
Fonctionnement des applications Web avant l’ére AJA X
ModèleDe données
partagé
Connexion
PageWeb
PageWeb
PageWeb
PageDe Sortie
SessionUtilisateur
Déconnexion
Modèle de données
de l’utilisateur
LogiqueMétier
PageWeb
Wait ...
Wait ...
Wait ...
Navigateur Serveur
• Les erreurs d’appréciation les plus fréquentes des concepteurs d’applications Web ou d’applications distribuées
– Le réseau est fiable– La latence est nulle– La bande passante est infinie
• Dans un certain nombre de cas, il n’était pas faux de traduire WWW par:
Wait, Wait, Wait
Fonctionnement avant l’adoption d’AJAX
Scripts/
Servlets/
Pages
Côté Navigateur Côté Serveur
HTML
HEAD
LINKTITLE
BODY
DIV DIV
DIV
TABLE
SPAN SPAN
Page HTMLmodele DOM
1 Le navigateur effectue une première requête sur une URL donnée
2 Le serveur renvoie la page HTML
3 Le navigateur effectue une seconde requête sur la même URL et l’utilisateur attend la réponse du serveur
4 Le navigateur renvoie toute la page HTML et ce même si il n’y a que très peu de différence avec la première page
1
2
3
4
HTML
HEAD
LINKTITLE
BODY
DIV DIV
DIV
TABLELINK
TEXT
SPAN SPAN
Page HTMLmodele DOM
Fonctionnement des applications Web avec AJAX
Modèle
De données
partagé
Connexion
Session
Utilisateur
Modèle
de données
de l’utilisateur
Logique
Métier
Navigateur Serveur
Application
Cliente
Modèle
de données
de l’utilisateur
Page
De Sortie
Requêtes asynchrones
fréquentes pour obtenir
de la donnée
Fournit
Une application cliente
• Lors de la connexion initiale, le serveur renvoie une véritable application client au navigateur
– Fichiers CSS– Fichier javascript
• L’application Cliente gère les interactions de l’utilisateur
– En obtenant des données par le biais de requêtes asynchrones exécutées en arrière plan
– Sans interrompre le flux de travail de l’utilisateur
Depuis l’adoption d’AJAX : les requêtes asynchrones
Scripts/
Servlets/
Pages
Côté Navigateur Côté Serveur
1 Le navigateur effectue une première requête sur une URL donnée
2 Le serveur renvoie la page HTML et l’application légère client
3 Une action utilisateur provoque (gestionnaire d’événements) une requête asynchrone vers le serveur sans modification de la page et alors que l’utilisateur peut continuer à travailler comme si de rien était.
1
2
LINK
TEXT
HTML
HEAD
LINKTITLE
BODY
DIV DIV
DIV
TABLE
SPAN SPAN
Page HTMLmodele DOM
HTML
HEAD
LINKTITLE
BODY
DIV DIV
DIV
TABLE
SPAN SPAN
Page HTMLmodele DOM+ CSS files+JS Files
5 Le navigateur interprète la donnée reçue et met à jour la page et le modèle DOM en mémoire
Le serveur retourne les données demandées à une fonction Javascript de rappel au sein de la même page4
XML Data<response>
Data</response>
5
3
Asynchronous request
4
Response to async. request
Les requêtes asynchrones AJAX : Le principe de «Google Maps»
La carte initialement visible
à l’écran
Les imagesinitialementchargées.
Les images chargéesde manière asynchrone
lorsque je me déplacevers la droite dans la
carte
AJAX : Interface et Expérience utilisateur
• L’interface utilisateur de Domino Web Access V8.5 (Beta) :
– Riche expérience utilisateur– On est très proche de
l’interface du client Notes
AJAX : Impact sur l’infrastucture
Connexion DéconnexionTemps
Application AJAX
Application classique
• Le tranfert, au fil de l’eau, des données juste nécessaires optimise les besoins en bande passante réseau
• Le déport côté client d’un certain nombre de fonctions réduit fortement les besoins en ressources serveur. Exemple (Impact AJAX sur WebsSphere Portal):
� -30% CPU entre les versions 5.1 et 6.0 de WebSphere portal
� Des gains encore bien plus significatifs sont attendus avec le version 6.1 (Ex: Refresh d’un portlet sans avoir à re-effectuer un « rendering complet de la page »)
Agenda
QuQu‘‘estest --ce que le WEB2.0 ?ce que le WEB2.0 ?
AJAX AJAX
ReSTReST
22
33
44
11
Feed (RSS et ATOM)Feed (RSS et ATOM)
55 MashupMashup
66 Q & AQ & A
Qu’est-ce que ReST (Representational state transfer)
• ReST n'est ni un protocole ni un format , c’est un style d’architecture (décrit dans une thèse de Roy Fielding en 2000) bâti sur quelqu es principes simples :– Toute information est une ressource– Une ressource est identifiée par un nom unique utilisable pour des liens de type « Hypermedia »– Le protocole permettant l’accés aux ressources ne supporte que quelques verbes et est sans états
(Chaque opération est autosuffisante) – Une ressource est manipulée au travers d’une représentation (format de données)
• ReST permet de mettre en œuvre des services Web et peut donc être utilisé pour la réalisation d‘architectures orientées services.– ReST est considéré plus simple à utiliser que les standards WS-* et SOAP– Les « feeds » RSS et ATOM sont très utilisés pour mettre en œuvre des services de type ReST– Les « Mashups » sont généralement basés sur des services de type ReST.
• L’exemple le plus souvent cité est celui de l’infras tructure du site d’Amazon : – 95% des Web services utilisent ReST.– 5% des Web services utilisent SOAP.
ReST est le style architectural originel du WEB (L e WEB est dit RestFull)
ReST : Correspondance méthodes HTTP et opérations CRUD
Delete memberhttp://mysite.dom/people/1DELETE
Update memberhttp://mysite.dom/people/1PUT
Create memberhttp://mysite.dom/people/1POST
Retrieve memberhttp://mysite.dom/people/1GET
List membershttp://mysite.dom/peopleGET
DescriptionURIHTTP Method
DeleteDELETE
UpdatePUT
ReadGET
CreatePOST
CRUD OperationHTTP Method
Correspondance méthodes HTTP et opérations CRUD
Exemple d’utilisation
Exemple de service Web
<?xml version="1.0" encoding="utf-8" ?><rsp stat="ok"><method>flickr.test.echo</method><format>rest</format><foo>bar</foo><api_key>cc5eb7cce4f7e5bb39c259a63e6e9215</api_key>
</rsp>
http://www.flickr.com/services/rest/?method=flickr.echo&name=value
ReST
<?xml version="1.0" encoding="utf-8" ?><s:Envelopexmlns:s="http://www.w3.org/2001/06/soap-envelope"xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"xmlns:xsd="http://www.w3.org/1999/XMLSchema"><s:Body><x:FlickrResponse xmlns:x="urn:flickr"><method>flickr.test.echo</method><format>soap</format><foo>bar</foo><api_key>78ce850f064baa9e7fc7128794989563</api_key>
</x:FlickrResponse></s:Body>
</s:Envelope>
<?xml version='1.0' encoding='UTF-8'?><s:Envelopexmlns:s="http://www.w3.org/2001/06/soap-envelope"xmlns:xsi="http://www.w3.org/1999/XMLSchema-
instance"xmlns:xsd="http://www.w3.org/1999/XMLSchema"><s:Body><x:FlickrRequest xmlns:x="urn:flickr"><method>flickr.echo</method><name>value</name>
</x:FlickrRequest></s:Body>
</s:Envelope>
SOAP
Service ResponseService request
Agenda
QuQu‘‘estest --ce que le WEB2.0 ?ce que le WEB2.0 ?
AJAX AJAX
ReSTReST
22
33
44
11
Feed (RSS et ATOM)Feed (RSS et ATOM)
55 MashupMashup
66 Q & AQ & A
Qu’est-ce qu’un Web Feed• Un web feed est un format de données (basé sur XML) utilisé pour distribuer les
contenus fréquemment mis à jour. – Les utilisateurs et les applications peuvent accéder/souscrire au contenu au travers d’un “feed reader”.– Les agrégateurs permettent d’agréger les informations en provenance de plusieurs sources (plusieurs
feeds)
• Les 2 formats les plus connus sont RSS et ATOM– RSS est le format historique des Web feeds pour le « broadcast » et la « syndication » de
l’information.– ATOM a été créé plus récemment et a été standardisé par l’IETF pour pallier aux limitations de RSS. – L’ apport majeur d’ ATOM est sa capacité de publier (opération d’écriture) de l’information sur un site
WEB
• Les feeds peuvent être utilisés par un large spectr e de devices– N’importe quel device capable de lire du XML et d’émettre des requêtes HTTP est potentiellement un
feed reader.
• RSS or ATOM sont de plus en plus utilisés comme un moyen standard d’exposer les données de l’entreprise– Des Web Feeds peuvent être créés à partir de n’importe quelle source de données (Le Web,
Application d’Enterprise application, Application Départementale, applications personnelles comme Excel …)
– Avec les Web feeds, le développeur n’a pas à se soucier de comment est stockée la donnée (database, File System, …).
Exemples d’utilisation des Feeds
Google News gadget
Connecteurs Lotus Quickr
Plug-in Lotus connection
Feeds reader duclient Notes 8.x
RSS portlet
Autre exemple sur les Feeds :Infosphere Mashup
Utilisation des “feeds” pour exposer les données de différentes sources :
Agrégation et transformation des données de cesdifférents sources:
– La donnée résultante peut être réexposée sous la forme d’un nouveau feed
– La donnée résultante peut être consommée par d’autres applications
Agenda
QuQu‘‘estest --ce que le WEB2.0 ?ce que le WEB2.0 ?
AJAX AJAX
ReSTReST
22
33
44
11
Feed (RSS et ATOM)Feed (RSS et ATOM)
55 MashupMashup
66 Q & AQ & A
Les challenges que nous pouvons constaterN
ombr
ed’
utili
sate
urs
par
app.
Nombre d’applications
Applications simples, tactiques.
Stratégiques, long terme apps. (créées par IT.)
�Manque d'agilité – IT ne répond pas assez rapidement aux exigences du Business�“Spreadsheet apps” difficiles à contrôler, partager, maintenir�Information en silos, Information périmée
Business Challenges
�IT submergé par trop de demandes dubusiness.�Effacement de l’organisation IT
� Violations des règles de sécurité� Perte d’information
IT Challenges
• Un widget est une petite application ou un petit contenu dynamique pouvant être aisément inséré dans une page WEB
• Gadgets, Blocks, Flakes sont d’autres termes utilisés pour désigner des Widgets
• Les Widgets peuvent être écrits dans n’importe quel language. Certains Widgets sont tout simplement du code HTML.
• Les “Mashable” widgets disposent d’un système d’événement. Il est alors possible de les relier entre eux et de les faire interagir pour créer de nouvelles applications.
Qu’est-ce qu’un Widget?
Qu’est-ce qu’un Mashup?
Un « mashup » est une application Web légère construite en combinant l'information ou les possibilités de plusieurs sources / Applications existantes
� Mise en oeuvre trèsrapide (on parle en jourspas en mois)
� Réutilisation de composants existants, pour délivrer de nouvelles fonctionnalités
� Pas besoin de compétences techniques pour créer un “Mashup”
� Il est fréquent de voir des Mashups utilisant des sources de donnéesinternes et externes
Les Mahups utilisent : Widgets , Web Feeds, Services ReST, …
Qu’est-ce qu’une Enterprise Mashup Platform?
Une “Enterprise Mashup Platform” permet :
► Aux utilisateurs métier de créer, déployer, modifier et partagerleurs propres Mashups, par assemblage (pas de programmation)de l’information et des possibilités de plusieurs sources
► Aux développeurs IT d’adapter les assets existants pour les rendre“Mashable”.
Exemple : IBM Lotus Mashups
31
Les Mashups d’entreprise ré-utilisent et valorisent les assets existants pour satisfaire les besoins tactiques et situationnels
Nom
bre
d’ut
ilisa
teur
spa
r ap
plic
atio
n
Nombre d’applications
Tactiques, Situationnelles
Enterprise Mashups
Portal
SOA
Legacy applications – e.g. IMS
Information sources – e.g. Relational databases
Stratégiques, long- erme apps. (créées par IT.)
32
Et SOA?N
ombr
ed’
utili
sate
urs
par
appl
icat
ion
Nombre d’applications
Enterprise MashupsReST services, RSS/ATOM…
Business Process ManagementBPEL, WS-*, SOAP …
SOA :�Agilité / Réactivité�Alignement de IT et des entités métier�Réutilisation d’assets existants�Agencement / Orchestration de services
Questions Questions & &
AnswersAnswers
Top Related