Slide pack for keynote presentation at TOOLS Europe, 2008. Covers widgets and OpenSocial. By Michael Mahemoff.

1. ` Web 2.0, OpenSocial, and Design Patterns

2. 1998 My Excite 2008 iGoogle

3. Mini web apps Widgets … Configurable

4. Re-arrangement is cumbersome Editing preferences -> new page Content refresh -> entire page refresh Monolithic - All content from excite.com

5. 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

6. 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

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

8. REST

9. Use the Force

10. 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

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

12. GET - read POST - update PUT – create DELETE - delete

13. 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

14. 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 }

15. REST simplifies calls and facilitates mashups

16. JSON

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

18. [ { &quot;truncated&quot;: false, &quot;in_reply_to_status_id&quot;: null, &quot;favorited&quot;: false, &quot;in_reply_to_user_id&quot;: null, &quot;source&quot;: &quot;<a href=amp;quot;http:www.twhirl.orgamp;quot;>twhirl<a>&quot;, &quot;id&quot;: 837306935, &quot;user&quot;: { &quot;name&quot;: &quot;Michael Mahemoff&quot;, &quot;screen_name&quot;: &quot;mahemoff&quot;, &quot;followers_count&quot;: 96, &quot;url&quot;: &quot;http:softwareas.com&quot;, &quot;profile_image_url&quot;: &quot;http:s3.amazonaws.comtwitter_productionprofile_images28010672beedogtilly_normal.jpg&quot;, &quot;description&quot;: &quot;Choose Web&quot;, &quot;location&quot;: &quot;London&quot;, &quot;id&quot;: 1112431, &quot;protected&quot;: false }, &quot;text&quot;: &quot;Click top-right amp;quot;Xamp;quot; on most windows nowadays and it's just going to minimise instead of closing.If I wanted minimise, I'd hit amp;quot;_amp;quot; not amp;quot;Xamp;quot;!!!&quot;, &quot;created_at&quot;: &quot;Tue Jun 17 23:41:26 +0000 2008&quot; }, { &quot;truncated&quot;: false, &quot;in_reply_to_status_id&quot;: 836898666, &quot;favorited&quot;: false, &quot;in_reply_to_user_id&quot;: 1671021, &quot;source&quot;: &quot;<a href=amp;quot;http:www.twhirl.orgamp;quot;>twhirl<a>&quot;, &quot;id&quot;: 837085942, &quot;user&quot;: { &quot;name&quot;: &quot;Michael Mahemoff&quot;, &quot;screen_name&quot;: &quot;mahemoff&quot;, &quot;followers_count&quot;: 96, &quot;url&quot;: &quot;http:softwareas.com&quot;, &quot;profile_image_url&quot;: &quot;http:s3.amazonaws.comtwitter_productionprofile_images28010672beedogtilly_normal.jpg&quot;, &quot;description&quot;: &quot;Choose Web&quot;, &quot;location&quot;: &quot;London&quot;, &quot;id&quot;: 1112431, &quot;protected&quot;: false }, &quot;text&quot;: &quot;@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.gdzyi&quot;, &quot;created_at&quot;: &quot;Tue Jun 17 18:29:49 +0000 2008&quot; } ] http://twitter.com/statuses/ user_timeline/mahemoff.json

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

20. OAuth

21. http://hueniverse.com

22. http://hueniverse.com

23. 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

24. Open Web Standards

25. HTML Javascript CSS DOM XMLHttpRequest

26. + Libraries and Frameworks

27. Ajax

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

29. Sandboxing

30. IFrames

32. Porous sandboxes

34. Inter-Frame Communication

35. http://is.gd/AaR

36. Caja

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

38. Widgets and OpenSocial

39. Gadgets (aka Widgets)

40. Mini Web Apps

41. Widget portals (iGoogle, NetVibes) Custom web pages (blogs, homepages) Social networks (Facebook, Bebo)

42. OpenSocial

43. 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)

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

45. OpenSocial = Widgets + Social APIs

46. Gadgets == Widgets

47. An open standard

48. Gadget Portals

49. 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

50. (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

51. Design Patterns

52. Software Patterns

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

55. Browser-Side Cache, Submission Throttling, …. XMLHttpRequest Call, Richer Plugin, … XMLHttpRequest Call, Richer Plugin, … Live Search, Lazy Registration, … Ajax Patterns

56. 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

57. OpenSocial – The Future

58. Caja

59. Cross-network social APIS

60. OAuth