Mashing up JavaScript

Advanced techniques for modern web applications

Slides from Confoo 2012

Transcript

1. Mashing up JavaScript Bastian Hofmann Advanced techniques for modern web applications
2. Wtf?
14. • JavaScript Apps • CORS and OAuth2 • Local Storage • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • OExchange
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
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
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
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/
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