Impact du WEB 2.0 sur les technologies et les architectures

Vincent CaillyCertified IT ArchitectVincent.cailly@fr.ibm.com

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