Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

international PHP2011_Bastian Hofmann_Mashing up java script

1,346 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

international PHP2011_Bastian Hofmann_Mashing up java script

  1. 1. Bastian Hofmann / VZnet Netzwerke Ltd.Mashing up JavaScriptAdvanced techniques for modern webapplications
  2. 2. Wtf?
  3. 3. • JavaScript Apps• CORS and OAuth2• Local Storage• OEmbed and Caja• WebSockets, ActivityStrea.ms and PubsubHubbub• OpenSocial
  4. 4. You?
  5. 5. Questions? Ask!
  6. 6. http://slideshare.net/bashofmann
  7. 7. https://github.com/bashofmann/statusnet_js_mashup
  8. 8. Let‘s write a JS App
  9. 9. Don‘t reinvent the wheel!
  10. 10. Open Source}
  11. 11. Open Standards
  12. 12. DEMO
  13. 13. History & Bookmarking
  14. 14. http://sammyjs.org/
  15. 15. DEMO
  16. 16. API Access
  17. 17. Same Origin Policy
  18. 18. Cross-Origin Resource SharingClient Backendclient.net api.twitter.com AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/
  19. 19. DEMO
  20. 20. var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>";document.getElementById("#div").innerHTML =html;
  21. 21. Templates
  22. 22. Mustache.JS} https://github.com/janl/mustache.js
  23. 23. DEMO
  24. 24. Authorization
  25. 25. User-Agent Profile +----------+ Client Identifier +----------------+ | |>---(A)-- & Redirection URI --->| | | | | |End <--+ - - - +----(B)-- User authenticates -->| Authorization |User | | | Server | | |<---(C)--- Redirect URI -------<| | | Client | with Access Token | | | in | in Fragment +----------------+ | Browser | | | +----------------+ | |>---(D)--- Redirect URI ------->| | | | without Fragment | Web Server | | | | with Client | | (F) |<---(E)--- Web Page with ------<| Resource | | Access | Script | | | Token | +----------------+ +----------+
  26. 26. DEMO
  27. 27. Storing the access token
  28. 28. Cookie
  29. 29. Problem: Cookie is also sent to the backend
  30. 30. Local Storage http://www.w3.org/TR/webstorage/
  31. 31. DEMO
  32. 32. Mash it up!
  33. 33. cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ
  34. 34. OEmbed• Retrieves embeddable content for a given linkhttp://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/{        "version": "1.0",        "type": "photo",        "width": 240,        "height": 160,        "title": "ZB8T0193",        "url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",        "author_name": "Bees",        "author_url": "http://www.flickr.com/photos/bees/",        "provider_name": "Flickr",        "provider_url": "http://www.flickr.com/"} http://oembed.com/
  35. 35. The embedded result cool video:
  36. 36. OEmbed Aggregation•embed.ly•supports 218 services over one endpoint•several libraries•easy implementationhttp://embed.ly/
  37. 37. DEMO
  38. 38. Cajahttp://code.google.com/p/google-caja/
  39. 39. DEMO
  40. 40. Instant updates without reloading
  41. 41. <link rel="alternate"href="http://status.net.xyz:8061/index.php/api/statuses/user_timeline/3.atom"type="application/atom+xml" title="Notice feed for bastian(Atom)"/>
  42. 42. <entry> <activity:object-type>http://activitystrea.ms/schema/1.0/note</activity:object-type> <id>http://status.net.xyz:8061/index.php/notice/20</id> <title>hello from client</title> <content type="html">hello from client</content> <link rel="alternate" type="text/html" href="http://status.net.xyz:8061/index.php/notice/20"/> <activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb> <published>2011-05-23T21:07:33+00:00</published> <updated>2011-05-23T21:07:33+00:00</updated> <link rel="ostatus:conversation" href="http://status.net.xyz:8061/index.php/conversation/20"/> <georss:point>52.52437 13.41053</georss:point> <link rel="self" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <link rel="edit" type="application/atom+xml"href="http://status.net.xyz:8061/index.php/api/statuses/show/20.atom"/> <statusnet:notice_info local_id="20" source="api"favorite="false"repeated="false"></statusnet:notice_info></entry>
  43. 43. http://activitystrea.ms/
  44. 44. <link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>
  45. 45. PubSubHubbub retrieves Atom feed with Hub URL subscribes for feed acks Hub subscription pings every posts sth subscriberhttp://code.google.com/p/pubsubhubbub/
  46. 46. http://nodejs.org/
  47. 47. WebSockets http://dev.w3.org/html5/websockets/
  48. 48. Browser Notifications
  49. 49. Tying it together Notification retrieve Stream with HubAjax: request WebSockets:Subscription new Post subscribe at hub challenge ack new post new post
  50. 50. DEMO
  51. 51. Including widgets
  52. 52. CONTAINER GADGETmeinvz.net apivz.net
  53. 53. DEMO
  54. 54. h"p://twi"er.com/Bas2anHofmannh"p://studivz.net/bas2anh"p://slideshare.net/bashofmannbhofmann@vz.neth"p://joind.in/talk/view/3506h"p://developer.studivz.net

×