Workshop Advances Javascript

JavaScript Days

Transcript

1. Advanced JavaScript Creating Modern Web Applications @BastianHofmann
2. But what will you learn?
12. • JavaScript Apps • CORS and OAuth2 • Local Storage • OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • OExchange • Integrating it in your existing Application • Web Application Architecture
22. Questions? Ask!
23. http://speakerdeck.com/u/bastianhofmann
24. ?
25. Let‘s write a JS App
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. JSONP
36. Cross-Origin Resource Sharing Backend api.twitter.com Client client.net AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/
37. 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?
38. Templates
39. Mustache.JS https://github.com/janl/mustache.js }
41. https://github.com/bashofmann/js_mashup_workshop
42. http://git-scm.com/
43. $ git clone git@github.com:bashofmann/ js_mashup_workshop.git ... $ git add newFile $ git add changedFile $ git commit -m 'message' $ git push origin master http://git-scm.com/book/en/Git-Basics-Getting-a-Git- Repository
45. https://c9.io/
46. $ git remote add upstream https:// github.com/bashofmann/ js_mashup_workshop.git $ git reset --hard $ git clean -d -f $ git fetch upstream $ git merge upstream/master https://help.github.com/articles/syncing-a-fork
47. DEMO
48. Authorization
50. http://tools.ietf.org/html/rfc5849
51. lanyrd.com twitter.com Pre Registration of Client at Twitter: - Shared Consumer Key - Shared Consumer Secret
52. HTTP POST Connect with Twitter lanyrd.com
53. twitter.com HTTP POST Connect with Twitter HTTP GET Consumer Key Redirect URI Signature (Consumer Secret) lanyrd.com
54. twitter.com HTTP POST Connect with Twitter Request Token Request Token Secret lanyrd.com
55. http://twitter.com/authorize? requestToken=... HTTP Redirect lanyrd.com
56. HTTP GET twitter.com/ authorize
57. Login twitter.com/ authorize
58. Grant permission twitter.com/ authorize Create verifier and bind it to User and Request Token
59. Redirect URI?verifier=...&requestToken=.. HTTP Redirect twitter.com/ authorize
60. HTTP GET lanyrd.com (RedirectURI? verifier=...)
61. HTTP GET HTTP GET Consumer Key, RequestToken Verifier Signature (Consumer & Request Token Secret) twitter.com lanyrd.com
62. HTTP GET Access Token Access Token Secret twitter.com lanyrd.com
63. HTTP GET API Request Consumer Key, Access Token Signature (Consumer & Access Token Secret) twitter.com lanyrd.com
64. POST /oauth/request_token HTTP/1.1 Host: api.twitter.com Authorization: OAuth oauth_consumer_key=“abcdef“, oauth_signature_method=“HMAC-SHA1“, oauth_timestamp=“137131200“, oauth_nonce=“gggg“, oauth_callback=“http%3A%2F %2Fexample.com%2Fcallback“ oauth_signature=“...“
65. HTTP/1.1 200 OK Content-Type: application/x-www-form- urlencode oauth_token=defghi&oauth_token_secret=jkl mnop&oauth_callback_confirmed=true
66. HTTP/1.1 302 Found Location: https://api.twitter.com/oauth/ authorization?oauth_token=defghi
67. HTTP/1.1 302 Found Location: http://example.com/callback? oauth_token=defghi&oauth_verifier=qrstuvw
68. POST /oauth/access_token HTTP/1.1 Host: api.twitter.com Authorization: OAuth oauth_consumer_key=“abcdef“, oauth_token=“defghi“ oauth_signature_method=“HMAC-SHA1“, oauth_timestamp=“137131201“, oauth_nonce=“hhhhh“, oauth_verifier=“qrstuvw“ oauth_signature=“...“
69. HTTP/1.1 200 OK Content-Type: application/x-www-form- urlencode oauth_token=xzyabc&oauth_token_secret=defg hijk
70. POST /1/statuses/update.json HTTP/1.1 Host: api.twitter.com Authorization: OAuth oauth_consumer_key=“abcdef“, oauth_token=“ xzyabc“ oauth_signature_method=“HMAC-SHA1“, oauth_timestamp=“137131203“, oauth_nonce=“iiiiiii“, oauth_signature=“...“ status=New %20Tweet&trim_user=true&include_entities=tru e
71. Signatures
72. GET /photos/vacation.jpg? oauth_consumer_key=123&oauth_nonce= 456&oauth_signature_method=HMAC- SHA1&oauth_timestamp=1191242096&oau th_token=789&oauth_version=1.0 HTTP/1.1 Host: photos.example.net
73. GET&http%3A%2F %2Fphotos.example.net%2Fphotos %2Fvacation.jpg&oauth_consumer_key %3D123%26oauth_nonce %3D456%26oauth_signature_method %3DHMAC-SHA1%26oauth_timestamp %3D1191242096%26oauth_token %3D789%26oauth_version%3D1.0
74. PLAINTEXT
75. HMAC-SHA1 Salt: consumerSecret(&tokenSecret)
76. RSA-SHA1 Public/Private Key
77. Problems Does not work well with non web or JavaScript based clients The „Invalid Signature“ Problem Complicated Flow, many requests
78. How to fix it?
79. http://oauth.net/
80. http://tools.ietf.org/html/draft-ietf-oauth-v2
81. http://tools.ietf.org/html/draft-ietf-oauth-v2 What‘s new in OAuth2? (Draft 10) Different client profiles No signatures No Token Secrets Cookie-like Bearer Token No Request Tokens Much more flexible regarding extensions Mandatory TSL/SSL
82. Web-Server Profile
83. lanyrd.com twitter.com Pre Registration of Client at Twitter: - Shared Client ID - Shared Client Secret - Redirect URI
84. HTTP(S) POST Connect with Twitter lanyrd.com
85. http://twitter.com/authorize?&clientId=... HTTPS Redirect lanyrd.com
86. HTTPS GET twitter.com/ authorize
87. Login twitter.com/ authorize
88. Grant permission twitter.com/ authorize Create authorization code and bind it to User and ClientID
89. Redirect URI?authorizationCode=... HTTPS Redirect twitter.com/ authorize
90. HTTPS GET lanyrd.com (RedirectURI? authorizationCode= ...)
91. HTTPS GET HTTPS GET Consumer Key Authorization Code Consumer Secret twitter.com lanyrd.com
92. HTTPS GET Access Token (Refresh Token) twitter.com lanyrd.com
93. HTTPS GET HTTPS API Request Access Token twitter.com lanyrd.com
94. HTTPS GET HTTPS GET Consumer Key Refresh Token Consumer Secret twitter.com lanyrd.com
95. HTTPS GET Access Token Refresh Token twitter.com lanyrd.com
96. HTTPS GET API Request with Access Token twitter.com lanyrd.com
97. HTTP/1.1 302 Found Location: https://api.twitter.com/oauth2/ authorize? response_type=code&client_id=abcdefg&state=x yz&scope=write
98. HTTP/1.1 302 Found Location: https://example.com/callback? code=ghijkl&state=xyz
99. POST /oauth2/token HTTP/1.1 Host: api.twitter.com Content-Type: application/x-www-form- urlencoded;charset=UTF-8 grant_type=authorization_code&code=ghijkl&c lient_id=12345&client_secret=7890
100. POST /oauth2/token HTTP/1.1 Host: api.twitter.com Authorization: Basic mnopqrs Content-Type: application/x-www-form- urlencoded;charset=UTF-8 grant_type=authorization_code&code=ghijkl
101. HTTP/1.1 200 OK Content-Type: application/json;charset=UTF-8 { "access_token“: "jklmno“, "expires_in“: 3600, "refresh_token“: "qrstuvq“ }
102. GET /1/statuses/home_timeline HTTP/1.1 Host: api.twitter.com Authorization: Bearer jklmno
103. Refresh Token
104. POST /oauth2/token HTTP/1.1 Host: api.twitter.com Authorization: Basic mnopqrs Content-Type: application/x-www-form- urlencoded;charset=UTF-8 grant_type=refresh_token&code=qrstuvq
105. Authorization Types
106. Bearer Tokens
107. http://tools.ietf.org/html/draft-ietf-oauth-v2-bearer
108. GET /1/statuses/home_timeline HTTP/1.1 Host: api.twitter.com Authorization: Bearer jklmno
109. SSL not possible?
110. Signatures
111. http://tools.ietf.org/html/draft-ietf-oauth-v2-http-mac
112. HTTP/1.1 200 OK Content-Type: application/json;charset=UTF-8 { "access_token“: "jklmno“, "token_type“: "mac“, "expires_in“: 3600, "refresh_token“: "qrstuvq“ "mac_key":"adijq39jdlaska9asud", "mac_algorithm":"hmac-sha-1" }
113. GET /1/statuses/home_timeline HTTP/1.1 Host: api.twitter.com Authorization: MAC id=“jklmno“, nonce=“274312:dj83hs“, mac=“.....“
114. timestamp\n nonce\n HTTP_METHOD\n HTTP Request URI\n Hostname\n Port\n (Authorization extension)
115. And JavaScript?
116. User-Agent Profile
117. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com
118. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize
119. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize
120. http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize
121. lanyrd.com HTTPS Redirect RedirectURI#acces sToken twitter.co m/ authorize RedirectURI# accessToken lanyrd.com
122. lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it to opening window Close popup lanyrd.com
123. Same Origin Policy
124. lanyrd.com HTTPS Ajax Request to API Access Token twitter.com
125. GET /oauth2/authorize? response_type=token&client_id=abcdefg&stat e=xyz&scope=write HTTP/1.1 Host: api.twitter.com
126. HTTP/1.1 302 Found Location: http://example.com/ callback#access_token=gahorha&state=xyz&exp ires_in=3600
127. 1.<script> 2. var fragmentString = location.hash.substr(1); 3. var fragment = {}; 4. var fragmentItemStrings = fragmentString.split('&'); 5. for (var i in fragmentItemStrings) { 6. var fragmentItem = fragmentItemStrings[i].split('='); 7. if (fragmentItem.length !== 2) { 8. continue; 9. } 10. fragment[fragmentItem[0]] = fragmentItem[1]; 11. } 12. opener.setAccessToken(fragment['access_token']); 13. window.close(); 14.</script>
128. Storing the access token
129. Local Storage http://www.w3.org/TR/webstorage/
130. $ git remote add upstream https:// github.com/bashofmann/ js_mashup_workshop.git $ git reset --hard $ git clean -d -f $ git fetch upstream $ git merge upstream/master https://help.github.com/articles/syncing-a-fork
131. DEMO
132. Mash it up!
133. cool video: http://www.youtube.com/ watch?v=OFzkTxiwziQ
134. OEmbed http://oembed.com/
135. http://www.youtube.com/watch?v=OyJd2qsRkNk
137. http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json
138. { "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 }
139. cool video:
140. http://embed.ly/
141. this.bind('changed', function() { embeds = []; $('div.feed-item h3').embedly({ key:'...', maxWidth: 450, wmode: 'transparent', method: 'after' }); });
143. Caja http://code.google.com/p/google-caja/
144. html_sanitize(result.html);
145. $ git remote add upstream https:// github.com/bashofmann/ js_mashup_workshop.git $ git reset --hard $ git clean -d -f $ git fetch upstream $ git merge upstream/master https://help.github.com/articles/syncing-a-fork
146. DEMO
147. Instant updates without reloading
148. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
149. <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)"/>
150. <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>
151. http://activitystrea.ms/
152. <link href="http://status.net.xyz:8061/ index.php/main/push/hub" rel="hub"/>
153. PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
154. http://nodejs.org/
155. HTTP Server for PubsubHubbub
156. (Webkit) Browser Notifications
157. Vagrant http://vagrantup.com/
158. $ vagrant box add base http:// files.vagrantup.com/lucid32.box $ vagrant init $ vagrant up
159. http://puppetlabs.com/
160. https://github.com/bashofmann/vm_js_mashup
161. retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post subscribe at hub challenge ack new post Notification new post
162. WebSockets http://dev.w3.org/html5/websockets/
163. socket.io http://socket.io/
164. DEMO
165. Sharing
166. Nascar Problem
167. http://www.oexchange.org/
168. http://www.example.com/share.php?url={URI} &title={title for the content} &description={short description of the content}&ctype=flash&swfurl={SWF URI} &height={preferred SWF height} &width={preferred swf width} &screenshot={screenshot URI}
169. http://example.com/.well- known/host-meta http://tools.ietf.org/html/draft-nottingham-site-meta
170. <?xml version='1.0' encoding='UTF-8'?> <XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0' xmlns:hm='http://host-meta.net/xrd/1.0'> <hm:Host>www.meinvz.net</hm:Host> <Link rel="http://oexchange.org/spec/0.8/rel/resident-target" type="application/xrd+xml" href="http://www.example.com/oexchange.xrd" > </Link> </XRD>
171. <?xml version='1.0' encoding='UTF-8'?> <XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0"> <Subject>http://www.example.com/linkeater</Subject> <Property type="http://www.oexchange.org/spec/0.8/prop/vendor"> Examples Inc.</Property> <Property type="http://www.oexchange.org/spec/0.8/prop/title"> A Link-Accepting Service</Property> <Link rel= "icon" href="http://www.example.com/favicon.ico" type="image/vnd.microsoft.icon" /> <Link rel= "http://www.oexchange.org/spec/0.8/rel/offer" href="http://www.example.com/linkeater/offer.php" type="text/html" /> </XRD>
172. http://search.npmjs.org/#/oexchange
173. DEMO
174. Pretty cool so far!
175. ... but your application probably is not frontend only...
176. Let's talk about Application architecture
177. Structure
178. Code and component re-use
179. Rapid Development
180. Large code-bases
181. Frameworks to the rescue
182. Most Web Frameworks are incomplete
185. webserver HTML browser JS
186. e duplication de duplication ode duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplicatio code duplicat code duplic code dup code du code cod co co
188. Mojito http://developer.yahoo.com/cocktails/mojito/
189. Meteor http://www.meteor.com
190. https://github.com/bashofmann/meteor_shoutbox_demo
191. DEMO
192. What about existing applications?
193. Legacy Code
194. Incremental Refactoring
195. many roads
196. The next SoundCloud http://backstage.soundcloud.com/2012/06/building-the- next-soundcloud/
198. status quo
199. webserver loadbalancer pgsql memcached mongodb services
200. webserver
202. Large, Old Codebase
203. MVC
205. complicated routing
206. PHP templates
207. lazy DB queries in view
209. Duplication and only some Code re-use
210. We can do better
211. Components
213. Self contained
214. Can be addressed and rendered separately
215. Server JS Browser JSON HTML HTML
216. JS is part of the component
217. Share code between server and client
218. Templates, Validation, Entities,...
219. It needs to be fast
220. We called them Widgets
221. PHP Controller Mustache Template JavaScript view class Widget Providing data Handling browser events Displaying data
222. Why no models in the frontend? http://backbonejs.org/#Model
224. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
225. Remember: self contained
226. Do not fetch data directly
227. Sssssssslllloooooowww
228. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu Account Account Account Account Account Publication1 Publication2 Publication3
229. Require stuff
230. http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/
231. The Preparer
232. Requirements
233. Resolver
234. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
235. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
236. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
237. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
239. EntityRequirement
241. Request Cache
242. Multi-GET
243. ServiceRequirement
245. Required / Optional
247. Hides storage specific logic from controllers
248. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations
249. Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services Connector Interfaces Connector Implementations
250. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Batch requirements and pass them to resolvers
251. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Call Services as effective as possible (Multi-GET,...)
252. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Attach fetched data to Requirements and pass them back to the preparer
253. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Distribute fetched data to the widgets that required it
254. Requirement doesn't need to be only data
255. WidgetRequirement
257. RequestDataRequirement
259. Data dependencies within a widget
260. => Callbacks
261. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
262. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
263. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
265. PHP 5.5 Generators https://wiki.php.net/rfc/generators
266. public function collect() { yield array( new EntityRequirement( 'account', Account::class, array('accountId' => $this->requestContect->getAccountId()) ), ); yield array( new ServiceRequirement( 'scienceDisciplines', AccountService::class, 'getScienceDisciplines', array('account' => $this->account) ) ); }
267. Data dependencies between Widgets
268. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
269. Prefills
272. Rendering
273. HTML
274. JSON
275. Templates
276. Mustache } http://mustache.github.com/
278. Helper Methods
279. • nl2br • truncate • pluralize • wordwrap • highlight • ...
280. http://pecl.php.net/package/v8js V8js
281. JavaScript
282. WidgetViews
284. Loading widgets from JavaScript
286. Rendering callbacks
288. Benefits
289. Enables developers to only focus on their components
290. Easier Refactoring
291. Error Handling
292. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
293. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu EXCEPTION
294. Profile Publications Publication Publication Publication LeftColumn Image Instiution Menu
295. Testing
297. Bandit Algorithm http://untyped.com/untyping/2011/02/11/stop-ab-testing- and-make-out-like-a-bandit/
298. Caching of Components
299. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu <esi:include src="..." />
300. Faster UX
301. window.history.pushState
302. Conclusion?
303. Think about your architecture
304. Refactor and make it better continuously
305. Frontend and backend are part of the same application
306. Don't rewrite your whole codebase in one go
307. 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