mashing up javascript

112
Mashing up JavaScript Bastian Hofmann ResearchGate GmbH

Upload: bastian-hofmann

Post on 11-May-2015

1.211 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Mashing up JavaScript

Mashing up JavaScript

Bastian HofmannResearchGate GmbH

Page 2: Mashing up JavaScript

Wtf?

Page 3: Mashing up JavaScript
Page 4: Mashing up JavaScript
Page 5: Mashing up JavaScript
Page 6: Mashing up JavaScript
Page 7: Mashing up JavaScript
Page 8: Mashing up JavaScript
Page 9: Mashing up JavaScript
Page 10: Mashing up JavaScript
Page 11: Mashing up JavaScript
Page 12: Mashing up JavaScript
Page 13: Mashing up JavaScript
Page 14: Mashing up JavaScript

• JavaScript Apps

• CORS and OAuth2

• Local Storage

• OEmbed and Caja

• WebSockets, ActivityStrea.ms and PubsubHubbub

• OExchange

Page 15: Mashing up JavaScript
Page 16: Mashing up JavaScript
Page 17: Mashing up JavaScript
Page 18: Mashing up JavaScript
Page 19: Mashing up JavaScript
Page 22: Mashing up JavaScript

Let‘s write a JS App

Page 23: Mashing up JavaScript

History & Bookmarking

Page 24: Mashing up JavaScript

www.example.com#Page

Page 25: Mashing up JavaScript

http://sammyjs.org/

Page 26: Mashing up JavaScript

API Access

Page 27: Mashing up JavaScript
Page 28: Mashing up JavaScript

Same Origin Policy

Page 29: Mashing up JavaScript

Cross-Origin Resource Sharing

Backendapi.twitter.com

Client client.net

AJAX

Access-Control-Allow-Origin: *

http://www.w3.org/TR/cors/

Page 30: Mashing up JavaScript

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?

Page 31: Mashing up JavaScript

Templates

Page 32: Mashing up JavaScript

Mustache.JS

https://github.com/janl/mustache.js

}

Page 33: Mashing up JavaScript

var feed = [];var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ...});

jQuery(function() { app.run('#/');});

Page 34: Mashing up JavaScript

var feed = [];var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ...});

jQuery(function() { app.run('#/');});

Page 35: Mashing up JavaScript

var feed = [];var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ...});

jQuery(function() { app.run('#/');});

Page 36: Mashing up JavaScript

var feed = [];var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ...});

jQuery(function() { app.run('#/');});

Page 37: Mashing up JavaScript

var feed = [];var app = Sammy('#main', function() { this.use(Sammy.Mustache, 'ms'); this.get('#/', function() { this.trigger('getFeed'); }); ...});

jQuery(function() { app.run('#/');});

Page 38: Mashing up JavaScript

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'); });

Page 39: Mashing up JavaScript

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'); });

Page 40: Mashing up JavaScript

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'); });

Page 41: Mashing up JavaScript

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'); });

Page 42: Mashing up JavaScript

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'); });

Page 43: Mashing up JavaScript

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'); });

Page 44: Mashing up JavaScript

