Mcetech 2009 - Open Social

Social Web, Web Architecture Social Web, Web Architecture and the OpenSocial Standardand the OpenSocial Standard

Ottawa, May 4Ottawa, May 4thth 2009 2009MCETECH 2009MCETECH 2009

by

Claude Coulombe

Université de Montréal

Ottawa, May 4th 2009Ottawa, May 4th 2009MCETECH 2009MCETECH 2009

Web 1.0 – Click and Wait...Web 1.0 – Click and Wait...

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


Ajax – A breakthrough! Ajax – A breakthrough!

AJAXAJAX

The first use of the term in public was by Jesse James Garrett in February 2005



Ajax – A breakthrough! Ajax – A breakthrough! Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML) Eliminates painful page loading!Eliminates painful page loading! Makes asynchronous requests for data to the Makes asynchronous requests for data to the

server and updates the web page without server and updates the web page without doing a full page reloaddoing a full page reload

More responsive and dynamic WebappsMore responsive and dynamic Webapps XMLHttpRequest objectXMLHttpRequest object Based on Client-side JavaScriptBased on Client-side JavaScript


Ajax – CAjax – Collaboration Diagramollaboration Diagram

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php


Ajax – Sequence DiagramAjax – Sequence Diagram

Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php

In asynchronous mode, the execution in the client browser continues without awaiting the response from the server. The answer from the server will be handled by a Callback function when it arrives. The status of the request is given by the attribute readyState of the XMLHttpRequest object.

In synchronous mode, the browser is frozen pending the server response.


Client-server communication & AjaxClient-server communication & Ajax

* Source : http://www.google.com* Source : http://www.google.com


Web 2.0Web 2.0

* Source: Markus Angermeier http://kosmar.de/wp-content/web20map.png


Web 2.0Web 2.0

Perceived trend leading to the definition of Perceived trend leading to the definition of a 2a 2ndnd generation of Web sites and Web generation of Web sites and Web services services First O'Reilly Web 2.0 conference in 2004First O'Reilly Web 2.0 conference in 2004User eXperienceUser eXperienceActive involvement and production of Active involvement and production of content by userscontent by usersNew designs, old technos!New designs, old technos!Google Maps, the “Killer App”Google Maps, the “Killer App”


Social WebSocial Web



At its basis, Internet is a network, a network of content At its basis, Internet is a network, a network of content

servers and more recently a network of applications but servers and more recently a network of applications but

also a network of users.also a network of users.

The Social Web describes how people socialize and interact The Social Web describes how people socialize and interact

on the Web sharing a variety of interests. It is therefore on the Web sharing a variety of interests. It is therefore

quite natural in the context of Web 2.0, where the quite natural in the context of Web 2.0, where the

emphasis is on users, that entrepreneurs have created emphasis is on users, that entrepreneurs have created

Web 2.0 applications that focus on social interactions and Web 2.0 applications that focus on social interactions and

communities.communities.



Social Network SitesSocial Network Sites



Social Network applications (or Social Network sites), Social Network applications (or Social Network sites),

like MySpace or Facebook, allow their users to enter like MySpace or Facebook, allow their users to enter

personal information (profile) and interact with other personal information (profile) and interact with other

users. users.

These informations allows users to retrieve users and These informations allows users to retrieve users and

"pseudo friends" sharing the same interests. Users "pseudo friends" sharing the same interests. Users

can form groups and invite other people. The can form groups and invite other people. The

interactions between members include discussions interactions between members include discussions

and sharing of photos, podcasts, videos, links and and sharing of photos, podcasts, videos, links and

documents. documents.

Social Network SitesSocial Network Sites


The first social network site was The first social network site was www.classmates.comwww.classmates.com

which is still in business since 1995.which is still in business since 1995.

Social Network Sites Social Network Sites


Friendster Friendster www.friendster.comwww.friendster.com

But the "boom" occurred around 2002 with, among But the "boom" occurred around 2002 with, among

others, the website Friendsterothers, the website Friendster

whose success vanished after refusing an offer of $ 30 whose success vanished after refusing an offer of $ 30

million USD by Google, the same year than its foundationmillion USD by Google, the same year than its foundation http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=sloginhttp://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin


MySpace MySpace www.myspace.comwww.myspace.com

Itself overtaken by MySpace in 2004 which has 122 Itself overtaken by MySpace in 2004 which has 122

million users and revenues of $ 900Mmillion users and revenues of $ 900M


FaceBook FaceBook www.facebook.comwww.facebook.com

Eventually overtaken by FaceBook in 2007, which Eventually overtaken by FaceBook in 2007, which

