Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mashing up JavaScript
Search
Bastian Hofmann
February 29, 2012
Programming
3
1.7k
Mashing up JavaScript
Advanced techniques for modern web applications
Slides from Confoo 2012
Bastian Hofmann
February 29, 2012
Tweet
Share
More Decks by Bastian Hofmann
See All by Bastian Hofmann
Monitoring in Kubernetes with Prometheus and Grafana
bastianhofmann
0
250
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
84
Highly available cross-region deployments with Kubernetes
bastianhofmann
1
120
From source to Kubernetes in 30 minutes
bastianhofmann
0
120
Introduction to Kubernetes
bastianhofmann
1
140
CI/CD with Kubernetes
bastianhofmann
0
140
Creating a fast Kubernetes Development Workflow
bastianhofmann
1
240
Deploying your first Micro-Service application to Kubernetes
bastianhofmann
2
160
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
160
Other Decks in Programming
See All in Programming
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
13k
上手な探索的テストとその上達方法について
matsu802
4
650
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.2k
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
9.9k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
260
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
TCA魔法学入門🪄
dazy
0
280
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.1k
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
How to name files
jennybc
62
92k
Done Done
chrislema
178
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Atom: Resistance is Futile
akmur
258
25k
Fireside Chat
paigeccino
19
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Transcript
Mashing up JavaScript Bastian Hofmann Advanced techniques for modern web
applications
Wtf?
None
None
None
None
None
None
None
None
None
None
None
• JavaScript Apps • CORS and OAuth2 • Local Storage
• OEmbed and Caja • WebSockets, ActivityStrea.ms and PubsubHubbub • OExchange
None
None
None
None
None
http://slideshare.net/bashofmann
Questions? Ask!
Let‘s write a JS App
https://github.com/bashofmann/statusnet_js_mashup_2nd
CSS Bastian
http://twitter.github.com/bootstrap
History & Bookmarking
www.example.com#Page
www.example.com/Page
http://sammyjs.org/
API Access
None
Same Origin Policy
Cross-Origin Resource Sharing Backend api.twitter.com Client client.net 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; Where is the error?
Templates
Mustache.JS https://github.com/janl/mustache.js }
DEMO
Authorization
None
http://oauth.net/
User-Agent Profile
http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com
http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com HTTPS GET twitter.co m/ authorize
http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Login twitter.co m/ authorize
http://twitter.com/authorize?&clientId=... Open Popup lanyrd.com Grant Permission twitter.co m/ authorize
lanyrd.com HTTPS Redirect RedirectURI# accessToken twitter.co m/ authorize RedirectURI# accessToken
lanyrd.com
lanyrd.com RedirectURI# accessToken Parse Access Token from Fragment Send it
to opening window Close popup lanyrd.com
Same Origin Policy
lanyrd.com HTTPS Ajax Request to API Access Token twitter.com
Storing the access token
Local Storage http://www.w3.org/TR/webstorage/
DEMO
Mash it up!
cool video: http://www.youtube.com/ watch?v=OFzkTxiwziQ
OEmbed http://oembed.com/
http://www.youtube.com/watch?v=OyJd2qsRkNk
None
http://www.youtube.com/oembed?url=http%3A%2F %2Fwww.youtube.com%2Fwatch%3Fv %3DOyJd2qsRkNk&maxwidth=500&format=json
{ "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 }
cool video:
http://embed.ly/
None
Caja http://code.google.com/p/google-caja/
DEMO
Instant updates without reloading
PubSubHubbub retrieves Atom feed with Hub URL Hub posts sth
pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
<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 Hub posts sth
pings every subscriber subscribes for feed acks subscription http://code.google.com/p/pubsubhubbub/
http://nodejs.org/
WebSockets http://dev.w3.org/html5/websockets/
socket.io http://socket.io/
http://search.npmjs.org/#/socket.io
Browser Notifications
webkitNotifications.createNotification(image, title, text).show();
webkitNotifications.requestPermission();
retrieve Stream with Hub Ajax: request Subscription WebSockets: new Post
subscribe at hub challenge ack new post Notification new post
DEMO
Sharing
Nascar Problem
http://www.oexchange.org/
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}
http://example.com/.well- known/host-meta http://tools.ietf.org/html/draft-nottingham-site-meta
<?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>
<?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>
http://search.npmjs.org/#/oexchange
DEMO
Mobile
Rate and Comment https://joind.in/4670
h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann/ h"p://slideshare.net/bashofmann
[email protected]