Mashing up JavaScript

Bastian Hofmann / VZnet Netzwerke Ltd.Mashing up JavaScriptAdvanced techniques for modern webapplications

• JavaScript Apps• CORS and OAuth2• Local Storage• OEmbed and Caja• WebSockets, ActivityStrea.ms and PubsubHubbub• OpenSocial

Questions? Ask!

http://slideshare.net/bashofmann

https://github.com/bashofmann/statusnet_js_mashup

Let‘s write a JS App

Don‘t reinvent the wheel!

Open Source}

Open Standards

History & Bookmarking

http://sammyjs.org/

API Access

Same Origin Policy

Cross-Origin Resource SharingClient Backendclient.net api.twitter.com AJAX Access-Control-Allow-Origin: * http://www.w3.org/TR/cors/

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

Authorization

Storing the access token

Cookie

Problem: Cookie is also sent to the backend

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

Mash it up!

cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ

OEmbed• Retrieves embeddable content for a given linkhttp://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 implementationhttp://embed.ly/

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

Instant updates without reloading

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

http://activitystrea.ms/

PubSubHubbub retrieves Atom feed with Hub URL subscribes for feed acks Hub subscription pings every posts sth subscriberhttp://code.google.com/p/pubsubhubbub/

http://nodejs.org/

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

Browser Notiﬁcations

Tying it together Notiﬁcation retrieve Stream with HubAjax: request WebSockets:Subscription new Post subscribe at hub challenge ack new post new post

Including widgets

CONTAINER GADGETmeinvz.net apivz.net

h"p://twi"er.com/Bas2anHofmannh"p://studivz.net/bas2anh"p://slideshare.net/bashofmannbhofmann@vz.neth"p://joind.in/talk/view/3506h"p://developer.studivz.net

Mashing up JavaScript

by Bastian Hofmann on May 31, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 16

Statistics

Mashing up JavaScript — Presentation Transcript

http://lanyrd.com	10
http://localhost:8062	6