with a web app was very limited, images, text, forms, animated gifs, background music, marquee text, js was considered security risk, turn it off, due to features not available in browser, low bandwith
OAuth2 •Real-Time updates PubsubHubbub •WebRTC we'll talk about several techniques to create such rich, responsive web applications, that integrate 3rd party data, some so brand new that they are only available in dev channel or nightly builds and some that you can use now in your existing apps
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 but you don't share any code between client and server resulting in lot's of code duplication. but the possibilities to share code are there: models, templates, validation rules e.g.
more and more stuff happening in the client, in js, to create these rich and responsive web apps, something has to change in order to create large, maintainable apps rapidly. lets look a bit into the future
js, a js framework that combines server side and client side programming which reduces the amount of boilerplate code you have to write for server to client communication tremendously, still very early, in some areas limited, but really fun to develop with
html += "<li>" + viewers[i].displayName + "</li>"; } html += "<ul>"; document.getElementById("#div").innerHTML = html; Where is the error? oftentimes you see something like this in js applications, you iterate over some data, concatenate an html string, and put that into some dom node where is the error? problems: 1st xss, 2nd structure not visible, no code highlights, no ide support, easy to make errors 3rd if your app get's bit, hard to ﬁnd where the markup is coming from, 4th we are forgetting everything we learned with server side development of web apps, mvc, separation of concerns
stream you often times have status updates like this one, with a link, wouldn't it be nice to not only have the link but also a preview of what's behind the link under it. of course youtube offers embedding videos in other pages through an iframe, so you could parse the url, see that it's youtube, parse out the video id, put it into the iframe url, but what if youtube changes the embed tag? what if you want to support more than youtube? lots of work to build and maintain...
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 } you get back a json object with meta information about the url, title, thumbnail and for videos some html which is the embed tag from youtube in this example
Rock"/> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http:// www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http:// ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html> with opengraph there are og meta tags in the pages head
police-presence-fans-congregate-for-whitney- houstons-funeral-in-newark.html"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="..."> <meta name="twitter:image" content="http:// graphics8.nytimes.com/images/2012/02/19/us/ 19whitney-span/19whitney-span- articleLarge.jpg"> also special twitter meta tags in the page's head
are only allowed to access windows or make ajax request to resources that have the same host name as the page that you are on. very important browser security feature, otherwise you could steal the sessions of all other applications that are currently open or have a running session or permanent login cookie. but for api requests this would be ﬁne, we can trust the api provider not to leak sessions
before the browser actually does the ajax request it performs an options request and the api needs to return the access-control-allow-origin header, whose value should match the requesting host. if this is the case the ajax request will be executed
the client app, lanyrd.com, you click a button, the client opens a new browser window pointing to the authorization endpoint of the api, with the clientId (you need to be preregistered at the api) of the client app (and some other parameters)
if the user said yes, the user gets redirected, still in the popup, to a preregistered redirect callback url, the access token for the api is in the fragment part of this url, this means it will not be sent to the backend and not to any proxies but stays in the browser
opening window Close popup lanyrd.com lanyrd.com the callback page can only return some static html and js. the js reads out the fragment, and since callback page and client app in the parent window are on the same hostname, it can call a function at the parent window to pass the access token to the client app and then close itself
every subscriber subscribes for feed acks subscription with pubsubhubbub you subscribe your application (backend) for the users feed at a central hub that is able to provide this users feed. after some subscription pingpong, each time when the user adds a new entry to his feed, it is send to the hub and the hub will forward it to every subscriber (of course only possible backend to backend since the hub can't send it directly to a browser)
this talk? https://joind.in/7977 thanks, you can contact me on any of these platforms or via mail. if you liked this talk or didn't like it, please rate it on joind.in. this is very important for me for improving my talk, for the organizers for selecting the best talks and speakers and for you to get the best content on the conferences you visit.