would have now 200 million users and annual revenues would have now 200 million users and annual revenues

of $ 350 millionof $ 350 million


Specialized Social NetworksSpecialized Social Networks

Some specialized social networks, like LinkedIn rely on Some specialized social networks, like LinkedIn rely on

contacts or business relationships contacts or business relationships www.linkedin.comwww.linkedin.com

* Source : http://rdfweb.org/foafcorp/intro.html


Sarnoff's Law : The value of network services like phone service Sarnoff's Law : The value of network services like phone service

(e.g. weather, 911, personal phone calls) grow proportionally to (e.g. weather, 911, personal phone calls) grow proportionally to

network size, i.e V = k.Nnetwork size, i.e V = k.N

Metcalfe's Law : The value of a network service where any Metcalfe's Law : The value of a network service where any

customer has advantages to transact with any other customer customer has advantages to transact with any other customer

grows by the square of the size of the network, i.e V = k.Ngrows by the square of the size of the network, i.e V = k.N22

Reed's Law : Networks that support the construction of Reed's Law : Networks that support the construction of

communicating groups (Group-Forming Networks) create value communicating groups (Group-Forming Networks) create value

that scales exponentially with network size, i.e. V = k.2that scales exponentially with network size, i.e. V = k.2NN

Social Network - Laws Social Network - Laws

* Source : http://www.reed.com/gfn/docs/reedslaw.html


Social Sites – NingSocial Sites – Ning Demo Demo

DemoDemo


Social Web – Application patternsSocial Web – Application patterns



Social Network Pattern : Social Network Pattern :

Application that allows users to enter profiles and Application that allows users to enter profiles and

contents, form groups and interact with other contents, form groups and interact with other

users sharing their interestsusers sharing their interests

Container Application PatternContainer Application Pattern : :

Application with a plugin architecture which contains a Application with a plugin architecture which contains a

set of small applications or utilitiesset of small applications or utilities

Social Web – Application patternsSocial Web – Application patterns


Social WebSocial Web – Application Components – Application Components


Ottawa, May 4th 2009Ottawa, May 4th 2009MCETECH 2009MCETECH 2009 * Note: or a simple Guestbook

A personal space based on a profile (address, age, sex, nationality, A personal space based on a profile (address, age, sex, nationality, education level, photo) and points of interest education level, photo) and points of interest

The user can organize and personalize their personal space The user can organize and personalize their personal space

Tool to create links with friends and manage lists of friends and common Tool to create links with friends and manage lists of friends and common friends (FOAF: friends of a friend) friends (FOAF: friends of a friend)

Tools to create, invite and manage groups Tools to create, invite and manage groups

Tool to create, suggest and manage activities Tool to create, suggest and manage activities

RSS content syndicationRSS content syndication http://en.wikipedia.org/wiki/RSShttp://en.wikipedia.org/wiki/RSS

Blog: personal diary, which contains mostly personal opinions on various Blog: personal diary, which contains mostly personal opinions on various topics or a specific issue. Offers to visitors the opportunity to comment topics or a specific issue. Offers to visitors the opportunity to comment http://en.wikipedia.org/wiki/Bloghttp://en.wikipedia.org/wiki/Blog **

Tools for sharing photos, podcasts, videos, bookmarks and documents Tools for sharing photos, podcasts, videos, bookmarks and documents

Web chat tools : synchronous (eg instant messaging) or asynchronous Web chat tools : synchronous (eg instant messaging) or asynchronous (eg email or forum)(eg email or forum) http://en.wikipedia.org/wiki/Internet_forumhttp://en.wikipedia.org/wiki/Internet_forum

Social WebSocial Web – Application Components – Application Components

http://en.wikipedia.org/wiki/RSS

http://en.wikipedia.org/wiki/Blog

http://en.wikipedia.org/wiki/Internet_forum


In addition to a set of basic applications provided by the In addition to a set of basic applications provided by the operator of the site, many sites are open to third-party operator of the site, many sites are open to third-party applications applications

This openness contributes to the success of sites This openness contributes to the success of sites Some third-party applications are subject to a sharing of Some third-party applications are subject to a sharing of

advertising revenues advertising revenues 8000 third-party applications for Facebook in 2007 8000 third-party applications for Facebook in 2007 Tools and application frameworks are available to Tools and application frameworks are available to

developers in order to facilitate their work developers in order to facilitate their work However, standards are usually proprietary, e.g. the However, standards are usually proprietary, e.g. the

