Social Web, Web Architecture and the OpenSocial Standard

Social Web, Web Architecture
and the OpenSocial Standard

by

Claude Coulombe

Université de Montréal

MCETECH 2009 Ottawa, May 4th 2009

Web 1.0 – Click and Wait...

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

Ajax – A breakthrough!

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


Ajax – A breakthrough!
Ajax (Asynchronous JavaScript and XML)

 Eliminates painful page loading!
 Makes asynchronous requests for data to the
server and updates the web page without
doing a full page reload
 More responsive and dynamic Webapps
 XMLHttpRequest object
 Based on Client-side JavaScript


Ajax – Collaboration Diagram

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

Ajax – Sequence Diagram

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

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.

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

Client-server communication & Ajax

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

Web 2.0

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

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


Social Web


Social Web
At its basis, Internet is a network, a network of content
servers and more recently a network of applications but
also a network of users.

The Social Web describes how people socialize and interact
on the Web sharing a variety of interests. It is therefore
quite natural in the context of Web 2.0, where the
emphasis is on users, that entrepreneurs have created
Web 2.0 applications that focus on social interactions and
communities.


Social Network Sites


Social Network applications (or Social Network sites),
like MySpace or Facebook, allow their users to enter
personal information (profile) and interact with other
users.

These informations allows users to retrieve users and
quot;pseudo friendsquot; sharing the same interests. Users
can form groups and invite other people. The
interactions between members include discussions
and sharing of photos, podcasts, videos, links and
documents.


The first social network site was www.classmates.com
which is still in business since 1995.


Friendster www.friendster.com
But the quot;boomquot; occurred around 2002 with, among
others, the website Friendster

whose success vanished after refusing an offer of $ 30
million 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=slogin

MySpace www.myspace.com

Itself overtaken by MySpace in 2004 which has 122
million users and revenues of $ 900M


FaceBook www.facebook.com

Eventually overtaken by FaceBook in 2007, which
would have now 200 million users and annual revenues
of $ 350 million


Specialized Social Networks
Some specialized social networks, like LinkedIn rely on
contacts or business relationships www.linkedin.com

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


Social Network - Laws

Sarnoff's Law : The value of network services like phone service
(e.g. weather, 911, personal phone calls) grow proportionally to
network size, i.e V = k.N

Metcalfe's Law : The value of a network service where any
customer has advantages to transact with any other customer
grows by the square of the size of the network, i.e V = k.N2

Reed's Law : Networks that support the construction of
communicating groups (Group-Forming Networks) create value
that scales exponentially with network size, i.e. V = k.2N

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

Social Sites – Ning Demo

Demo


Social Web – Application patterns


Social Web – Application patterns

Social Network Pattern :
Application that allows users to enter profiles and
contents, form groups and interact with other
users sharing their interests

Container Application Pattern :
Application with a plugin architecture which contains a
set of small applications or utilities


Social Web – Application Components


Social Web – Application Components
A personal space based on a profile (address, age, sex, nationality,

education level, photo) and points of interest
The user can organize and personalize their personal space


Tool to create links with friends and manage lists of friends and common

friends (FOAF: friends of a friend)
Tools to create, invite and manage groups


Tool to create, suggest and manage activities


RSS content syndication http://en.wikipedia.org/wiki/RSS


Blog: personal diary, which contains mostly personal opinions on various

topics or a specific issue. Offers to visitors the opportunity to comment
http://en.wikipedia.org/wiki/Blog *
Tools for sharing photos, podcasts, videos, bookmarks and documents


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

* Note: or a simple Guestbook

Social Web – Third Party Applications
In addition to a set of basic applications provided by the

operator of the site, many sites are open to third-party
applications
This openness contributes to the success of sites


Some third-party applications are subject to a sharing of

advertising revenues
8000 third-party applications for Facebook in 2007


Tools and application frameworks are available to

developers in order to facilitate their work
However, standards are usually proprietary, e.g. the

famous FBML, a variant of HTML exclusive to FaceBook
In 2007, Facebook came out with an API and a platform for

delivering small applications called widgets. But facebook
widgets work only with facebook.

Social Network Sites - Pros and Cons


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

Allows to create a custom site and in his image

