widgets tools keynote

Web 2.0,

OpenSocial, and

Design Patterns

`

1998My Excite1998

My Excite

2008iGoogle2008

iGoogle

© British Telecommunications plc Draft (17 Sep 2007)

Mini web apps

Widgets …

Configurable

Re-arrangement is cumbersome

Editing preferences -> new page

Content refresh -> entire page refresh

Monolithic - All content from excite.com

Re-arrangement is cumbersomeRe-arrangement via drag-and-drop

Editing preferences -> new pageEditing preferences inline

Content refresh -> entire page refreshAutonomous gadgets

Monolithic - All content from excite.comAggregation of distributed gadgets

Web 2.0

Small pieces, loosely joined User participationUsability and Simplicity Social interactionData sharing Agile development

APIs (REST, JSON) Identity (OpenID)Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging

Open Web Standards Mashups/AggregationAjax SandboxingVideo Widgets


Principles

UserInterface

APIs (REST, JSON) Identity (OpenID)

Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging


Use the Force

Transport protocols(e.g. TCP/IP)

Networked API protocol(e.g. CORBA/IIOP, COM/DCOM)

Web standards(HTTP, HTML, CGI)

Web based API protocols(e.g. WSDL, SOAP)

REST = Working with

existing standards

<xs:schema targetNamespace="http://schemas.xmlsoap.org/wsdl/soap/"><xs:import namespace="http://schemas.xmlsoap.org/wsdl/"/>−<xs:simpleType name="encodingStyle">−<xs:annotation>−<xs:documentation>

"encodingStyle" indicates any canonicalization conventions followed in the contents of the containing element. For example, the value "http://schemas.xmlsoap.org/soap/encoding/" indicates the pattern described in SOAP specification </xs:documentation></xs:annotation><xs:list itemType="xs:anyURI"/></xs:simpleType><xs:element name="binding" type="soap:tBinding"/>−<xs:complexType name="tBinding">−<xs:complexContent>−<xs:extension base="wsdl:tExtensibilityElement"><xs:attribute name="transport" type="xs:anyURI" use="required"/><xs:attribute name="style" type="soap:tStyleChoice" use="optional"/></xs:extension></xs:complexContent></xs:complexType>−<xs:simpleType name="tStyleChoice">−<xs:restriction base="xs:string"><xs:enumeration value="rpc"/><xs:enumeration value="document"/></xs:restriction></xs:simpleType><xs:element name="operation" type="soap:tOperation"/>………..…………−

GET - read

POST - update

PUT – create

DELETE - delete

GET - readhttp://example.com/movies/123.xml

POST - updatehttp://example.com/movies/123.xml

PUT – createhttp://example.com/movies

DELETE - delete http://example.com/movies/123.xml

http://example.com/movies/123.xml

http://example.com/movies/123.xml <match> <id>123</id> <name>Raging Bull</name> <year>1980</year> </match>

http://example.com/movies/123.html <h1 id=“movie123”>Raging Bull</h1> Year: 1980

http://example.com/movies/123.json { id: 123, name: “Raging Bull”, year: 1980 }

REST simplifies calls and facilitates mashups

<?xml version="1.0" encoding="UTF-8"?><statuses type="array"> <status> <created_at>Tue Jun 17 23:41:26 +0000 2008</created_at> <id>837306935</id> <text>Click top-right "X" on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit "_" not "X"!!!</text> <source><a href="http://www.twhirl.org/">twhirl</a></source>

<truncated>false</truncated> <in_reply_to_status_id></in_reply_to_status_id> <in_reply_to_user_id></in_reply_to_user_id> <favorited>false</favorited> <user> <id>1112431</id> <name>Michael Mahemoff</name>

<screen_name>mahemoff</screen_name> <location>London</location> <description>Choose Web</description> <profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg</profile_image_url> <url>http://softwareas.com</url> <protected>false</protected>

<followers_count>96</followers_count> </user> </status>

<status> <created_at>Tue Jun 17 18:29:49 +0000 2008</created_at> <id>837085942</id> <text>@tdroza I don't know a browser extension that formats JSON.Browsers in 2008 still do a horrible job of formatting non-HTML! http://is.gd/zyi</text>

<source><a href="http://www.twhirl.org/">twhirl</a></source> <truncated>false</truncated> <in_reply_to_status_id>836898666</in_reply_to_status_id> <in_reply_to_user_id>1671021</in_reply_to_user_id> <favorited>false</favorited>

<user> <id>1112431</id> <name>Michael Mahemoff</name> <screen_name>mahemoff</screen_name> <location>London</location> <description>Choose Web</description>

<profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/28010672/beedogtilly_normal.jpg</profile_image_url> <url>http://softwareas.com</url> <protected>false</protected> <followers_count>96</followers_count> </user> </status>

</statuses>

http://twitter.com/statuses/user_timeline/mahemoff.xml

[ { "truncated": false, "in_reply_to_status_id": null, "favorited": false, "in_reply_to_user_id": null, "source": "<a href=\"http:\/\/www.twhirl.org\/\">twhirl<\/a>", "id": 837306935, "user": { "name": "Michael Mahemoff", "screen_name": "mahemoff", "followers_count": 96, "url": "http:\/\/softwareas.com", "profile_image_url": "http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/28010672\/beedogtilly_normal.jpg", "description": "Choose Web", "location": "London", "id": 1112431, "protected": false }, "text": "Click top-right \"X\" on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit \"_\" not \"X\"!!!", "created_at": "Tue Jun 17 23:41:26 +0000 2008" },

{ "truncated": false, "in_reply_to_status_id": 836898666, "favorited": false, "in_reply_to_user_id": 1671021, "source": "<a href=\"http:\/\/www.twhirl.org\/\">twhirl<\/a>", "id": 837085942, "user": { "name": "Michael Mahemoff", "screen_name": "mahemoff", "followers_count": 96, "url": "http:\/\/softwareas.com", "profile_image_url": "http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/28010672\/beedogtilly_normal.jpg", "description": "Choose Web", "location": "London", "id": 1112431, "protected": false }, "text": "@tdroza I don't know a browser extension that formats JSON.Browsers in 2008 still do a horrible job of formatting non-HTML! http:\/\/is.gd\/zyi", "created_at": "Tue Jun 17 18:29:49 +0000 2008" }]

http://twitter.com/statuses/user_timeline/mahemoff.json

3rd party 3rd party

XML/HTML(Proxied)

XML/HTML(Proxied)

JSON(Direct)

JSON(Direct)

Website server

http://hueniverse.com

Web 2.0


APIs (REST, JSON) Identity (OpenID)Delegated Trust (OAuth) News Feeds (RSS/Atom)Microformats Tagging


Open Web

Standards

HTML

JavascriptCSSDOM

XMLHttpRequest

+ Libraries and Frameworks

Website server

1. Initialsite

2. Ongoing dialogue(no page refresh)

Rich , dynamic, UI

Sandboxing

IFrames

Porous sandboxes

Inter-Frame Communication

http://is.gd/AaR

“Using Caja, web apps can safely allow scripts in third party content.”

Google-Caja

Widgets and OpenSocial

Gadgets

(aka Widgets)

Mini Web Apps

Widget portals(iGoogle, NetVibes)

Custom web pages

(blogs, homepages)

Social networks

(Facebook, Bebo)

OpenSocial

AA

Google iGoogle

GoogleGadget

Google Orkut

GoogleGadget

OpenSocialAPI

Megacorp

MegacorpWidget

Facebook

Facebook Application

Facebook “social” API

Social API

Widget API

ContainerWebsiteNb in most cases, widgets can also be embedded on standalone websites

Stovepiped model(2005-2007)

Google iGoogle

GoogleGadget

Google Orkut

OpenSocialAPI

Megacorp

Facebook??????

Social API

Widget API

ContainerWebsite

OpenSocial model(in production from 2008)

OpenSocial = Widgets + Social APIs

Gadgets == Widgets

An open standard

Gadget Portals

iGoogle server

Gadget platform

JSONAPI calls

ProxiedREST calls

ProxiedOAuth calls

XMLHttpRequestcalls

Gadgets are sandboxed …

… but porous

… can talk to each other or to portal

Gadget

Shindig

(1)Gadget Server

(2a) PlatformServices

(3a) Container

(2b) Platform

JS

Gadgetprovider

Gadget XML Spec

GadgetHTML/JS/CSS

Transforms gadget XML specinto embeddable web content

Offers platform of browser-side and back-end services, e.g. proxying, caching, preferences, social info

Aggregrates widgets into portal. Features include: user registration, preference persistence, theming, browsing/searching of gadgets

Externalwebsite

(3b) Container

JS

EmbedsGadgetVia script tag

EmbedsGadgetsVia script tag

Design Patterns

Software

Patterns

Using Patterns to Improve Our Architectural VisionNorman L. Kerth and Ward Cunningham

IEEE Software, Vol. 23, No. 1. Jan/Feb 1997

Ajax

Patterns

Browser-Side Cache, Submission Throttling, ….

XMLHttpRequest Call, Richer Plugin, …

XMLHttpRequest Call, Richer Plugin, …

Live Search, Lazy Registration, …

OpenSocial

Patterns

Multiple Tabs, Popup Window, …

Read-Write Element …

Inter-Gadget Drag-and-Drop …

Power-of-attorney call …

UI Customisation …

Relative Path Reference …

First Move …

Social Fixture …

OpenSocial – The Future

Cross-network social APIS

widgets tools keynote

Technology