Mashing up JavaScript

Transcript

1. Mashing up JavaScript @BastianHofmann

2. Wtf?

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

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

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

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

21. Let‘s write a JS App

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

23. None

24. CSS Bastian

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

26. History & Bookmarking

27. www.example.com#Page

28. www.example.com/Page

29. http://sammyjs.org/

30. API Access

31. None

32. Same Origin Policy

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

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

34. 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?

35. Templates

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

37. var app = Sammy('#main', function() { var feed = [];

    this.use(Mustache, 'ms'); this.get('/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run(); });

38. this.bind('getFeed', function() { var that = this; $.ajax({ url: 'http://..._timeline.json',

    success: function(response) { feed = response; that.trigger('renderFeed'); } }); }); this.bind('renderFeed', function() { this.feed = feed; this.partial('js/templates/feed.ms'); });

39. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li>

    {{/feed}} </ul>

40. Authorization

41. None

42. http://oauth.net/

43. User-Agent Profile

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

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

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

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

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

    lanyrd.com

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

    to opening window Close popup lanyrd.com

50. Same Origin Policy

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

52. Storing the access token

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

54. this.around(function(callback) { ... if (! oauth2.isLoggedIn()) { this.redirect('/Login'); return; }

    callback(); });

55. this.get('/Login', function() { this.partial('login.ms'); });

56. <form action="/Login" method="post"> <input type="submit" value="Login"/> </form>

57. this.post('/Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/ authorize?response_toke=token&client_id=' +

    consumerKey); });

58. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>

59. <form action="/Feed" method="post"> <textarea name="status"></textarea> <inputtype="submit" value="send"/> </form>

60. this.post('/Entry', function() { var that = this; $.ajax({ url: 'http://status.net/.../

    update.json?oauth_token=' + oauth2.store['access_token'], type: 'POST', data: { 'status': that.params['status'] }, success: function() { that.redirect('/'); } }); });

61. DEMO

62. Mash it up!

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

64. OEmbed http://oembed.com/

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

66. None

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

68. { "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 }

69. cool video:

70. http://embed.ly/

71. this.bind('changed', function() { embeds = []; $('div.feed-item h3').embedly({ key:'...', maxWidth:

    450, wmode: 'transparent', method: 'after' }); });
72. None

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

74. html_sanitize(result.html);

75. DEMO

76. Instant updates without reloading

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

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

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

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

80. http://activitystrea.ms/

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

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

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

83. http://nodejs.org/

84. HTTP Server for PubsubHubbub

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

86. socket.io http://socket.io/

87. (Webkit) Browser Notifications

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

    subscribe at hub challenge ack new post Notification new post

89. DEMO

90. None

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

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

93. DEMO

94. Did you like this talk? http://bit.ly/oscon12_js_mashup h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann h"p://speakerdeck.com/u/bas2anhofmann

    h"ps://github.com/bashofmann [email protected]