This document discusses advanced JavaScript techniques for building modern web applications. It covers topics like JavaScript apps, CORS and OAuth2 for API access, local storage, templates with Mustache.js, and real-time updates using WebSockets, PubSubHubbub and ActivityStreams. The document provides code examples for implementing OAuth2 login flows, making API requests, storing access tokens, and rendering data with templates. It also demonstrates a sample app that retrieves a feed and allows posting new entries.

1. Mashing up JavaScript
Advanced techniques for modern web
applications
Bastian Hofmann
VZnet Netzwerke Ltd.

2. Wtf?

10. • JavaScript Apps
• CORS and OAuth2
• Local Storage
• OEmbed and Caja
• WebSockets, ActivityStrea.ms and
PubsubHubbub

15. http://slideshare.net/bashofmann

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

17. Let‘s write a JS App

18. History & Bookmarking

19. www.example.com#Page

20. http://sammyjs.org/

21. API Access

23. Same Origin Policy

24. Cross-Origin Resource
Sharing
Client Backend
client.net api.twitter.com
AJAX
Access-Control-Allow-Origin: *
http://www.w3.org/TR/cors/

25. 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?

26. Templates

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

28. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});

29. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});

30. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});

31. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});

32. var feed = [];
var app = Sammy('#main', function() {
this.use(Sammy.Mustache, 'ms');
this.get('#/', function() {
this.trigger('getFeed');
});
...
});
jQuery(function() {
app.run('#/');
});

33. 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');
});

34. 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');
});

35. 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');
});

36. 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');
});

37. 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');
});

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. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>

41. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>

42. <ul>
{{#feed}}
<li>
<p>{{{statusnet_html}}}</p>
<p>{{created_at}}
{{#user}}
{{name}}
{{/user}}
</p>
</li>
{{/feed}}
</ul>

43. DEMO

44. Authorization

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

47. this.bind('getFeed', function() {
oauth2.retrieveAccessToken();
if (! oauth2.store['access_token']) {
this.redirect('#Login');
return;
}
...
});

48. this.bind('getFeed', function() {
oauth2.retrieveAccessToken();
if (! oauth2.store['access_token']) {
this.redirect('#Login');
return;
}
...
});

49. this.get('#Login', function() {
var consumerKey = 'abc....';
window.open('http://status.net/api/oauth2/
authorize?response_toke=token&client_id=' +
consumerKey);
});

50. this.get('#Login', function() {
var consumerKey = 'abc....';
window.open('http://status.net/api/oauth2/
authorize?response_toke=token&client_id=' +
consumerKey);
});

51. <script type="text/javascript">
var fragment = location.hash.substr(1);
opener.parent.oauth2.storeToken(fragment);
window.close();
</script>

52. <script type="text/javascript">
var fragment = location.hash.substr(1);
opener.parent.oauth2.storeToken(fragment);
window.close();
</script>

53. <script type="text/javascript">
var fragment = location.hash.substr(1);
opener.parent.oauth2.storeToken(fragment);
window.close();
</script>

54. <form action="#Entry" method="post">
<textarea name="comment"></textarea>
<input type="submit" value="send"/>
</form>

55. <form action="#Entry" method="post">
<textarea name="comment"></textarea>
<input type="submit" value="send"/>
</form>

56. <form action="#Entry" method="post">
<textarea name="comment"></textarea>
<input type="submit" value="send"/>
</form>

57. 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('#/');
}
});
});

58. 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('#/');
}
});
});

59. 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('#/');
}
});
});

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['comment']
},
success: function() {
that.redirect('#/');
}
});
});

61. 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('#/');
}
});
});

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. Storing the access
token

64. Local Storage
http://www.w3.org/TR/webstorage/

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

66. localStorage.getItem("key");

67. DEMO

68. Mash it up!

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

70. OEmbed
http://oembed.com/

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

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

74. {
"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
}

75. cool video:

76. http://embed.ly/

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

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

80. DEMO

81. Instant updates without
reloading

82. PubSubHubbub
retrieves Atom feed with Hub URL
subscribes
for feed
acks
Hub
subscription
pings every posts sth
subscriber
http://code.google.com/p/pubsubhubbub/

83. <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)"/>

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

85. http://activitystrea.ms/

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

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. http://nodejs.org/

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

90. socket.io
http://socket.io/

91. Browser Notifications

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

93. webkitNotifications.requestPermission();

94. Notification
retrieve Stream with Hub
Ajax: request WebSockets:
Subscription new Post
subscribe at hub
challenge
ack
new post new post

95. DEMO

96. Rate and Comment
http://bit.ly/oscon_js_mashup

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