famous FBML, a variant of HTML exclusive to FaceBookfamous FBML, a variant of HTML exclusive to FaceBook In 2007, Facebook came out with an API and a platform for In 2007, Facebook came out with an API and a platform for

delivering small applications called widgets. But facebook delivering small applications called widgets. But facebook widgets work only with facebook.widgets work only with facebook.

Social WebSocial Web – Third Party Applications – Third Party Applications


Social Network Sites Social Network Sites - Pros and Cons- Pros and Cons



Social Network Sites - ProsSocial Network Sites - Pros Democratization of the means of production and diffusion of information, music Democratization of the means of production and diffusion of information, music

and audiovisual content and audiovisual content

Allows to create a custom site and in his image Allows to create a custom site and in his image

Allows to share of interests and passions Allows to share of interests and passions

Allows to retreive friends, pals or relativesAllows to retreive friends, pals or relatives

International diffusionInternational diffusion

Cheap and accessible entertainment Cheap and accessible entertainment

At the technical levelAt the technical level

Quick responses to user actions Quick responses to user actions

Rich web applications, fast and light Rich web applications, fast and light

No more slow download or installation No more slow download or installation

Compatible with all Web browsers Compatible with all Web browsers

The browser becomes the platformThe browser becomes the platform


Social Network Sites Social Network Sites - Cons- Cons Trendy, effect fashionTrendy, effect fashion

Threats and attacks on privacy Threats and attacks on privacy

Misuse of personal data of users by the owners of sites Misuse of personal data of users by the owners of sites

Intrusive advertising. For example in 2007, launch of Beacon by Facebook that Intrusive advertising. For example in 2007, launch of Beacon by Facebook that was an advertising software which communicated (without consent) the was an advertising software which communicated (without consent) the information on purchases to their "friends" ... information on purchases to their "friends" ...

Time-consuming activity Time-consuming activity

Fake friendships and fleeting ... Can we have 400 real friends? Fake friendships and fleeting ... Can we have 400 real friends?

Users become hostages of the sites that house their personal data (Data lock-in) * Users become hostages of the sites that house their personal data (Data lock-in) *

Problem of copyright infringement Problem of copyright infringement

Violent, racist, pornographic, false, deceptive contentsViolent, racist, pornographic, false, deceptive contents

The security aspect is to be monitored The security aspect is to be monitored

At the technical levelAt the technical level

too many standards and proprietary APIstoo many standards and proprietary APIs

Compatibility and interoperability issues between different networks Compatibility and interoperability issues between different networks

* After the « hardware lock-in » and the « software lock-in » has warned us, Tim O'Reilly


GadgetsGadgets

GadgetsGadgets



Gadgets (or widgets) are mini web sites, Gadgets (or widgets) are mini web sites, generally small blocks of content, placed in a generally small blocks of content, placed in a web page or in a container of gadgets web page or in a container of gadgets

Popularized by the Porlet standard (Excite Popularized by the Porlet standard (Excite portal) but which required the complete portal) but which required the complete reloading of the page, replaced today by reloading of the page, replaced today by mashups (aggregator or gadgets container) mashups (aggregator or gadgets container) using asynchronous Ajax to refreshusing asynchronous Ajax to refresh

Gadgets - OriginGadgets - Origin


Gadgets are small applications consisting of: XML, HTML and Gadgets are small applications consisting of: XML, HTML and JavaScript plus resources such as images and CSS filesJavaScript plus resources such as images and CSS files

XML for the specification of the gadget XML for the specification of the gadget

HTML supports static contentHTML supports static content

JavaScript for interactivity & communication with Web servicesJavaScript for interactivity & communication with Web services

Gadgets - DefinitionGadgets - Definition

* Source image : http://code.google.com/apis/opensocial/

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<Module><Module>

<ModulePrefs author="Claude Coulombe" <ModulePrefs author="Claude Coulombe"

author_email="[email protected]" height="300" title="SimpleGadget"/>author_email="[email protected]" height="300" title="SimpleGadget"/>

<Content type="html"><Content type="html">

