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.

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

20. http://slideshare.net/bashofmann

21. https://github.com/bashofmann/statusnet_js_mashup

22. Let‘s write a JS App

23. History & Bookmarking

24. www.example.com#Page

25. http://sammyjs.org/

26. API Access

28. Same Origin Policy

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

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

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/

70. localStorage.setItem("key", value);

71. localStorage.getItem("key");

72. DEMO

73. Mash it up!

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

75. OEmbed
http://oembed.com/

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

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

79. {
"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"u003eu003c/paramu003eu003cparam name=
"allowFullScreen" value="true"u003eu003c/paramu003e
u003cparam name="allowscriptaccess" value="always"u003e
u003c/paramu003eu003cembed src="http://www.youtube.com/v/
OyJd2qsRkNk?version=3" type="application/x-shockwave-flash
" width="500" height="306" allowscriptaccess="always
" allowfullscreen="true"u003eu003c/embedu003eu003c/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
}

80. cool video:

81. http://embed.ly/

83. Caja
http://code.google.com/p/google-caja/

84. html_sanitize(‘<script>alert(“foo“);</script>‘)

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>

90. http://activitystrea.ms/

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

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/

93. http://nodejs.org/

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

95. socket.io
http://socket.io/

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

97. Browser Notifications

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

99. webkitNotifications.requestPermission();

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

104. http://www.oexchange.org/

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>

109. http://search.npmjs.org/#/oexchange

110. DEMO

111. Rate and Comment
http://joind.in/3876

112. 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