Mashing up JavaScript

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. Questions? Ask!

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

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 http://joind.in/6294

92. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://speakerdeck.com/u/bas2anhofmann [email protected]