Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mashing up JavaScript

5,475 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
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for pointing it out. I'll probably leave the error as a showcase why you should use templates instead of doing it like this.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • On slide 28, the second UL reference should be a closing tag.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×