<![CDATA[<![CDATA[

<script><script>

function com_example_simplegadget_SimpleGadget(){ function com_example_simplegadget_SimpleGadget(){

… …

</script></script>

]]>]]>

</Content> </Content>

</Module></Module>


Typical gadgets application follows the « Container Typical gadgets application follows the « Container

Application Pattern »Application Pattern »

PPlugin architecture which contains a set of small lugin architecture which contains a set of small

applications or utilitiesapplications or utilities

Container provides a sandbox for convenient and Container provides a sandbox for convenient and

secure execution of gadgets secure execution of gadgets

Architecture popularized by social network sites Architecture popularized by social network sites

Light Web Services (REST style) and light components Light Web Services (REST style) and light components

(gadgets are based on XHTML, CSS and JavaScript)(gadgets are based on XHTML, CSS and JavaScript)

Gadgets-Based ArchitectureGadgets-Based Architecture


Generates HTML, JavaScript & CSS from the specificationGenerates HTML, JavaScript & CSS from the specification

Gadgets ServerGadgets Server

Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation


Displays the social network’s user interfaceDisplays the social network’s user interface

Opens an IFrame to insert the gadgetOpens an IFrame to insert the gadget

Gadgets ContainerGadgets Container

Source http://incubator.apache.org/shindig/index.html


1)1) Browser client requests a Gadget applicationBrowser client requests a Gadget application

2)2) Container requests the Gadget spec from its hostContainer requests the Gadget spec from its host

3)3) Container converts the Gadget spec to HTML via the Container converts the Gadget spec to HTML via the

gadgets server which is displayed to the clientgadgets server which is displayed to the client

Gadgets Container – Gadgets Container – How it works?How it works?



1)1) The gadget application requests remote contentThe gadget application requests remote content

2)2) Container requests content from the specific URLContainer requests content from the specific URL

3)3) Container returns response to the gadget which displays Container returns response to the gadget which displays

the datathe data

Gadgets Container – Gadgets Container – How it works?How it works?



RESTREST

RESTREST



RESTREST

REST (REpresentational State Transfer) REST (REpresentational State Transfer)

Based on resources (resources are URLs)Based on resources (resources are URLs)

StatelessStateless Each resource is accessible via one unique URIEach resource is accessible via one unique URI A set of MIME types of content in request and A set of MIME types of content in request and responseresponse A set of basic HTTP commandsA set of basic HTTP commands


RESTRESTEach resource meets a set of basic HTTP commands that correspond Each resource meets a set of basic HTTP commands that correspond to the so-called classical CRUD operationsto the so-called classical CRUD operations

HTTP CRUDPOST CreateGET ReadPUT Update

DELETE Delete


Introduction to REST (JavaLobby)Introduction to REST (JavaLobby)

http://java.dzone.com/articles/intro-resthttp://java.dzone.com/articles/intro-rest

http://java.dzone.com/articles/putting-java-resthttp://java.dzone.com/articles/putting-java-rest

BookBook

RESTful Web ServicesRESTful Web Services

Leonard Richardson; Sam RubyLeonard Richardson; Sam Ruby

O'Reilly Media, Inc.O'Reilly Media, Inc.

May, 2007May, 2007

REST – REST – To learn more...To learn more...

http://java.dzone.com/articles/intro-rest

http://java.dzone.com/articles/putting-java-rest


RPCRPC

RPCRPC



RPCRPC

RPC : Remote Procedure CallRPC : Remote Procedure Call

Inter-process communication protocol that allows a Inter-process communication protocol that allows a software to call the execution of a procedure on software to call the execution of a procedure on another computer without having to explicitly code all another computer without having to explicitly code all the detailsthe details

RPC allows easy exchange of serialized objects RPC allows easy exchange of serialized objects between client and serverbetween client and server

Only one endpoint (one URL) + parametersOnly one endpoint (one URL) + parameters

Parameters specify methods to call, not limited to Parameters specify methods to call, not limited to the 4 REST methodsthe 4 REST methods


Container of gadgets - NetvibesContainer of gadgets - Netvibes


Container of gadgets - iGoogleContainer of gadgets - iGoogle


Container of gadgets – Container of gadgets – Code DemoCode Demo

DemoDemo


Gadgets - Pros & ConsGadgets - Pros & Cons



Weak couplingWeak coupling

Promotes reusePromotes reuse

Easy to developEasy to develop

Light and little demanding in bandwidth and server Light and little demanding in bandwidth and server

capacitycapacity

Easy deployment on many different social network sitesEasy deployment on many different social network sites

Easy for the user to add, remove and customize gadgetsEasy for the user to add, remove and customize gadgets

Gadgets - ProsGadgets - Pros


Trendy, effect fashionTrendy, effect fashion

Proliferation of gadgets and services of doubtful utilityProliferation of gadgets and services of doubtful utility

Hard to testHard to test

Security problemSecurity problem

Interoperability problem?Interoperability problem?

Gadgets are limited in their complexity & functionnalityGadgets are limited in their complexity & functionnality

Gadgets - ConsGadgets - Cons


OpenSocial StandardOpenSocial Standard

