Mashing up JavaScript

5,250 views

Published on

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.

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,250
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
59
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Mashing up JavaScript

  1. 1. Bastian Hofmann / VZnet Netzwerke Ltd.Mashing up JavaScriptAdvanced techniques for modern webapplications
  2. 2. Wtf?
  3. 3. • JavaScript Apps• CORS and OAuth2• Local Storage• OEmbed and Caja• WebSockets, ActivityStrea.ms and PubsubHubbub• OpenSocial
  4. 4. You?
  5. 5. Questions? Ask!
  6. 6. http://slideshare.net/bashofmann
  7. 7. https://github.com/bashofmann/statusnet_js_mashup
  8. 8. Let‘s write a JS App
  9. 9. Don‘t reinvent the wheel!
  10. 10. Open Source}
  11. 11. Open Standards
  12. 12. DEMO
  13. 13. History & Bookmarking
  14. 14. http://sammyjs.org/
  15. 15. DEMO
  16. 16. API Access
  17. 17. Same Origin Policy
  18. 18. Cross-Origin Resource SharingClient Backendclient.net api.twitter.com AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/
  19. 19. DEMO
  20. 20. var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>";document.getElementById("#div").innerHTML =html;
  21. 21. Templates
  22. 22. Mustache.JS} https://github.com/janl/mustache.js
  23. 23. DEMO
  24. 24. Authorization
  25. 25. 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 | +----------------+ +----------+
  26. 26. DEMO
  27. 27. Storing the access token
  28. 28. Cookie
  29. 29. Problem: Cookie is also sent to the backend
  30. 30. Local Storage http://www.w3.org/TR/webstorage/
  31. 31. DEMO
  32. 32. Mash it up!
  33. 33. cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ
  34. 34. OEmbed• Retrieves embeddable content for a given linkhttp://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/
  35. 35. The embedded result cool video:
  36. 36. OEmbed Aggregation•embed.ly•supports 218 services over one endpoint•several libraries•easy implementationhttp://embed.ly/
  37. 37. DEMO
  38. 38. Cajahttp://code.google.com/p/google-caja/
  39. 39. DEMO
  40. 40. Instant updates without reloading
  41. 41. <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)"/>
  42. 42. <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>
  43. 43. http://activitystrea.ms/
  44. 44. <link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>
  45. 45. PubSubHubbub retrieves Atom feed with Hub URL subscribes for feed acks Hub subscription pings every posts sth subscriberhttp://code.google.com/p/pubsubhubbub/
  46. 46. http://nodejs.org/
  47. 47. WebSockets http://dev.w3.org/html5/websockets/
  48. 48. Browser Notifications
  49. 49. Tying it together Notification retrieve Stream with HubAjax: request WebSockets:Subscription new Post subscribe at hub challenge ack new post new post
  50. 50. DEMO
  51. 51. Including widgets
  52. 52. CONTAINER GADGETmeinvz.net apivz.net
  53. 53. DEMO
  54. 54. h"p://twi"er.com/Bas2anHofmannh"p://studivz.net/bas2anh"p://slideshare.net/bashofmannbhofmann@vz.neth"p://joind.in/talk/view/3506h"p://developer.studivz.net

×