Mashing up JavaScript

Transcript

1. Mashing up JavaScript @BastianHofmann Advanced techniques for modern web applications

2. Wtf?

3. None
4. None
5. None
6. None
7. None
8. None
9. None
10. None
11. None
12. None
13. None

14. • JavaScript Apps • CORS and OAuth2 • Local Storage

    • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • What‘s next?
15. None
16. None
17. None
18. None
19. None
20. None

21. Questions? Ask!

22. http://speakerdeck.com/u/bastianhofmann

23. Let‘s write a JS App

24. https://github.com/bashofmann/statusnet_js_mashup_2nd

25. CSS Bastian

26. http://twitter.github.com/bootstrap

27. History & Bookmarking

28. www.example.com#Page

29. www.example.com/Page

30. http://sammyjs.org/

31. API Access

32. None

33. Same Origin Policy

34. Cross-Origin Resource Sharing Backend api.twitter.com Client client.net AJAX Access-Control-Allow-Origin: *

    http://www.w3.org/TR/cors/

35. var html="<ul>"; for (var i=0; i < viewers.length; i++) {

    html += "<li>" + viewers[i].displayName + "</li>"; } html += "<ul>"; document.getElementById("#div").innerHTML = html; Where is the error?

36. Templates

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

38. DEMO

39. Authorization

40. None

41. http://oauth.net/

42. User-Agent Profile

43. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com

44. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize

45. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize

46. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize

47. lanyrd.com HTTPS Redirect RedirectURI# accessToken twitter.co m/ authorize RedirectURI# accessToken

    lanyrd.com

48. lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it

    to opening window Close popup lanyrd.com

49. Same Origin Policy

50. lanyrd.com HTTPS Ajax Request to API Access Token twitter.com

51. Storing the access token

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

53. DEMO

54. Mash it up!

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

56. OEmbed http://oembed.com/

57. http://www.youtube.com/watch?v=OyJd2qsRkNk

58. None

59. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json

60. { "provider_url":"http:\/\/www.youtube.com\/", "title":"Jupiter Jones - Das Jahr in dem ich

    schlief (Musik Video)", "html":"\u003cobject width=\"500\" height=\"306\"\u003e \u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/ OyJd2qsRkNk?version=3\"\u003e\u003c\/param\u003e\u003cparam name= \"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e \u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e \u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/ OyJd2qsRkNk?version=3\" type=\"application\/x-shockwave-flash \" width=\"500\" height=\"306\" allowscriptaccess=\"always \" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object \u003e", "author_name":"St182", "height":306, "thumbnail_width":480, "width":500, "version":"1.0", "author_url":"http:\/\/www.youtube.com\/user\/Stinkfist182", "provider_name":"YouTube", "thumbnail_url":"http:\/\/i4.ytimg.com\/vi\/OyJd2qsRkNk\/ hqdefault.jpg", "type":"video", "thumbnail_height":360 }

61. cool video:

62. http://embed.ly/

63. None

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

65. DEMO

66. Instant updates without reloading

67. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth

    pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/

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

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

70. http://activitystrea.ms/

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

72. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth

    pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/

73. http://nodejs.org/

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

75. socket.io http://socket.io/

76. http://search.npmjs.org/#/socket.io

77. Browser Notifications

78. retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post

    subscribe at hub challenge ack new post Notification new post

79. DEMO

80. None

81. Meteor http://www.meteor.com

82. https://github.com/bashofmann/meteor_shoutbox_demo

83. DEMO

84. http://meteor-shoutbox-demo.meteor.com/

85. Rate and Comment https://joind.in/6233

86. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://speakerdeck.com/u/bas2anhofmann [email protected]