* Source image : http://code.google.com/apis/opensocial/


With the proliferation of social networking sites has emerged the need for With the proliferation of social networking sites has emerged the need for

common standards and open source toolscommon standards and open source tools

Reed's Law can explain why the evolution of an open, interoperable, Reed's Law can explain why the evolution of an open, interoperable,

global social network seems inevitableglobal social network seems inevitable

Created in response to the proliferation of standards and proprietary APIs Created in response to the proliferation of standards and proprietary APIs

or specific APIs to a single site (November 2007)*or specific APIs to a single site (November 2007)*

OpenSocial is a free and open standard that defines a common API to a OpenSocial is a free and open standard that defines a common API to a

set of social applications on many different websitesset of social applications on many different websites

Combination of Google Gadgets, a container of gadgets and standard Combination of Google Gadgets, a container of gadgets and standard

communication APIcommunication API

Partners of the OpenSocial Foundation: Engage.com, Friendster, Google, Partners of the OpenSocial Foundation: Engage.com, Friendster, Google,

hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo,

Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo!Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo!

http://www.opensocial.org/http://www.opensocial.org/

OpenSocialOpenSocial

* Note : A lot in reaction to FaceBook

http://www.opensocial.org/



OpenSocialOpenSocial









Defines an XML format for applications, including user interface (HTML / Defines an XML format for applications, including user interface (HTML /

CSS / Javascript) and metadata (title, author, email, size of the gadget CSS / Javascript) and metadata (title, author, email, size of the gadget

preferences) preferences)

Defines APIs for Web services and data exchange, including REST and Defines APIs for Web services and data exchange, including REST and

RPC Web services and persistent data RPC Web services and persistent data

Authentication service (Oauth) Authentication service (Oauth) http://oauth.net/http://oauth.net/

OpenSocial ServicesOpenSocial Services

1) 1) People & RelationshipPeople & Relationship (friends) : access to programming information on friends (friends) : access to programming information on friends

2) 2) ActivitiesActivities : What your friends want to see what's what you do : What your friends want to see what's what you do

3) 3) PersistencePersistence (Application data, data gadgets) (Application data, data gadgets)

Provide a statement without the server, share data with your friendsProvide a statement without the server, share data with your friends



Client Javascript features Client Javascript features

Gadget container (gadget.js), OpenSocial gadgetGadget container (gadget.js), OpenSocial gadget

OpenSocial containerOpenSocial container

JSON, Restful container JSON, Restful container

OpenSocial StandardOpenSocial Standard – – Client GadgetClient Gadget

Source : http://incubator.apache.org/shindig/overview.html


OpenSocial - Javascript Library OpenSocial - Javascript Library

OpenSocial StandardOpenSocial Standard – – JS LibraryJS Library

Source : http://incubator.apache.org/shindig/overview.html


Request information about a friend ...Request information about a friend ...

function getFriendData() {function getFriendData() {

var req = opensocial.newDataRequest();var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(VIEWER),'viewer');req.add(req.newFetchPersonRequest(VIEWER),'viewer');

req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends');req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends');

req.send(onLoadFriends);req.send(onLoadFriends);

}}

Callback function to get data about a friend ...Callback function to get data about a friend ...

function onLoadFriends(resp) {function onLoadFriends(resp) {

var viewer = resp.get('viewer').getData();var viewer = resp.get('viewer').getData();

var viewerFriends = resp.get('viewerFriends').getData();var viewerFriends = resp.get('viewerFriends').getData();

var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’;var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’;

viewerFriends.each(function(person) {viewerFriends.each(function(person) {

html += '<li>' + person.getDisplayName()+'</li>';html += '<li>' + person.getDisplayName()+'</li>';

});});

html += '</ul>';html += '</ul>';

document.getElementById('friends').innerHTML = html;document.getElementById('friends').innerHTML = html;

}}

OpenSocial – JS code snippetOpenSocial – JS code snippet

* Source code : http://www.google.com


OpenSocial offers both REST and RPC protocolsOpenSocial offers both REST and RPC protocols

Communication methods:Communication methods:

RESTful (Representational State Transfer)RESTful (Representational State Transfer)

RPC (Remote Procedure Call)RPC (Remote Procedure Call)

Data Formats: XML, JSON, AtomPubData Formats: XML, JSON, AtomPub

OpenSocial – REST and RPCOpenSocial – REST and RPC

* Source : http://www.google.com* Source : http://www.google.com


Based on the AtomPub (Atom publishing protocol) standard and JSONBased on the AtomPub (Atom publishing protocol) standard and JSON

