Nowadays many modern web applications are solely relying on JavaScript to render their frontend. But if you want to create mashups, load data from many different places or include external widgets into your site, you are quickly running into boundaries because of browser and security restrictions. In this presentation I will talk about techniques helping you with such problems.

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

2. Wtf?

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

11. You?

12. Questions? Ask!

13. http://slideshare.net/bashofmann

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

15. Let‘s write a JS App

16. Don‘t reinvent the wheel!

17. Open Source
}

18. Open Standards

20. DEMO

21. History & Bookmarking

22. http://sammyjs.org/

23. DEMO

24. API Access

25. Same Origin Policy

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

27. DEMO

28. var html="<ul>";
for (var i=0; i < viewers.length; i++) {
html += "<li>" + viewers[i].displayName
+ "</li>";
}
html += "<ul>";
document.getElementById("#div").innerHTML =
html;

29. Templates

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

31. DEMO

32. Authorization

34. User-Agent Profile
+----------+ 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 | +----------------+
+----------+

35. DEMO

36. Storing the access
token

37. Cookie

38. Problem: Cookie is also
sent to the backend

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

40. DEMO

41. Mash it up!

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

43. OEmbed
• Retrieves embeddable content for a given link
http://www.flickr.com/services/oembed/?url=http%3A//
www.flickr.com/photos/bees/2341623661/
{
"version": "1.0",
"type": "photo",
"width": 240,
"height": 160,
"title": "ZB8T0193",
"url": "http://farm4.static.flickr.com/
3123/2341623661_7c99f48bbf_m.jpg",
"author_name": "Bees",
"author_url": "http://www.flickr.com/photos/bees/",
"provider_name": "Flickr",
"provider_url": "http://www.flickr.com/"
}
http://oembed.com/

44. The embedded result
cool video:

45. OEmbed Aggregation
•embed.ly
•supports 218 services over one
endpoint
•several libraries
•easy implementation
http://embed.ly/

46. DEMO

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

49. DEMO

50. Instant updates without
reloading

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

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

53. http://activitystrea.ms/

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

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

56. http://nodejs.org/

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

58. Browser Notifications

59. Tying it together
Notification
retrieve Stream with Hub
Ajax: request WebSockets:
Subscription new Post
subscribe at hub
challenge
ack
new post new post

60. DEMO

61. Including widgets

63. CONTAINER GADGET
meinvz.net apivz.net

65. DEMO

66. h"p://twi"er.com/Bas2anHofmann
h"p://studivz.net/bas2an
h"p://slideshare.net/bashofmann
bhofmann@vz.net
h"p://joind.in/talk/view/3506
h"p://developer.studivz.net