Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mashing up JavaScript

Mashing up JavaScript

Advanced techniques for modern web applications

Slides from Confoo 2012

8e82eb7e128a14a16d642ae55227339b?s=128

Bastian Hofmann

February 29, 2012
Tweet

Transcript

  1. Mashing up JavaScript Bastian Hofmann 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 • OExchange
  15. None
  16. None
  17. None
  18. None
  19. None
  20. http://slideshare.net/bashofmann

  21. Questions? Ask!

  22. Let‘s write a JS App

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

  24. CSS Bastian

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

  26. History & Bookmarking

  27. www.example.com#Page

  28. www.example.com/Page

  29. http://sammyjs.org/

  30. API Access

  31. None
  32. Same Origin Policy

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

    http://www.w3.org/TR/cors/
  34. 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?
  35. Templates

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

  37. DEMO

  38. Authorization

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

  41. User-Agent Profile

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

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

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

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

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

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

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

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

  50. Storing the access token

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

  52. DEMO

  53. Mash it up!

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

  55. OEmbed http://oembed.com/

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

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

  59. { "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 }
  60. cool video:

  61. http://embed.ly/

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

  64. DEMO

  65. Instant updates without reloading

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

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

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

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

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

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

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

  74. socket.io http://socket.io/

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

  76. Browser Notifications

  77. webkitNotifications.createNotification(image, title, text).show();

  78. webkitNotifications.requestPermission();

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

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

  81. Sharing

  82. Nascar Problem

  83. http://www.oexchange.org/

  84. http://www.example.com/share.php?url={URI} &title={title for the content} &description={short description of the content}&ctype=flash&swfurl={SWF

    URI} &height={preferred SWF height} &width={preferred swf width} &screenshot={screenshot URI}
  85. http://example.com/.well- known/host-meta http://tools.ietf.org/html/draft-nottingham-site-meta

  86. <?xml version='1.0' encoding='UTF-8'?> <XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0' xmlns:hm='http://host-meta.net/xrd/1.0'> <hm:Host>www.meinvz.net</hm:Host> <Link rel="http://oexchange.org/spec/0.8/rel/resident-target" type="application/xrd+xml"

    href="http://www.example.com/oexchange.xrd" > </Link> </XRD>
  87. <?xml version='1.0' encoding='UTF-8'?> <XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0"> <Subject>http://www.example.com/linkeater</Subject> <Property type="http://www.oexchange.org/spec/0.8/prop/vendor"> Examples Inc.</Property>

    <Property type="http://www.oexchange.org/spec/0.8/prop/title"> A Link-Accepting Service</Property> <Link rel= "icon" href="http://www.example.com/favicon.ico" type="image/vnd.microsoft.icon" /> <Link rel= "http://www.oexchange.org/spec/0.8/rel/offer" href="http://www.example.com/linkeater/offer.php" type="text/html" /> </XRD>
  88. http://search.npmjs.org/#/oexchange

  89. DEMO

  90. Mobile

  91. Rate and Comment https://joind.in/4670

  92. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://slideshare.net/bashofmann mail@bas2anhofmann.de