international PHP2011_Bastian Hofmann_Mashing up java script
-
Upload
smuellersandsmedia -
Category
Technology
-
view
1.037 -
download
0
description
Transcript of international PHP2011_Bastian Hofmann_Mashing up java script
![Page 1: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/1.jpg)
Mashing up JavaScriptAdvanced techniques for modern web applications
Bastian Hofmann / VZnet Netzwerke Ltd.
![Page 2: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/2.jpg)
Wtf?
![Page 3: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/3.jpg)
![Page 4: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/4.jpg)
![Page 5: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/5.jpg)
![Page 6: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/6.jpg)
![Page 7: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/7.jpg)
• JavaScript Apps
• CORS and OAuth2
• Local Storage
• OEmbed and Caja
• WebSockets, ActivityStrea.ms and PubsubHubbub
• OpenSocial
![Page 8: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/8.jpg)
![Page 9: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/9.jpg)
![Page 10: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/10.jpg)
![Page 11: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/11.jpg)
You?
![Page 12: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/12.jpg)
Questions? Ask!
![Page 14: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/14.jpg)
https://github.com/bashofmann/statusnet_js_mashup
![Page 15: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/15.jpg)
Let‘s write a JS App
![Page 16: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/16.jpg)
Don‘t reinvent the wheel!
![Page 17: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/17.jpg)
Open Source
}
![Page 18: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/18.jpg)
Open Standards
![Page 19: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/19.jpg)
![Page 20: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/20.jpg)
DEMO
![Page 21: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/21.jpg)
History & Bookmarking
![Page 23: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/23.jpg)
DEMO
![Page 24: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/24.jpg)
API Access
![Page 25: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/25.jpg)
Same Origin Policy
![Page 26: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/26.jpg)
Cross-Origin Resource Sharing
Backendapi.twitter.com
Client client.net
AJAX
Access-Control-Allow-Origin: *
http://www.w3.org/TR/cors/
![Page 27: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/27.jpg)
DEMO
![Page 28: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/28.jpg)
var html="<ul>";for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>";}html += "<ul>";document.getElementById("#div").innerHTML = html;
![Page 29: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/29.jpg)
Templates
![Page 30: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/30.jpg)
Mustache.JS
https://github.com/janl/mustache.js
}
![Page 31: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/31.jpg)
DEMO
![Page 32: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/32.jpg)
Authorization
![Page 33: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/33.jpg)
![Page 34: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/34.jpg)
+----------+ 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
![Page 35: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/35.jpg)
DEMO
![Page 36: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/36.jpg)
Storing the access token
![Page 37: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/37.jpg)
Cookie
![Page 38: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/38.jpg)
Problem: Cookie is also sent to the backend
![Page 39: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/39.jpg)
Local Storage
http://www.w3.org/TR/webstorage/
![Page 40: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/40.jpg)
DEMO
![Page 41: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/41.jpg)
Mash it up!
![Page 42: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/42.jpg)
cool video:http://www.youtube.com/watch?v=OFzkTxiwziQ
![Page 43: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/43.jpg)
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/
![Page 44: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/44.jpg)
The embedded result
cool video:
![Page 45: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/45.jpg)
OEmbed Aggregation
•embed.ly
•supports 218 services over one endpoint
•several libraries
•easy implementation
http://embed.ly/
![Page 46: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/46.jpg)
DEMO
![Page 47: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/47.jpg)
![Page 48: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/48.jpg)
Caja
http://code.google.com/p/google-caja/
![Page 49: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/49.jpg)
DEMO
![Page 50: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/50.jpg)
Instant updates without reloading
![Page 51: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/51.jpg)
<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)"/>
![Page 52: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/52.jpg)
<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 54: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/54.jpg)
<link href="http://status.net.xyz:8061/index.php/main/push/hub" rel="hub"/>
![Page 55: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/55.jpg)
PubSubHubbubretrieves Atom feed with Hub URL
Hub
posts sthpings everysubscriber
subscribes for feed
ackssubscription
http://code.google.com/p/pubsubhubbub/
![Page 57: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/57.jpg)
WebSockets
http://dev.w3.org/html5/websockets/
![Page 58: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/58.jpg)
Browser Notifications
![Page 59: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/59.jpg)
Tying it together
retrieve Stream with Hub
Ajax: request Subscription
WebSockets:new Post
subscribe at hubchallenge
acknew post
Notification
new post
![Page 60: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/60.jpg)
DEMO
![Page 61: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/61.jpg)
Including widgets
![Page 62: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/62.jpg)
![Page 63: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/63.jpg)
GADGETapivz.net
CONTAINERmeinvz.net
![Page 64: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/64.jpg)
![Page 65: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/65.jpg)
DEMO
![Page 66: international PHP2011_Bastian Hofmann_Mashing up java script](https://reader033.fdocuments.net/reader033/viewer/2022051818/54b7a03d4a795998738b4656/html5/thumbnails/66.jpg)
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