Mashing up JavaScript

from Dutch PHP Conference 2012 with Sammy.js, OAuth2, OEmbed, PubsubHubbub and meteor

Transcript

1. Mashing up JavaScript @BastianHofmann Advanced techniques for modern web applications
2. Wtf?
14. • JavaScript Apps • CORS and OAuth2 • Local Storage • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • What‘s next?
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
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
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
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/
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
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 mail@bas2anhofmann.de