Allows to share of interests and passions

Allows to retreive friends, pals or relatives

International diffusion

Cheap and accessible entertainment

At the technical level

Quick responses to user actions

Rich web applications, fast and light

No more slow download or installation

Compatible with all Web browsers

The browser becomes the platform

Social Network Sites - Cons
Trendy, effect fashion


Threats and attacks on privacy


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

Intrusive advertising. For example in 2007, launch of Beacon by Facebook that

was an advertising software which communicated (without consent) the
information on purchases to their quot;friendsquot; ...
Time-consuming activity


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

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

Problem of copyright infringement


Violent, racist, pornographic, false, deceptive contents


The security aspect is to be monitored


At the technical level


too many standards and proprietary APIs

Compatibility and interoperability issues between different networks

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

Gadgets

Gadgets


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

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


Gadgets - Definition
Gadgets are small applications consisting of: XML, HTML and
JavaScript plus resources such as images and CSS files
XML for the specification of the gadget
HTML supports static content
JavaScript for interactivity & communication with Web services

<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<Module>
<ModulePrefs author=quot;Claude Coulombequot;
author_email=quot;claude.coulombe@umontreal.caquot; height=quot;300quot; title=quot;SimpleGadgetquot;/>
<Content type=quot;htmlquot;>
<![CDATA[
<script>
function com_example_simplegadget_SimpleGadget(){
…
</script>
]]>
</Content>
</Module>

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

Gadgets-Based Architecture
Typical gadgets application follows the « Container
Application Pattern »
Plugin architecture which contains a set of small
applications or utilities
Container provides a sandbox for convenient and
secure execution of gadgets
Architecture popularized by social network sites
Light Web Services (REST style) and light components
(gadgets are based on XHTML, CSS and JavaScript)


Gadgets Server
Generates HTML, JavaScript & CSS from the specification

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

Gadgets Container
Displays the social network’s user interface
Opens an IFrame to insert the gadget

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

Gadgets Container – How it works?
1) Browser client requests a Gadget application
2) Container requests the Gadget spec from its host
3) Container converts the Gadget spec to HTML via the
gadgets server which is displayed to the client


Gadgets Container – How it works?
1) The gadget application requests remote content
2) Container requests content from the specific URL
3) Container returns response to the gadget which displays
the data


REST

REST


REST
REST (REpresentational State Transfer)
Based on resources (resources are URLs)
Stateless
Each resource is accessible via one unique URI
A set of MIME types of content in request and
response
A set of basic HTTP commands


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

HTTP CRUD
POST Create
GET Read
PUT Update
DELETE Delete


REST – To learn more...
Introduction to REST (JavaLobby)
http://java.dzone.com/articles/intro-rest
http://java.dzone.com/articles/putting-java-rest
Book
RESTful Web Services
Leonard Richardson; Sam Ruby
O'Reilly Media, Inc.
May, 2007


RPC

RPC


RPC
RPC : Remote Procedure Call
Inter-process communication protocol that allows a
software to call the execution of a procedure on
another computer without having to explicitly code all
the details
RPC allows easy exchange of serialized objects
between client and server
Only one endpoint (one URL) + parameters
Parameters specify methods to call, not limited to
the 4 REST methods


Container of gadgets - Netvibes


Container of gadgets - iGoogle


Container of gadgets – Code Demo

Demo


Gadgets - Pros & Cons


Gadgets - Pros
Weak coupling
Promotes reuse
Easy to develop
Light and little demanding in bandwidth and server
capacity
Easy deployment on many different social network sites
Easy for the user to add, remove and customize gadgets


Gadgets - Cons
Trendy, effect fashion
Proliferation of gadgets and services of doubtful utility
Hard to test
Security problem
Interoperability problem?
Gadgets are limited in their complexity & functionnality


OpenSocial Standard

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

OpenSocial
With the proliferation of social networking sites has emerged the need for
common standards and open source tools
Reed's Law can explain why the evolution of an open, interoperable,
global social network seems inevitable
Created in response to the proliferation of standards and proprietary APIs
or specific APIs to a single site (November 2007)*
OpenSocial is a free and open standard that defines a common API to a
set of social applications on many different websites
Combination of Google Gadgets, a container of gadgets and standard
communication API
Partners of the OpenSocial Foundation: Engage.com, Friendster, Google,
hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo,
Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo!
http://www.opensocial.org/
* Note : A lot in reaction to FaceBook