/people/{guid}/@all/people/{guid}/@all

-- Returns the set of all the people associated with the user -- Returns the set of all the people associated with the user {guid}{guid}

/people/{guid}/@friends/people/{guid}/@friends

-- Returns the set of all friends of user -- Returns the set of all friends of user {guid} {guid}

-- i.e. a subset of @all-- i.e. a subset of @all

/people/{guid}/@self/people/{guid}/@self

-- Return the information in the profile of user {guid}-- Return the information in the profile of user {guid}

/activities/{guid}/@self/activities/{guid}/@self

-- Returns the set of all the activities generated by the user -- Returns the set of all the activities generated by the user {guid}{guid}

/activities/{guid}/@friends/activities/{guid}/@friends

-- Returns the set of all the activities-- Returns the set of all the activities from from friends of user {guid} friends of user {guid}

OpenSocial – REST OpenSocial – REST ServicesServices

* Source code : http://www.google.com


Parameters specify methods to call, not limited to the 4 REST methodsParameters specify methods to call, not limited to the 4 REST methods

Batch support *Batch support *

Easy specification of group of users * through passed argumentsEasy specification of group of users * through passed arguments

OpenSocial – RPC OpenSocial – RPC ServicesServices

* Note : considered difficult with REST

POST /rpc HTTP/1.1Host:api.example.orgAuthorization:<Auth token> Content-Type: application/json { "method" : "people.get", "id" : "myself" "params" : { "userid" : "@me", "groupid" : "@self" } }


Shindig ServerShindig Server

ShindigShindig



Reference implementation of the OpenSocial standardReference implementation of the OpenSocial standard

Java and PHPJava and PHP

Apache open software project supported by a consortium of companies Apache open software project supported by a consortium of companies

led by Googleled by Google

Includes 4 main parts :Includes 4 main parts :

1) JS Gadgets Container (UI, security, communication, pref.) 1) JS Gadgets Container (UI, security, communication, pref.)

2) Gadgets Server (XML specifications to JS + HTML)2) Gadgets Server (XML specifications to JS + HTML)

3) JS OpenSocial Container (layer on top of the JS gadgets container): 3) JS OpenSocial Container (layer on top of the JS gadgets container):

profiles, friends, activitiesprofiles, friends, activities

4) OpenSocial Data Server : interface to other content servers 4) OpenSocial Data Server : interface to other content servers

including REST APIs including REST APIs

http://incubator.apache.org/shindig/http://incubator.apache.org/shindig/



3 main server components3 main server components

Gadget Server, XML HTML→Gadget Server, XML HTML→

OpenSocial JS Container ServerOpenSocial JS Container Server

Persistent Data ServerPersistent Data Server


* Source : http://incubator.apache.org/shindig/overview.html


Shindig Server – How it works?Shindig Server – How it works?

* Source : http://rollerweblogger.org/roller/entry/shindig_java_internals_diagram_updated

1. Request to Shindig via either /social/rest or /social/rpc (REST or JSON-RPC API)2. The servlet creates a RequestItem which parses the request (2 different RequestItem : one for REST and one for RPC)3. The servlet calls the appropriate handler4. One of Shindig's 3 request handlers process the request (PersonHandler, ActivityHandler, AppDataHandler)5. The Shindig handlers call the Shindig Service Provider (SPI) which is defined by a set of interfaces with methods that return ResponseItems (i.e. POJOs). SPI is where to set gateways to other backend modules6. The handler returns a ResponseItem, which wraps one or a collection of POJOs. The Servlet may then write that response out or, continue to call handlers and collect more ResponseItems in the batch case,7. Servlet converts/serializes and returns ResponseItem(s) in XML or JSON


Shindig Server – Code DemoShindig Server – Code Demo

Code DemoCode Demo

http://localhost:8080/gadgets/files/samplecontainer/samplecontainer.htmlhttp://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html

http://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xmlhttp://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml

http://localhost:8080/social/rest/people/john.doe/@allhttp://localhost:8080/social/rest/people/john.doe/@all

http://localhost:8080/social/rest/people/john.doehttp://localhost:8080/social/rest/people/john.doe

http://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html

http://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml

http://localhost:8080/social/rest/people/john.doe/@all

http://localhost:8080/social/rest/people/john.doe


OpenSocial - Pros & ConsOpenSocial - Pros & Cons



The usual advantages of a standard: interoperability, portability, The usual advantages of a standard: interoperability, portability,

creation of a critical mass, reduced learning, better documentation, creation of a critical mass, reduced learning, better documentation,

