Embed Size (px)
Citation preview
DAN
GLEGGUI AS A
SERVICE RIOT
GAMES
@RIOTJUL
ESFERN
TEAM ORIENTED
100+ CHAMPIONS
MODERN FANTASY
LEAGUE OF LEGENDS STATS
7.5MILL
IONPEAK
CONCURRENTPLAYERS
STATS RELEASED JANUARY 2014
67MILLI
ONMONTHLY
ACTIVE PLAYERS
MORE THAN
27MILLI
ONDAILY ACTIVE PLAYERS
MORE THAN MORE THAN
BUNCH O‟ VERTICALS
DISCRETE APPLICATIONSDISCRETE EXPERIENCES
TH
E
EXPERI
ENCE
PLAYE
R
DEFINE
S
ARCHITE
CTURE
:(
TL;DR
NOPE
DATA
SERV
ICE
UI
SERV
ICE
DATA
OV
ERTHE
WIRE
OBJEC
TS
DATA
SERV
ICE
DATA
SERV
ICE
UI
SERV
ICE
DATA
UISOON-TO-BE-
REVEALED MAGIC
OV
ERTHE
WIRE
EXPERI
ENCE
RECOGNIZED FOR
EXCELLENCEIN THE FIELD OF RENDERING
STUFF FROM OTHER APPSWITHOUT NECESSARILY KNOWING OR
CARING WHAT THAT STUFF ISOR HOW IT SHOULD LOOK OR ANYTHING LIKE THAT
A
STANDARD
OEMBEDIS BEST
EMBED
*IT IS NOT QUITE THIS
SIMPLE*(SORRY)
PUBLISH CONTENT
<!DOCTYPE HTML>
<html>
<head>
…
<link
rel=“alternate”
type=“application/json+oembed”
href=“/path/to/oembed.json” />
…
</head>
…
{
“title”: “League of Legends…”,
“type”: “rich”,
“thumbnail_url”: “https://…”,
“width”: 1920,
“height”: 1080,
“html”:
“<div …>
OMG STUFF
</div>”
}
<!DOCTYPE HTML>
<html>
<head>
<title>League of Legends…</title>
<link
rel=“alternate”
type=“application/json+oembed”
href=“/path/to/oembed.json” />
…
</head>
…
1ST PARTY
CODE
3RD PARTY
CODE
CONSUME
CONTENT
OEMBE
DPROVI
DER
PROVI
DER
I HAVE THIS URL FOR
SOMETHINGI WANT TO SHOW A THING, NOT
JUST A LINKI HAVE THIS MUCH SPACE, TELL ME
HOW TO DISPLAY ITKTHX
HEY
PROVIDER
GET /OEMBED?URL=$FULL_URL_OF_THING_I
_WANT&MAXWIDTH=$WIDTH&MAXHEIGHT=$H
EIGHT&FORMAT=JSONRESPONSE FOLLOWS
HTTP://$PRO
VIDER
IS
POROU
S
THE
WEB
MAKE ITAWESOME
WEB
COMPONEN
TS
AND OTHER HOT
CONFERENCE TOPICS
<SELECT>
<OPTION
NAME=“1”>ONE</OPTIO
N>
<OPTION
NAME=“2”>TWO</OPTIO
N>
</SELECT>
ONE
“MAKE IT
POP”AND OTHER SCOPE-
ENLARGING INCANTATIONS
<SELECT
CLASS=“CUSTOM-
SELECT”>
<OPTION
NAME=“1”>ONE</LI>
<OPTION
NAME=“2”>TWO</LI>
<SELECT CLASS=“CUSTOM-
SELECT”>…</SELECT>+document.querySelectorAll(„.custom-
select‟).forEach(…);
DIV DIV DIV DIV DIV DIV DIV DIV DIV
DIV DIV DIV DIV SPAN DIV
DIV A DIV SPAN DIV IMG DIV IMG DIV
SPAN A DIV A DIV DIV DIV
DIV DIV SPAN DIV DIV SPAN IMG A DIV
DIV SPAN A DIV DIV DIV
BOON #1LIFECYCLE
MANAGEMENT
<CUSTOM-SELECT>…</CUSTOM-
SELECT> +document.registerElement(„custom-
select‟, proto);
proto.createdC
allback
CUSTOM-SELECT DIV DIV DIV DIV DIV
DIV DIV DIV DIV SPAN DIV
DIV A DIV SPAN DIV IMG DIV IMG DIV
SPAN A DIV A DIV DIV DIV
BOON #2MODIFIABLE
ONCE
RENDERED
SHADOW
DOM
DOM VS.
DIV DIV IMG SPAN FOO A
DIV IMG IMG DIV DIV DIV
IMG SPAN BAR A DIV IMG
IMG DIV
DISPLA
Y
DOM
NODE
<OPTION
NAME=“FOO”>FOO</OP
TION>
<OPTION
NAME=“BAR”>BAR</OPT
ION>
CONTE
NT
document.registerElement(„custom-
select‟, proto);
proto.createdC
allback
var shadow = this.createShadowRoot();
shadow.appendChild(awesomeness);
<OPTION
NAME=“FOO”>FOO</OPTI
ON>
<OPTION
NAME=“BAR”>BAR</OPTI
ON>
<OPTION
NAME=“NEW”>NEW</OPT
ION>
NODE
INSERTE
D
myCompo
nent.js
DIV DIV IMG SPAN FOO A
DIV IMG IMG DIV DIV DIV
IMG SPAN BAR A DIV IMG
IMG DIV
DIV DIV IMG SPAN NEW
UPDATE
SHADOW
DOM
ADD BEHAVIOR TO
CONTENT(BUT BRING YOUR OWN
CONTENT)
WEB
COMPONEN
TS
POLYMERpolymer-project.org
MAKE ITAWESOME
LASSO.JS
CLICK HERE
AS EASY ASTHE
HYPERLINK
<a href=“http://awesome.com”>
Click here</a>
<lasso-embed url=“http://awesome.com”>
Loading your stuff now…</lasso-embed>
PROVI
DER
OEMBE
D
RODEO
“html”: “ <script
type=“text/javascript”>
alert(„LOL PWNED‟);
</script>”
“html”: “ <script
type=“text/javascript”>
$(„#login-form‟).submit(
stealPlayerAccount
);
</script>”
TRUST THIS
CONTENT?YES/NO/HELL
NO
*.*.HOSTNAME.MA
SK/**/PATH/MASK/*.H
TML/^REGEX(P)?$/
DENIEDCONTE
NT
SANDB
OXEDCONTE
NT
TRUST
EDCONTE
NT
GOING FASTOR AT LEAST LOOKING
FAST
DOIN‟ IT LIVERIGHT IN THE
GAME
DEMO
DEMO
IMGURFLICKRVIMEO
TWITTERDEVIANTARTYOUR NEXT
APP
SURVIV
INGTHE
WILD
“html”:
“_______”
IS CO-OPERATIVE
WHERE POSSIBLEHARMONIOUS AND
CONSIDERATE ALWAYS
IDIOMATIC
WEB UI
<IFRAME
/>
<
/>
ADD BEHAVIOR TO
CONTENT(BUT BRING YOUR OWN
CONTENT)
WEB
COMPONEN
TS
TELEPORTS
CONTENT AND
BEHAVIOR
ACROSS THE WEB
OEMBED
CO-OP
BOOTSTRAP
CUSTOM TAG &
+<custom-tag><including-content
/></custom-tag>
<script type=“text/javascript”>
var ns = window.Riot || {};
if(!ns.CustomTagDependency) {
// inject compiled JS script
tag
}
</script>
+<div class=“custom-thing”>…</div>
<script type=“text/javascript”>
var ns = window.Riot || {};
if(!ns.CustomThingEnhancer) {
// inject compiled JS script
tag
}
</script>
IS
REMIXA
BLE
THE
WEB
GITHUB.COM/R
IOTGAMESSOON™
DELICIOUS, DELICIOUS
FEEDBACK
@RIOTJULESF
ERN
QUESTIONS AND FEEDBACK TO:
