Mashing up JavaScript
•
5 likes•3,695 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Mashing up JavaScript
Similar to Mashing up JavaScript (20)
More from Bastian Hofmann
More from Bastian Hofmann (20)
Recently uploaded
Recently uploaded (20)
Mashing up JavaScript
- 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!
- 15. Let‘s write a JS App
- 16. Don‘t reinvent the wheel!
- 17. Open Source }
- 18. Open Standards
- 20. DEMO
- 23. DEMO
- 24. API Access
- 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
- 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!
- 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
- 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>
- 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/
- 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
- 63. CONTAINER GADGET meinvz.net apivz.net
- 65. DEMO