OpenSocial Standard

OpenSocial


OpenSocial Standard


OpenSocial Standard
Defines an XML format for applications, including user interface (HTML /
CSS / Javascript) and metadata (title, author, email, size of the gadget
preferences)
Defines APIs for Web services and data exchange, including REST and
RPC Web services and persistent data
Authentication service (Oauth) http://oauth.net/
OpenSocial Services
1) People & Relationship (friends) : access to programming information on friends

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

3) Persistence (Application data, data gadgets)

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


OpenSocial Standard – Client Gadget
Client Javascript features
Gadget container (gadget.js), OpenSocial gadget

OpenSocial container

JSON, Restful container

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

OpenSocial Standard – JS Library
OpenSocial - Javascript Library

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

OpenSocial – JS code snippet
Request information about a friend ...
function getFriendData() {

var req = opensocial.newDataRequest();

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

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

req.send(onLoadFriends);

}

Callback function to get data about a friend ...
function onLoadFriends(resp) {

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

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

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

viewerFriends.each(function(person) {

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

});

html += '</ul>';

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

} MCETECH 2009 Ottawa, May 4th 2009
* Source code : http://www.google.com

OpenSocial – REST and RPC
OpenSocial offers both REST and RPC protocols
Communication methods:
RESTful (Representational State Transfer)
RPC (Remote Procedure Call)
Data Formats: XML, JSON, AtomPub

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

OpenSocial – REST Services
Based on the AtomPub (Atom publishing protocol) standard and JSON
/people/{guid}/@all
-- Returns the set of all the people associated with the user {guid}
/people/{guid}/@friends
-- Returns the set of all friends of user {guid}
-- i.e. a subset of @all
/people/{guid}/@self
-- Return the information in the profile of user {guid}
/activities/{guid}/@self
-- Returns the set of all the activities generated by the user {guid}
/activities/{guid}/@friends
-- Returns the set of all the activities from friends of user {guid}

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

OpenSocial – RPC Services
Parameters specify methods to call, not limited to the 4 REST methods
Batch support *
Easy specification of group of users * through passed arguments

POST /rpc HTTP/1.1Host:
api.example.orgAuthorization:
<Auth token>
Content-Type: application/json {
quot;methodquot; : quot;people.getquot;,
quot;idquot; : quot;myselfquot;
quot;paramsquot; : {
quot;useridquot; :
quot;@mequot;,
quot;groupidquot; :
quot;@selfquot;
}
}

* Note : considered difficult with REST

Shindig Server

Shindig


Shindig Server
Reference implementation of the OpenSocial standard
Java and PHP
Apache open software project supported by a consortium of companies
led by Google
Includes 4 main parts :
1) JS Gadgets Container (UI, security, communication, pref.)
2) Gadgets Server (XML specifications to JS + HTML)
3) JS OpenSocial Container (layer on top of the JS gadgets container):
profiles, friends, activities
4) OpenSocial Data Server : interface to other content servers
including REST APIs
http://incubator.apache.org/shindig/


Shindig Server
3 main server components
Gadget Server, XML → HTML
OpenSocial JS Container Server
Persistent Data Server

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

Shindig Server – How it works?
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 handler
4. 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 modules
6. 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

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

Shindig Server – Code Demo

Code Demo
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 & Cons


OpenSocial - Pros
The usual advantages of a standard: interoperability, portability,
creation of a critical mass, reduced learning, better documentation,
better tools, greater productivity, cost reduction, sustainability of
technology
Allows third party applications to run on more social network sites
More applications accessible to more people!
Enables operators of social sites to focus on their business and
services and spend less effort on technological developments
According to Hal Varian: The adoption of standards leads to the
shift from a competition for a market to a competition in a market
Endorsement by major players like Google
OpenSocial specification process is community driven


OpenSocial - Cons
Constraints introduced by the standard
Many older versions of Google Gadgets
Different containers have different policies
Directory approvals vary
Scaling could be hard*
Difficulty in the creation of large applications in HTML & JavaScript
Difficulties in sharing a standard with its competitors
Dependency on Google
Not suitable for critical services with secure transactions
Security concerns (Caja is a potential solution)

