This document discusses advanced JavaScript techniques for building modern web applications, including: CORS and OAuth2 for API access; local storage for caching access tokens; templates with Mustache.js; WebSockets, ActivityStreams, and PubSubHubbub for real-time updates; and including third-party widgets using containers and gadgets. Live demos are provided of various techniques.

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