international PHP2011_Bastian Hofmann_Mashing up java script

1,316 views

Published on

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
1,316
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×