Save 37% off PRO during our Black Friday Sale! »

Mashing up JavaScript

Mashing up JavaScript

from Dutch PHP Conference 2012 with Sammy.js, OAuth2, OEmbed, PubsubHubbub and meteor

8e82eb7e128a14a16d642ae55227339b?s=128

Bastian Hofmann

June 08, 2012
Tweet

Transcript

  1. Mashing up JavaScript @BastianHofmann Advanced techniques for modern web applications

  2. Wtf?

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. • JavaScript Apps • CORS and OAuth2 • Local Storage

    • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • What‘s next?
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. Questions? Ask!

  22. http://speakerdeck.com/u/bastianhofmann

  23. Let‘s write a JS App

  24. https://github.com/bashofmann/statusnet_js_mashup_2nd

  25. CSS Bastian

  26. http://twitter.github.com/bootstrap

  27. History & Bookmarking

  28. www.example.com#Page

  29. www.example.com/Page

  30. http://sammyjs.org/

  31. API Access

  32. None
  33. Same Origin Policy

  34. Cross-Origin Resource Sharing Backend api.twitter.com Client client.net AJAX Access-Control-Allow-Origin: *

    http://www.w3.org/TR/cors/
  35. var html="<ul>"; for (var i=0; i < viewers.length; i++) {

    html += "<li>" + viewers[i].displayName + "</li>"; } html += "<ul>"; document.getElementById("#div").innerHTML = html; Where is the error?
  36. Templates

  37. Mustache.JS https://github.com/janl/mustache.js }

  38. DEMO

  39. Authorization

  40. None
  41. http://oauth.net/

  42. User-Agent Profile

  43. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com

  44. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize

  45. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize

  46. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize

  47. lanyrd.com HTTPS Redirect RedirectURI# accessToken twitter.co m/ authorize RedirectURI# accessToken

    lanyrd.com
  48. lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it

    to opening window Close popup lanyrd.com
  49. Same Origin Policy

  50. lanyrd.com HTTPS Ajax Request to API Access Token twitter.com

  51. Storing the access token

  52. Local Storage http://www.w3.org/TR/webstorage/

  53. DEMO

  54. Mash it up!

  55. cool video: http://www.youtube.com/ watch?v=OFzkTxiwziQ

  56. OEmbed http://oembed.com/

  57. http://www.youtube.com/watch?v=OyJd2qsRkNk

  58. None
  59. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json

  60. { "provider_url":"http:\/\/www.youtube.com\/", "title":"Jupiter Jones - Das Jahr in dem ich

    schlief (Musik Video)", "html":"\u003cobject width=\"500\" height=\"306\"\u003e \u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/ OyJd2qsRkNk?version=3\"\u003e\u003c\/param\u003e\u003cparam name= \"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e \u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e \u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/ OyJd2qsRkNk?version=3\" type=\"application\/x-shockwave-flash \" width=\"500\" height=\"306\" allowscriptaccess=\"always \" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object \u003e", "author_name":"St182", "height":306, "thumbnail_width":480, "width":500, "version":"1.0", "author_url":"http:\/\/www.youtube.com\/user\/Stinkfist182", "provider_name":"YouTube", "thumbnail_url":"http:\/\/i4.ytimg.com\/vi\/OyJd2qsRkNk\/ hqdefault.jpg", "type":"video", "thumbnail_height":360 }
  61. cool video:

  62. http://embed.ly/

  63. None
  64. Caja http://code.google.com/p/google-caja/

  65. DEMO

  66. Instant updates without reloading

  67. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth

    pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
  68. <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)"/>

  69. <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>
  70. http://activitystrea.ms/

  71. <link href="http://status.net.xyz:8061/ index.php/main/push/hub" rel="hub"/>

  72. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth

    pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
  73. http://nodejs.org/

  74. WebSockets http://dev.w3.org/html5/websockets/

  75. socket.io http://socket.io/

  76. http://search.npmjs.org/#/socket.io

  77. Browser Notifications

  78. retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post

    subscribe at hub challenge ack new post Notification new post
  79. DEMO

  80. None
  81. Meteor http://www.meteor.com

  82. https://github.com/bashofmann/meteor_shoutbox_demo

  83. DEMO

  84. http://meteor-shoutbox-demo.meteor.com/

  85. Rate and Comment https://joind.in/6233

  86. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://speakerdeck.com/u/bas2anhofmann mail@bas2anhofmann.de