better tools, greater productivity, cost reduction, sustainability of better tools, greater productivity, cost reduction, sustainability of

technologytechnology

Allows third party applications to run on more social network sitesAllows third party applications to run on more social network sites

More applications accessible to more people!More applications accessible to more people!

Enables operators of social sites to focus on their business and Enables operators of social sites to focus on their business and

services and spend less effort on technological developments services and spend less effort on technological developments

According to Hal Varian: The adoption of standards leads to the According to Hal Varian: The adoption of standards leads to the

shift from a competition for a market to a competition in a marketshift from a competition for a market to a competition in a market

Endorsement by major players like GoogleEndorsement by major players like Google

OpenSocial specification process is community drivenOpenSocial specification process is community driven

OpenSocial - ProsOpenSocial - Pros


Constraints introduced by the standardConstraints introduced by the standard

Many older versions of Google GadgetsMany older versions of Google Gadgets

Different containers have different policiesDifferent containers have different policies

Directory approvals varyDirectory approvals vary

Scaling could be hard*Scaling could be hard*

Difficulty in the creation of large applications in HTML & JavaScriptDifficulty in the creation of large applications in HTML & JavaScript

Difficulties in sharing a standard with its competitors Difficulties in sharing a standard with its competitors

Dependency on GoogleDependency on Google

Not suitable for critical services with secure transactionsNot suitable for critical services with secure transactions

Security concerns (Caja is a potential solution)Security concerns (Caja is a potential solution)

OpenSocial - ConsOpenSocial - Cons

* Note : consider hosting your app to a cloud service


GWT – GWT – A Java Gadgets Factory!A Java Gadgets Factory!

GWTGWT


GWT – A Java Gadgets Factory!GWT – A Java Gadgets Factory!

The Google Web Toolkit (GWT) allows state of The Google Web Toolkit (GWT) allows state of the art software engineering and taking the art software engineering and taking advantage of Java tools like Eclipse to build fast advantage of Java tools like Eclipse to build fast “desktop-like” Ajax applications that run in a “desktop-like” Ajax applications that run in a browser. browser.

http://code.google.com/webtoolkit/


Why GWT?Why GWT? - - Problems with JavaScriptProblems with JavaScript

So, he didn't know JavaScript well enough...


Why GWT?Why GWT? - Problems with JavaScript- Problems with JavaScript

Real JavaScript experts are rare...Real JavaScript experts are rare... Working around browser incompatibilities, Working around browser incompatibilities,

memory leaks and long load timesmemory leaks and long load times JS is not a true OOP languageJS is not a true OOP language JS was not designed for big programsJS was not designed for big programs Lack of modularity and scalability makes Lack of modularity and scalability makes

testing, debugging and reusing JS and Ajax testing, debugging and reusing JS and Ajax components very difficult components very difficult

JavaScript and Ajax tool support is deficientJavaScript and Ajax tool support is deficient


Understanding GWTUnderstanding GWT

GWTGWT


What is GWT ?What is GWT ?

May 2006 Google released Google Web ToolkitMay 2006 Google released Google Web Toolkit– Bruce Johnson & Joel WebberBruce Johnson & Joel Webber

Open source “client-centric” Java framework Open source “client-centric” Java framework that makes writing Rich Webapps easy for that makes writing Rich Webapps easy for Java developers who don't speak JavaScript as Java developers who don't speak JavaScript as a second languagea second language

GWT cross compiles Java to JavaScriptGWT cross compiles Java to JavaScript GWT is not just good to build Ajax Webapps, GWT is not just good to build Ajax Webapps,

GWT is good to build “desktop-like” Webapps GWT is good to build “desktop-like” Webapps that run in a browserthat run in a browser


Java to JavaScript Cross CompilerJava to JavaScript Cross Compiler

Java

JavaScript

GWT version 1.5 supports :* Firefox 1.0, 1.5, 2.x, 3.x* Internet Explorer 6, 7, 8* Safari 2.0 3.0* Opera 9.0

Run Everywhere!

Write Once...


What is GWT? What is GWT? - Pure Java approach- Pure Java approach Over six millions Java developersOver six millions Java developers ““Write Once, Run Anywhere”Write Once, Run Anywhere” Windows, Linux, Mac OS XWindows, Linux, Mac OS X Real OOP languageReal OOP language Coding with your favorite Java IDECoding with your favorite Java IDE Debugging client-side using Java IDEDebugging client-side using Java IDE Communication between the client Communication between the client

and server using Java objectsand server using Java objects Client-side code is much lighter Client-side code is much lighter

