My Mashing up JavaScript presentation from OSCON

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