Advanced JavaScript - Creating modern web applications

Web Developer Conference 2012, Hamburg

Transcript

1. Advanced JavaScript Creating Modern Web Applications @BastianHofmann
2. Wtf?
12. • 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. https://github.com/bashofmann/vm_js_mashup
26. CSS Bastian
27. http://twitter.github.com/bootstrap
28. History & Bookmarking
29. www.example.com#Page
30. www.example.com/Page
31. http://sammyjs.org/
32. API Access
34. Same Origin Policy
35. Cross-Origin Resource Sharing Backend api.twitter.com Client client.net AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/
36. 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?
37. Templates
38. Mustache.JS https://github.com/janl/mustache.js }
39. var app = Sammy('#main', function() { var feed = []; this.use(Mustache, 'ms'); this.get('/', function() { this.trigger('getFeed'); }); ... }); jQuery(function() { app.run(); });
40. 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'); });
41. <ul> {{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li> {{/feed}} </ul>
42. Authorization
44. http://oauth.net/
45. User-Agent Profile
46. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com
47. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize
48. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize
49. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize
50. lanyrd.com HTTPS Redirect RedirectURI# accessToken twitter.co m/ authorize RedirectURI# accessToken lanyrd.com
51. lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it to opening window Close popup lanyrd.com
52. Same Origin Policy
53. lanyrd.com HTTPS Ajax Request to API Access Token twitter.com
54. Storing the access token
55. Local Storage http://www.w3.org/TR/webstorage/
56. this.around(function(callback) { ... if (! oauth2.isLoggedIn()) { this.redirect('/Login'); return; } callback(); });
57. this.get('/Login', function() { this.partial('login.ms'); });
58. <form action="/Login" method="post"> <input type="submit" value="Login"/> </form>
59. this.post('/Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/ authorize?response_toke=token&client_id=' + consumerKey); });
60. <script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close(); </script>
61. <form action="/Feed" method="post"> <textarea name="status"></textarea> <inputtype="submit" value="send"/> </form>
62. 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('/'); } }); });
63. DEMO
64. Mash it up!
65. cool video: http://www.youtube.com/ watch?v=OFzkTxiwziQ
66. OEmbed http://oembed.com/
67. http://www.youtube.com/watch?v=OyJd2qsRkNk
69. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json
70. { "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 }
71. cool video:
72. http://embed.ly/
73. this.bind('changed', function() { embeds = []; $('div.feed-item h3').embedly({ key:'...', maxWidth: 450, wmode: 'transparent', method: 'after' }); });
75. Caja http://code.google.com/p/google-caja/
76. html_sanitize(result.html);
77. DEMO
78. Instant updates without reloading
79. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
80. <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)"/>
81. <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>
82. http://activitystrea.ms/
83. <link href="http://status.net.xyz:8061/ index.php/main/push/hub" rel="hub"/>
84. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
85. http://nodejs.org/
86. HTTP Server for PubsubHubbub
87. WebSockets http://dev.w3.org/html5/websockets/
88. socket.io http://socket.io/
89. (Webkit) Browser Notifications
90. retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post subscribe at hub challenge ack new post Notification new post
91. DEMO
93. Meteor http://www.meteor.com
94. https://github.com/bashofmann/meteor_shoutbox_demo
95. DEMO
96. 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 mail@bas2anhofmann.de