Widgets Tools Keynote

` Web 2.0, OpenSocial, and Design Patterns

1998 My Excite 2008 iGoogle

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 cumbersome Re-arrangement via drag-and-drop Editing preferences -> new page Editing preferences inline Content refresh -> entire page refresh Autonomous gadgets Monolithic - All content from excite.com Aggregation of distributed gadgets

Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development APIs (REST, JSON) Identity (OpenID) Delegated Trust (OAuth) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets Web 2.0

Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development Principles User Interface APIs ( REST , JSON ) Identity (OpenID) Delegated Trust ( OAuth ) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets

REST

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 - read http://example.com/movies/123.xml POST - update http://example.com/movies/123.xml PUT – create http://example.com/movies DELETE - delete 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

JSON

<?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

3 rd party 3 rd party XML/HTML (Proxied) XML/HTML (Proxied) JSON (Direct) JSON (Direct) Website server

OAuth

http://hueniverse.com

Small pieces, loosely joined User participation Usability and Simplicity Social interaction Data sharing Agile development APIs (REST, JSON) Identity (OpenID) Delegated Trust (OAuth) News Feeds (RSS/Atom) Microformats Tagging Open Web Standards Mashups/Aggregation Ajax Sandboxing Video Widgets Web 2.0

Open Web Standards

HTML Javascript CSS DOM XMLHttpRequest

+ Libraries and Frameworks

Ajax

Website server 1. Initial site 2. Ongoing dialogue (no page refresh) Rich , dynamic, UI

Sandboxing

IFrames

Porous sandboxes

Inter-Frame Communication

http://is.gd/AaR

Caja

“ 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

A Google iGoogle Google Gadget Google Orkut Google Gadget OpenSocial API Megacorp Megacorp Widget Facebook Facebook Application Facebook “social” API Social API Widget API Container Website Nb in most cases, widgets can also be embedded on standalone websites Stovepiped model (2005-2007)

Google iGoogle Google Gadget Google Orkut OpenSocial API Megacorp Facebook ?????? Social API Widget API Container Website OpenSocial model (in production from 2008)

OpenSocial = Widgets + Social APIs

Gadgets == Widgets

An open standard

Gadget Portals

iGoogle server Gadget platform JSON API calls Proxied REST calls Proxied OAuth calls XMLHttpRequest calls Gadgets are sandboxed … … but porous … can talk to each other or to portal Gadget

(1) Gadget Server (2a) Platform Services (3a) Container (2b) Platform JS Gadget provider Gadget XML Spec Gadget HTML/JS/CSS Transforms gadget XML spec into 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 External website (3b) Container JS Embeds Gadget Via script tag Embeds Gadgets Via script tag Shindig

Design Patterns

Software Patterns

Using Patterns to Improve Our Architectural Vision Norman L. Kerth and Ward Cunningham IEEE Software, Vol. 23, No. 1. Jan/Feb 1997

Browser-Side Cache, Submission Throttling, …. XMLHttpRequest Call, Richer Plugin, … XMLHttpRequest Call, Richer Plugin, … Live Search, Lazy Registration, … Ajax 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 Patterns

OpenSocial – The Future

Caja

Cross-network social APIS

OAuth

Widgets Tools Keynote

0 comments

Notes on slide 1

Favorites, Groups & Events