Mashing up JavaScript

Transcript

1. Mashing up JavaScript @BastianHofmann
2. Wtf?
12. • JavaScript Apps • CORS and OAuth2 • Local Storage • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • What‘s next?
20. http://speakerdeck.com/u/bastianhofmann
21. Let‘s write a JS App
22. 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. var app = Sammy('#main', function() { var feed = []; this.use(Mustache, 'ms'); this.get('/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run(); });
38. this.bind('getFeed', function() { var that = this; $.ajax({ url: 'http://..._timeline.json', success: function(response) { feed = response; that.trigger('renderFeed'); } }); }); this.bind('renderFeed', function() { this.feed = feed; this.partial('js/templates/feed.ms'); });
39. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
40. Authorization
42. http://oauth.net/
43. User-Agent Profile
44. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com
45. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize
46. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize
47. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize
48. lanyrd.com HTTPS Redirect RedirectURI# accessToken twitter.co m/ authorize RedirectURI# accessToken lanyrd.com
49. lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it to opening window Close popup lanyrd.com
50. Same Origin Policy
51. lanyrd.com HTTPS Ajax Request to API Access Token twitter.com
52. Storing the access token
53. Local Storage http://www.w3.org/TR/webstorage/
54. this.around(function(callback) { ... if (! oauth2.isLoggedIn()) { this.redirect('/Login'); return; } callback(); });
55. this.get('/Login', function() { this.partial('login.ms'); });
56. <form action="/Login" method="post"> <input type="submit" value="Login"/> </form>
57. this.post('/Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/ authorize?response_toke=token&client_id=' + consumerKey); });
58. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>
59. <form action="/Feed" method="post"> <textarea name="status"></textarea> <inputtype="submit" value="send"/> </form>
60. this.post('/Entry', function() { var that = this; $.ajax({ url: 'http://status.net/.../ update.json?oauth_token=' + oauth2.store['access_token'], type: 'POST', data: { 'status': that.params['status'] }, success: function() { that.redirect('/'); } }); });
61. DEMO
62. Mash it up!
63. cool video: http://www.youtube.com/ watch?v=OFzkTxiwziQ
64. OEmbed http://oembed.com/
65. http://www.youtube.com/watch?v=OyJd2qsRkNk
67. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json
68. { "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 }
69. cool video:
70. http://embed.ly/
71. this.bind('changed', function() { embeds = []; $('div.feed-item h3').embedly({ key:'...', maxWidth: 450, wmode: 'transparent', method: 'after' }); });
73. Caja http://code.google.com/p/google-caja/
74. html_sanitize(result.html);
75. DEMO
76. Instant updates without reloading
77. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
78. <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)"/>
79. <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>
80. http://activitystrea.ms/
81. <link href="http://status.net.xyz:8061/ index.php/main/push/hub" rel="hub"/>
82. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
83. http://nodejs.org/
84. HTTP Server for PubsubHubbub
85. WebSockets http://dev.w3.org/html5/websockets/
86. socket.io http://socket.io/
87. (Webkit) Browser Notifications
88. retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post subscribe at hub challenge ack new post Notification new post
89. DEMO
91. Meteor http://www.meteor.com
92. https://github.com/bashofmann/meteor_shoutbox_demo
93. DEMO
94. Did you like this talk? http://bit.ly/oscon12_js_mashup h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann h"p://speakerdeck.com/u/bas2anhofmann h"ps://github.com/bashofmann mail@bas2anhofmann.de