* Note : consider hosting your app to a cloud service

GWT – A Java Gadgets Factory!

GWT



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

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


Why GWT? - Problems with JavaScript
So, he didn't know
JavaScript well enough...


Why GWT? - Problems with JavaScript
Real JavaScript experts are rare...

 Working around browser incompatibilities,
memory leaks and long load times
 JS is not a true OOP language

JS was not designed for big programs

 Lack of modularity and scalability makes
testing, debugging and reusing JS and Ajax
components very difficult
 JavaScript and Ajax tool support is deficient


Understanding GWT

GWT


What is GWT ?
May 2006 Google released Google Web Toolkit

– Bruce Johnson & Joel Webber
Open source “client-centric” Java framework

that makes writing Rich Webapps easy for
Java developers who don't speak JavaScript as
a second language
 GWT cross compiles Java to JavaScript

GWT is not just good to build Ajax Webapps,

GWT is good to build “desktop-like” Webapps
that run in a browser


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

Write Once...
JavaScript

Run Everywhere!

What is GWT? - Pure Java approach
Over six millions Java developers


“Write Once, Run Anywhere”


Windows, Linux, Mac OS X


Real OOP language


Coding with your favorite Java IDE


Debugging client-side using Java IDE


Communication between the client

and server using Java objects
Client-side code is much lighter

weight than an equivalent Java applet


GWT already creates client applications in pure HTML and
JavaScript closely related to gadgets
Indeed, one can use the strengths of GWT to produce
gadgets in optimized JavaScript from a Java code
Add a gadget specification file <application>.gadget.xml,
which describes the gadget to the container
GWT will generate all the code needed by the gadget
Here is the recipe* :
Google API Libraries for Google Web Toolkit
http://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

GWT & gadget – XML Configuration Files
com.example.simplegadget.client.SimpleGadget.gadget.xml

<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<Module>
<ModulePrefs author=quot;Claude Coulombequot; author_email=quot;claude.coulombe@umontreal.caquot; height=quot;300quot; title=quot;SimpleGadgetquot;/>
<Content type=quot;htmlquot;>
<![CDATA[
<script>
function com_example_simplegadget_SimpleGadget(){
…
</script>
]]>
</Content>
</Module>

SimpleGadget.gwt.xml

<module>

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


<inherits name=quot;com.google.gwt.gadgets.Gadgetsquot; />


<entry-point class='com.example.simplegadget.client.SimpleGadget'/>


<stylesheet src='SimpleGadget.css' />
</module>

GWT & gadget – Java code snippet...
package com.google.gwt.gadgets.sample.hellogadgets.client;

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

...

@ModulePrefs( title = quot;My first gadget created with GWTquot;, author = quot;Claude Coulombequot;, height = 300 )

public class HelloGadget extends Gadget<HelloPreferences> {

protected void init(final HelloPreferences prefs) {

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

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

VerticalPanel vPanel = new VerticalPanel();

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

vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

vPanel.add(img);

vPanel.add(button);

RootPanel.get().add(vPanel)

button.addClickListener(new ClickListener() {

public void onClick(Widget sender) {

Window.alert(quot;My first gadget created with GWTquot;);

}

});

}

} MCETECH 2009 Ottawa, May 4th 2009

Compile with GWT in order to generate the gadget code
Deployment to an external Web server
Reference the gadget definition to the iGoogle container

c

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

GWT & Gadget – Code Demo

Code Demo

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


Conclusion
The are common architectural concepts and design patterns
behind social network sites
From the proliferation of social networking sites has
emerged the need for common standards
A stack of Open Source technologies is emerging for the
Social Web
OpenSocial standard promoted by Google and its numerous
partners is mature and successful (over 600 M users)


Questions

?


Social Web, Web Architecture and the OpenSocial Standard

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Social Web, Web Architecture and the OpenSocial Standard

Ähnlich wie Social Web, Web Architecture and the OpenSocial Standard (20)

Mehr von Claude Coulombe

Mehr von Claude Coulombe (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Social Web, Web Architecture and the OpenSocial Standard