• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mashing up JavaScript
 

Mashing up JavaScript

on

  • 3,656 views

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

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.

Statistics

Views

Total Views
3,656
Views on SlideShare
3,619
Embed Views
37

Actions

Likes
4
Downloads
57
Comments
2

2 Embeds 37

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mashing up JavaScript Mashing up JavaScript Presentation Transcript

    • Bastian Hofmann / VZnet Netzwerke Ltd.Mashing up JavaScriptAdvanced techniques for modern webapplications
    • Wtf?
    • • JavaScript Apps• CORS and OAuth2• Local Storage• OEmbed and Caja• WebSockets, ActivityStrea.ms and PubsubHubbub• OpenSocial
    • You?
    • 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
    • DEMO
    • History & Bookmarking
    • http://sammyjs.org/
    • DEMO
    • 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/
    • 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
    • User-Agent Profile +----------+ 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 | +----------------+ +----------+
    • 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 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/
    • DEMO
    • Cajahttp://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>
    • http://activitystrea.ms/
    • <link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>
    • 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 Notifications
    • Tying it together Notification retrieve Stream with HubAjax: request WebSockets:Subscription new Post subscribe at hub challenge ack new post new post
    • DEMO
    • Including widgets
    • CONTAINER GADGETmeinvz.net apivz.net
    • DEMO
    • 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