Mashing up JavaScript
1 like1,100 views
This document discusses mashing up JavaScript applications. It covers topics like CORS and OAuth2 for API access, using local storage to store access tokens, templates with Mustache.js, and implementing real-time updates using WebSockets, ActivityStreams, and PubSubHubbub. Code examples are provided for building a JavaScript client that retrieves data from an API using OAuth2 authorization, renders content with templates, and allows posting new entries.
![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?](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-30-320.jpg)
![var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-33-320.jpg)
![var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-34-320.jpg)
![var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-35-320.jpg)
![var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-36-320.jpg)
![var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-37-320.jpg)
![this.bind('getFeed', function() {
oauth2.retrieveAccessToken();
if (! oauth2.store['access_token']) {
this.redirect('#Login');
return;
}
...
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-52-320.jpg)
![this.bind('getFeed', function() {
oauth2.retrieveAccessToken();
if (! oauth2.store['access_token']) {
this.redirect('#Login');
return;
}
...
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-53-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-62-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-63-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-64-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-65-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-66-320.jpg)
![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['comment']
},
success: function() {
that.redirect('#/');
}
});
});](https://image.slidesharecdn.com/ipcmashingupjavascript-111011091337-phpapp01/85/Mashing-up-JavaScript-67-320.jpg)
Mashing up JavaScript
- 1. Bastian Hofmann ResearchGate GmbH Mashing up JavaScript
- 2. Wtf?
- 14. • JavaScript Apps • CORS and OAuth2 • Local Storage • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • OExchange
- 22. Let‘s write a JS App
- 26. API Access
- 29. Cross-Origin Resource Sharing Client Backend client.net api.twitter.com AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/
- 30. 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?
- 31. Templates
- 33. var feed = []; var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run('#/'); });
- 34. var feed = []; var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run('#/'); });
- 35. var feed = []; var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run('#/'); });
- 36. var feed = []; var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run('#/'); });
- 37. var feed = []; var app = Sammy('#main', function() { this.use(Sammy.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. 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'); });
- 40. 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'); });
- 41. 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'); });
- 42. 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'); });
- 43. 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'); });
- 44. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
- 45. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
- 46. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
- 47. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
- 48. DEMO
- 49. Authorization
- 51. OAuth 2 +----------+ Client Identifier +----------------+ | |>---(A)-- & Redirection URI --->| | | | | | End <--+ - - - +----(B)-- User authenticates -->| Authorization | User | | | Server | | |<---(C)--- Redirect URI -------<| | | Client | with Access Token | | | in | in Fragment +----------------+ | Browser | | | +----------------+ | |>---(D)--- Redirect URI ------->| | | | without Fragment | Web Server | | | | with Client | | (F) |<---(E)--- Web Page with ------<| Resource | | Access | Script | | | Token | +----------------+ +----------+ http://tools.ietf.org/html/draft-ietf-oauth-v2
- 52. this.bind('getFeed', function() { oauth2.retrieveAccessToken(); if (! oauth2.store['access_token']) { this.redirect('#Login'); return; } ... });
- 53. this.bind('getFeed', function() { oauth2.retrieveAccessToken(); if (! oauth2.store['access_token']) { this.redirect('#Login'); return; } ... });
- 54. this.get('#Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/ authorize?response_toke=token&client_id=' + consumerKey); });
- 55. this.get('#Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/ authorize?response_toke=token&client_id=' + consumerKey); });
- 56. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>
- 57. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>
- 58. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>
- 59. <form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/> </form>
- 60. <form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/> </form>
- 61. <form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/> </form>
- 62. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 63. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 64. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 65. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 66. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 67. 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['comment'] }, success: function() { that.redirect('#/'); } }); });
- 68. Storing the access token
- 69. Local Storage http://www.w3.org/TR/webstorage/
- 72. DEMO
- 73. Mash it up!
- 75. OEmbed http://oembed.com/
- 78. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json
- 80. cool video:
- 85. DEMO
- 86. Instant updates without reloading
- 87. PubSubHubbub retrieves Atom feed with Hub URL subscribes for feed acks Hub subscription pings every posts sth subscriber http://code.google.com/p/pubsubhubbub/
- 88. <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)"/>
- 89. <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>
- 92. PubSubHubbub retrieves Atom feed with Hub URL subscribes for feed acks Hub subscription pings every posts sth subscriber http://code.google.com/p/pubsubhubbub/
- 95. socket.io http://socket.io/
- 100. Notification retrieve Stream with Hub Ajax: request WebSockets: Subscription new Post subscribe at hub challenge ack new post new post
- 101. DEMO
- 102. Sharing
- 103. Nascar Problem
- 105. 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}
- 106. http://example.com/.well- known/host-meta http://tools.ietf.org/html/draft-nottingham-site-meta
- 107. <?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>
- 108. <?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>
- 110. DEMO
- 111. Rate and Comment http://joind.in/3876