Upload
bastian-hofmann
View
4.669
Download
0
Embed Size (px)
DESCRIPTION
Nowadays many modern web applications are solely relying on JavaScript to render their frontend. But if you want to create mashups, load data from many different places or include external widgets into your site, you are quickly running into boundaries because of browser and security restrictions. In this presentation I will talk about techniques helping you with such problems.
Citation preview
Mashing up JavaScriptAdvanced techniques for modern web applications
Bastian Hofmann / VZnet Netzwerke Ltd.
Wtf?
• JavaScript Apps
• CORS and OAuth2
• Local Storage
• OEmbed and Caja
• WebSockets, ActivityStrea.ms and PubsubHubbub
• OpenSocial
You?
Questions? Ask!
https://github.com/bashofmann/statusnet_js_mashup
Let‘s write a JS App
Don‘t reinvent the wheel!
Open Source
}
Open Standards
DEMO
History & Bookmarking
DEMO
API Access
Same Origin Policy
Cross-Origin Resource Sharing
Backendapi.twitter.com
Client client.net
AJAX
Access-Control-Allow-Origin: *
http://www.w3.org/TR/cors/
DEMO
var html="<ul>";for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>";}html += "<ul>";document.getElementById("#div").innerHTML = html;
Templates
Mustache.JS
https://github.com/janl/mustache.js
}
DEMO
Authorization
+----------+ Client Identifier +----------------+ | |>---(A)-- & Redirection URI --->| | | | | | End <--+ - - - +----(B)-- User authenticates -->| Authorization | User | | | Server | | |<---(C)--- Redirect URI -------<| | | Client | with Access Token | | | in | in Fragment +----------------+ | Browser | | | +----------------+ | |>---(D)--- Redirect URI ------->| | | | without Fragment | Web Server | | | | with Client | | (F) |<---(E)--- Web Page with ------<| Resource | | Access | Script | | | Token | +----------------+ +----------+
User-Agent Profile
DEMO
Storing the access token
Cookie
Problem: Cookie is also sent to the backend
Local Storage
http://www.w3.org/TR/webstorage/
DEMO
Mash it up!
cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ
OEmbed• Retrieves embeddable content for a given link
http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/
{ "version": "1.0", "type": "photo", "width": 240, "height": 160, "title": "ZB8T0193", "url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg", "author_name": "Bees", "author_url": "http://www.flickr.com/photos/bees/", "provider_name": "Flickr", "provider_url": "http://www.flickr.com/"}
http://oembed.com/
The embedded result
cool video:
OEmbed Aggregation
•embed.ly
•supports 218 services over one endpoint
•several libraries
•easy implementation
http://embed.ly/
DEMO
Caja
http://code.google.com/p/google-caja/
DEMO
Instant updates without reloading
<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)"/>
<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>
<link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>
PubSubHubbubretrieves Atom feed with Hub URL
Hub
posts sthpings everysubscriber
subscribes for feed
ackssubscription
http://code.google.com/p/pubsubhubbub/
WebSockets
http://dev.w3.org/html5/websockets/
Browser Notifications
Tying it together
retrieve Stream with Hub
Ajax: request Subscription
WebSockets:new Post
subscribe at hubchallenge
acknew post
Notification
new post
DEMO
Including widgets
GADGETapivz.net
CONTAINERmeinvz.net
DEMO
h"p://twi"er.com/Bas2anHofmannh"p://studivz.net/bas2anh"p://slideshare.net/[email protected]"p://joind.in/talk/view/3506h"p://developer.studivz.net