weight than an equivalent Java appletweight than an equivalent Java applet


GWT already creates client applications in pure HTML and GWT already creates client applications in pure HTML and

JavaScript closely related to gadgetsJavaScript closely related to gadgets

Indeed, one can use the strengths of GWT to produce Indeed, one can use the strengths of GWT to produce

gadgets in optimized JavaScript from a Java codegadgets in optimized JavaScript from a Java code

Add a gadget specification file Add a gadget specification file <application>.gadget.xml, <application>.gadget.xml,

which describes the gadget to the containerwhich describes the gadget to the container

GWT will generate all the code needed by the gadgetGWT will generate all the code needed by the gadget

Here is the recipe* : Here is the recipe* :

Google API Libraries for Google Web ToolkitGoogle API Libraries for Google Web Toolkit http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStartedhttp://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted


* Note: Do not yet allow to generate a gadget according the full OpenSocial standard, but according to the standard Google Gadget

http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted


<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<Module><Module>

<ModulePrefs author="Claude Coulombe" author_email="[email protected]" height="300" title="SimpleGadget"/><ModulePrefs author="Claude Coulombe" author_email="[email protected]" height="300" title="SimpleGadget"/>

<Content type="html"><Content type="html">

<![CDATA[<![CDATA[

<script><script>

function com_example_simplegadget_SimpleGadget(){ function com_example_simplegadget_SimpleGadget(){

… …

</script></script>

]]>]]>

</Content> </Content>

</Module></Module>

GWT & gadget GWT & gadget – XML Configuration Files– XML Configuration Files

<module>  <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/>

 <inherits name="com.google.gwt.gadgets.Gadgets" />

 <entry-point class='com.example.simplegadget.client.SimpleGadget'/>  <stylesheet src='SimpleGadget.css' /></module>

com.example.simplegadget.client.SimpleGadget.gadget.xml

SimpleGadget.gwt.xml


package com.google.gwt.gadgets.sample.hellogadgets.client;package com.google.gwt.gadgets.sample.hellogadgets.client;

import com.google.gwt.gadgets.client.Gadget;import com.google.gwt.gadgets.client.Gadget;

......

@ModulePrefs( title = "My first gadget created with GWT", author = "Claude Coulombe", height = 300 )@ModulePrefs( title = "My first gadget created with GWT", author = "Claude Coulombe", height = 300 )

public class HelloGadget extends Gadget<HelloPreferences> {public class HelloGadget extends Gadget<HelloPreferences> {

protected void init(final HelloPreferences prefs) {protected void init(final HelloPreferences prefs) {

Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");

Button button = new Button("Click-me!");Button button = new Button("Click-me!");

VerticalPanel vPanel = new VerticalPanel();VerticalPanel vPanel = new VerticalPanel();

vPanel.setWidth("100%");vPanel.setWidth("100%");

vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

vPanel.add(img);vPanel.add(img);

vPanel.add(button);vPanel.add(button);

RootPanel.get().add(vPanel)RootPanel.get().add(vPanel)

button.addClickListener(new ClickListener() {button.addClickListener(new ClickListener() {

public void onClick(Widget sender) {public void onClick(Widget sender) {

Window.alert("My first gadget created with GWT");Window.alert("My first gadget created with GWT");

}}

});});

}}

}}

GWT & gadget – GWT & gadget – Java code snippet...Java code snippet...



* Note: Do not yet allow to generate a gadget according the full OpenSocial standard, but according to the standard Google Gadget

c

Compile with GWT in order to generate the gadget codeCompile with GWT in order to generate the gadget code

Deployment to an external Web serverDeployment to an external Web server

Reference the gadget definition to the iGoogle containerReference the gadget definition to the iGoogle container


GWT & Gadget – Code DemoGWT & Gadget – Code Demo

Code DemoCode Demo

http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xmlhttp://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml

http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml


ConclusionConclusion

The are common architectural concepts and design patterns The are common architectural concepts and design patterns

behind social network sitesbehind social network sites

From the proliferation of social networking sites has From the proliferation of social networking sites has

emerged the need for common standardsemerged the need for common standards

A stack of Open Source technologies is emerging for the A stack of Open Source technologies is emerging for the


OpenSocial standard promoted by Google and its numerous OpenSocial standard promoted by Google and its numerous

partners ipartners is mature and successful (over 600 M users)s mature and successful (over 600 M users)


QuestionsQuestions

??

Date post:	21-Jan-2015
Category:	Technology
Upload:	claude-coulombe
View:	1,558 times
Download:	4 times

Mcetech 2009 - Open Social

Technology