<ul>{{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li>{{/feed}}</ul>

Page 45: Mashing up JavaScript

<ul>{{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li>{{/feed}}</ul>

Page 46: Mashing up JavaScript

<ul>{{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li>{{/feed}}</ul>

Page 47: Mashing up JavaScript

<ul>{{#feed}} <li> <p>{{{statusnet_html}}}</p> <p>{{created_at}} {{#user}} {{name}} {{/user}} </p> </li>{{/feed}}</ul>

Page 48: Mashing up JavaScript

DEMO

Page 49: Mashing up JavaScript

Authorization

Page 50: Mashing up JavaScript
Page 51: Mashing up JavaScript

+----------+ 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 | +----------------+ +----------+

OAuth 2

http://tools.ietf.org/html/draft-ietf-oauth-v2

Page 52: Mashing up JavaScript

this.bind('getFeed', function() { oauth2.retrieveAccessToken(); if (! oauth2.store['access_token']) { this.redirect('#Login'); return; } ... });

Page 53: Mashing up JavaScript

this.bind('getFeed', function() { oauth2.retrieveAccessToken(); if (! oauth2.store['access_token']) { this.redirect('#Login'); return; } ... });

Page 55: Mashing up JavaScript

this.get('#Login', function() { var consumerKey = 'abc....'; window.open('http://status.net/api/oauth2/authorize?response_toke=token&client_id=' + consumerKey);});

Page 56: Mashing up JavaScript

<script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close();</script>

Page 57: Mashing up JavaScript

<script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close();</script>

Page 58: Mashing up JavaScript

<script type="text/javascript"> var fragment = location.hash.substr(1); opener.parent.oauth2.storeToken(fragment); window.close();</script>

Page 59: Mashing up JavaScript

<form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/></form>

Page 60: Mashing up JavaScript

<form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/></form>

Page 61: Mashing up JavaScript

<form action="#Entry" method="post"> <textarea name="comment"></textarea> <input type="submit" value="send"/></form>

Page 62: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 63: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 64: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 65: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 66: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 67: Mashing up JavaScript

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['comment'] }, success: function() { that.redirect('#/'); } }); });

Page 68: Mashing up JavaScript

Storing the access token

Page 69: Mashing up JavaScript

Local Storage

http://www.w3.org/TR/webstorage/

Page 70: Mashing up JavaScript

localStorage.setItem("key", value);

Page 71: Mashing up JavaScript

localStorage.getItem("key");

Page 72: Mashing up JavaScript

DEMO

Page 73: Mashing up JavaScript

Mash it up!

Page 75: Mashing up JavaScript

OEmbed

http://oembed.com/

Page 77: Mashing up JavaScript
Page 79: Mashing up JavaScript

{  "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}

Page 80: Mashing up JavaScript

cool video:

Page 81: Mashing up JavaScript

http://embed.ly/

Page 82: Mashing up JavaScript
Page 83: Mashing up JavaScript

Caja

http://code.google.com/p/google-caja/

Page 84: Mashing up JavaScript

html_sanitize(‘<script>alert(“foo“);</script>‘)

Page 85: Mashing up JavaScript

DEMO

Page 86: Mashing up JavaScript

Instant updates without reloading

Page 87: Mashing up JavaScript

PubSubHubbubretrieves Atom feed with Hub URL

Hub

posts sthpings everysubscriber

subscribes for feed

ackssubscription

http://code.google.com/p/pubsubhubbub/

Page 89: Mashing up JavaScript

<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>

Page 90: Mashing up JavaScript

http://activitystrea.ms/

Page 93: Mashing up JavaScript

http://nodejs.org/

Page 94: Mashing up JavaScript

WebSockets

http://dev.w3.org/html5/websockets/

Page 95: Mashing up JavaScript

socket.io

http://socket.io/

Page 97: Mashing up JavaScript

Browser Notifications

Page 98: Mashing up JavaScript

webkitNotifications.createNotification(image, title, text).show();

Page 99: Mashing up JavaScript

webkitNotifications.requestPermission();

Page 100: Mashing up JavaScript

retrieve Stream with Hub

Ajax: request Subscription

WebSockets:new Post

subscribe at hubchallenge

acknew post

Notification

new post

Page 101: Mashing up JavaScript

DEMO

Page 102: Mashing up JavaScript

Sharing

Page 103: Mashing up JavaScript

Nascar Problem

Page 104: Mashing up JavaScript

http://www.oexchange.org/

Page 105: Mashing up JavaScript

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}

Page 107: Mashing up JavaScript

<?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>

Page 108: Mashing up JavaScript

<?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>

Page 110: Mashing up JavaScript

DEMO

Page 111: Mashing up JavaScript

Rate and Comment

http://joind.in/3876