` 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 conte...
Re-arrangement is cumbersome Re-arrangement via drag-and-drop Editing preferences -> new page Editing preferences inline C...
Small pieces, loosely joined User participation Usability and Simplicity  Social interaction Data sharing  Agile developme...
Small pieces, loosely joined User participation Usability and Simplicity  Social interaction Data sharing  Agile developme...
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 b...
<xs:schema targetNamespace=&quot;http://schemas.xmlsoap.org/wsdl/soap/&quot;> <xs:import namespace=&quot;http://schemas.xm...
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....
http://example.com/movies/123.xml   <match> <id>123</id> <name>Raging Bull</name> <year>1980</year> </match> http://exampl...
REST simplifies calls and facilitates mashups
JSON
<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <statuses type=&quot;array&quot;> <status> <created_at>Tue Jun ...
[ { &quot;truncated&quot;: false, &quot;in_reply_to_status_id&quot;: null, &quot;favorited&quot;: false, &quot;in_reply_to...
3 rd  party 3 rd  party XML/HTML (Proxied) XML/HTML (Proxied) JSON (Direct) JSON (Direct) Website server
OAuth
http://hueniverse.com
http://hueniverse.com
Small pieces, loosely joined User participation Usability and Simplicity  Social interaction Data sharing  Agile developme...
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  Appli...
Google iGoogle Google Gadget Google Orkut OpenSocial API Megacorp Facebook ?????? Social API Widget API Container Website ...
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 sand...
(1) Gadget Server (2a) Platform Services (3a) Container (2b) Platform JS Gadget provider Gadget XML Spec Gadget HTML/JS/CS...
Design Patterns
Software Patterns
Using   Patterns  to  Improve   Our   Architectural Vision Norman L. Kerth and Ward Cunningham IEEE Software, Vol. 23, No....
 
Browser-Side Cache, Submission Throttling, …. XMLHttpRequest Call, Richer Plugin, … XMLHttpRequest Call, Richer Plugin, … ...
Multiple Tabs, Popup Window, … Read-Write Element … Inter-Gadget Drag-and-Drop … Power-of-attorney call … UI Customisation...
OpenSocial – The Future
Caja
Cross-network social APIS
OAuth
Upcoming SlideShare
Loading in...5
×

Widgets Tools Keynote

2,716

Published on

Slide pack for keynote presentation at TOOLS Europe, 2008.

Covers widgets and OpenSocial.

By Michael Mahemoff.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,716
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Widgets Tools Keynote

  1. 1. ` Web 2.0, OpenSocial, and Design Patterns
  2. 2. 1998 My Excite 2008 iGoogle
  3. 3. Mini web apps Widgets … Configurable
  4. 4. Re-arrangement is cumbersome Editing preferences -> new page Content refresh -> entire page refresh Monolithic - All content from excite.com
  5. 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. 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. 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. 8. REST
  9. 9. Use the Force
  10. 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. 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. 12. GET - read POST - update PUT – create DELETE - delete
  13. 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. 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. 15. REST simplifies calls and facilitates mashups
  16. 16. JSON
  17. 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. 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=&quot;http://www.twhirl.org/&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.com/twitter_production/profile_images/28010672/beedogtilly_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 &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;!!!&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=&quot;http://www.twhirl.org/&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.com/twitter_production/profile_images/28010672/beedogtilly_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.gd/zyi&quot;, &quot;created_at&quot;: &quot;Tue Jun 17 18:29:49 +0000 2008&quot; } ] http://twitter.com/statuses/ user_timeline/mahemoff.json
  19. 19. 3 rd party 3 rd party XML/HTML (Proxied) XML/HTML (Proxied) JSON (Direct) JSON (Direct) Website server
  20. 20. OAuth
  21. 21. http://hueniverse.com
  22. 22. http://hueniverse.com
  23. 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. 24. Open Web Standards
  25. 25. HTML Javascript CSS DOM XMLHttpRequest
  26. 26. + Libraries and Frameworks
  27. 27. Ajax
  28. 28. Website server 1. Initial site 2. Ongoing dialogue (no page refresh) Rich , dynamic, UI
  29. 29. Sandboxing
  30. 30. IFrames
  31. 32. Porous sandboxes
  32. 34. Inter-Frame Communication
  33. 35. http://is.gd/AaR
  34. 36. Caja
  35. 37. “ Using Caja, web apps can safely allow scripts in third party content.” Google-Caja
  36. 38. Widgets and OpenSocial
  37. 39. Gadgets (aka Widgets)
  38. 40. Mini Web Apps
  39. 41. Widget portals (iGoogle, NetVibes) Custom web pages (blogs, homepages) Social networks (Facebook, Bebo)
  40. 42. OpenSocial
  41. 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)
  42. 44. Google iGoogle Google Gadget Google Orkut OpenSocial API Megacorp Facebook ?????? Social API Widget API Container Website OpenSocial model (in production from 2008)
  43. 45. OpenSocial = Widgets + Social APIs
  44. 46. Gadgets == Widgets
  45. 47. An open standard
  46. 48. Gadget Portals
  47. 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
  48. 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
  49. 51. Design Patterns
  50. 52. Software Patterns
  51. 53. Using Patterns to Improve Our Architectural Vision Norman L. Kerth and Ward Cunningham IEEE Software, Vol. 23, No. 1. Jan/Feb 1997
  52. 55. Browser-Side Cache, Submission Throttling, …. XMLHttpRequest Call, Richer Plugin, … XMLHttpRequest Call, Richer Plugin, … Live Search, Lazy Registration, … Ajax Patterns
  53. 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
  54. 57. OpenSocial – The Future
  55. 58. Caja
  56. 59. Cross-network social APIS
  57. 60. OAuth
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×