Barcamphanoi Opensocial Application Development


Published on

Presentation on OpenSocial Application Development topic at BarCamp Hanoi 2009

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Barcamphanoi Opensocial Application Development

  1. OpenSocial Application Development <ul><li>4 th year HUT student </li></ul><ul><li>Hanoi-Aptech student </li></ul><ul><li>Work for eXo Platform SEA </li></ul><ul><li>Tech events: OpenSocial Hackathon, PHP Day, BarCamp Hanoi, Tweetup, Meetup, H4, etc., </li></ul>Tags: - OpenSocial - Web Standard - Fun URLs:
  2. Agenda <ul><li>OpenSocial Introduction </li></ul><ul><li>How to build OpenSocial Applications </li></ul><ul><li>Upcoming features </li></ul><ul><li>Challenges </li></ul>
  3. OpenSocial Introduction “ The web is better when it's social.” So what does “social” mean?
  4. What does “social” mean? Eliette, what do you do with your friends?
  5. What does “social” mean?
  6. What does “social” mean?
  7. What does “social” mean?
  8. What does “social” mean?
  9. What does “social” mean?
  10. What does “social” mean?
  11. What does “social” mean?
  12. What does “social” mean?
  13. What does “social” mean? “ Talking”
  14. What does “social” mean?
  15. What does “social” mean?
  16. What does “social” mean?
  17. What does “social” mean?
  18. Social Networks <ul><li>3 features of a social network: </li></ul><ul><ul><li>Discover and Share (Search) </li></ul></ul><ul><ul><li>Create and Share (Content) </li></ul></ul><ul><ul><li>Discuss and Share (Communicate) </li></ul></ul><ul><li>Social networks include: </li></ul><ul><ul><li>Profiles: Who you are </li></ul></ul><ul><ul><li>Friends: Your relationships </li></ul></ul><ul><ul><li>Activities </li></ul></ul>
  19. A Social Network
  20. Social Networks <ul><li>Manage large number of users and relationships </li></ul><ul><li>Is slow to add new features </li></ul>
  21. Social Networks
  22. Social Networks <ul><li>A social application: </li></ul><ul><li>Lets the social network manage users and relationships </li></ul><ul><li>Adds new features to the social network </li></ul><ul><li>Let users “install” the application without signing up for new accounts </li></ul><ul><li>Grows quickly because users are already communicating to each other </li></ul>
  23. Social Networks
  24. Need for a social API <ul><li>How do we put applications in social networks??? </li></ul>
  25. Need for a social API
  26. Need for a social API
  27. Need for a social API
  28. Need for a social API
  29. Need for a social API
  30. Need for a social API
  31. Introduction to OpenSocial <ul><li>19+ implemented containers </li></ul><ul><li>40+ committed containers </li></ul><ul><li>3000+ applications </li></ul><ul><li>400,000,00+ users </li></ul><ul><ul><li>(From Google Devfest Bangkok - 10/2008) </li></ul></ul>
  33. Where is OpenSocial live today? <ul><li>Live to users </li></ul><ul><li>hi5 </li></ul><ul><li>LinkedIn </li></ul><ul><li>MySpace </li></ul><ul><li>orkut </li></ul><ul><li>Netlog </li></ul><ul><li>Yahoo! </li></ul><ul><li>Friendster </li></ul><ul><li>Ning </li></ul><ul><li>Google Friend Connect </li></ul><ul><li>Live to developers </li></ul><ul><li>IGoogle </li></ul><ul><li>Gmail </li></ul><ul><li>imeem </li></ul><ul><li>Yoja </li></ul><ul><li>CityIN </li></ul><ul><li>.... </li></ul>Full list:
  34. OpenSocial APIs <ul><li>Versions </li></ul><ul><li>0.6 – Client-side APIs introduced </li></ul><ul><li>0.7 – Server-side APIs introduced </li></ul><ul><li>0.8.1 – Server-side APIs finalized </li></ul><ul><li>0.9 – current development </li></ul><ul><li>Client-side: </li></ul><ul><li>Gadgets XML </li></ul><ul><li>Gadgets JavaScript </li></ul><ul><li>OpenSocial JavaScript </li></ul><ul><li>Server-side: RESTful protocol, RPC protocol </li></ul>
  35. How to build OpenSocial app <ul><li>OpenSocial app = </li></ul><ul><li>Gadgets + Gadgets JavaScript + OpenSocial JavaScript </li></ul>
  36. Gadgets <ul><li>XML file </li></ul><ul><li>Meta data definition </li></ul><ul><li>Highly cacheable + no high performance server requirement </li></ul><ul><li>HTML for markup, structure </li></ul><ul><li>CSS for presentation </li></ul><ul><li>JavaScript for interactivity, behavior </li></ul>
  37. Gadgets <ul><li>Views? </li></ul><ul><li>- Gadgets can be rendered in different locations on a container </li></ul><ul><li>- Certain page might be pubic, some are private </li></ul><ul><li>- View provide a way for gadgets to provide different functionality depends on where it is rendered </li></ul>
  38. Gadgets
  39. Gadgets
  40. Gadgets JavaScript <ul><li> - cross-domain ajax call </li></ul><ul><li>gadgets.json.parse() and gadget.json.stringify() </li></ul><ul><li>gadgets.util.escapeString() </li></ul><ul><li>gadgets.util.registerOnloadHandler() </li></ul><ul><li>... </li></ul>
  41. OpenSocial JavaScript <ul><li>It's people: </li></ul><ul><li>- VIEWER, OWNER? </li></ul><ul><li>- Persistent data </li></ul>
  42. OpenSocial JavaScript
  43. OpenSocial JavaScript
  44. OpenSocial JavaScript <ul><li>Persistent data: </li></ul><ul><li>Give apps key, value storage directly on the container </li></ul><ul><li>String only, JSON conversion for complex data </li></ul><ul><li>Storage per app per user – scales well </li></ul><ul><li>Ideal for settings, customizations </li></ul>
  45. Upcoming features <ul><li>Caja: </li></ul><ul><li>Reduces threats with a JavaScript sanitizer as an additional “sandbox” on top of Iframe protection </li></ul><ul><li>Prevent gadgets from being used for phising, spam, malware, etc., </li></ul>
  46. Upcoming features <ul><li>Templating: </li></ul><ul><li>Developers need a simple way to convert OpenSocial data to HTML </li></ul><ul><li>DOM manipulation is slow and ugly </li></ul>
  47. Templating <script type=&quot;text/os-template&quot;> ${Viewer.displayName}'s friends:<br/> <div repeat=&quot;ViewerFriends&quot;> <img src=&quot;${Cur.thumbnailUrl}&quot; width=&quot;32&quot; height=&quot;32&quot;/> <a href=&quot;${Cur.profileUrl}&quot; target=&quot;_new&quot;>${Cur.displayName}</a> </div> </script> See more:
  48. Challenges
  49. Challenges <ul><li>Cross-container development is still tricky </li></ul><ul><li>- Containers may not follow the standard. </li></ul><ul><li>- Containers may follow the standard but have different policies. </li></ul><ul><li>- Follow best practices: </li></ul><ul><li> </li></ul>
  50. Challenges <ul><li>Scaling is hard: </li></ul><ul><li>Easy to start and get some users. </li></ul>
  51. Challenges <ul><li>Scaling is hard: </li></ul><ul><li>Being popular in one social network can push your server to the limit... </li></ul>
  52. Challenges <ul><li>Scaling is hard: </li></ul><ul><li>... being popular in many networks will push you right over. </li></ul>
  53. Thank you :)! Discussion