DAN UI AS A GLEGG SERVICE RIOT GAMES @RIOTJUL ESFERN
TEAM ORIENTED
100+ CHAMPIONS
MODERN FANTASY
LEAGUE OF LEGENDS STATS MORE THAN MORE THAN MORE THAN 67MILLI 27MILLI 7.5MILL ON ON ION MONTHLY DAILY ACTIVE PEAK PLAYERS PLAYERS PLAYERS ACTIVE CONCURRENT STATS RELEASED JANUARY 2014
BUNCH O‟ VERTICALS
DISCRETE APPLICATIONS DISCRETE EXPERIENCES
ARCHITE DEFINE CTURE TH S E PLAYE EXPERI R ENCE
:(
TL;DR NOPE
DATA DATA SERV SERV ICE ICE UI
OBJEC OV TS ER THE WIRE
DATA SERV ICE
DATA DATA SERV SERV ICE ICE UI UI SOON-TO-BE- REVEALED MAGIC
EXPERI OV ENCE ER THE WIRE
A RECOGNIZED FOR STANDARD IN THE FIELD OF RENDERING EXCELLENCE WITHOUT NECESSARILY KNOWING OR STUFF FROM OTHER APPS OR HOW IT SHOULD LOOK OR ANYTHING LIKE THAT CARING WHAT THAT STUFF IS
OEMBED IS BEST EMBED
*IT IS NOT QUITE THIS *(SORRY) SIMPLE
PUBLISH CONTENT
<!DOCTYPE HTML> <html> <head> … <link rel= “ alternate ” type=“ application/json+oembed ” href =“ /path/to/oembed.json ” /> … </head> …
1 ST PARTY 3 RD PARTY CODE CODE { “title”: “League of Legends…”, “type”: “rich”, “ thumbnail_url ”: “https://…”, “width”: 1920, <!DOCTYPE HTML> <html> “height”: 1080, <head> “html”: <title>League of Legends…</title> “<div …> <link OMG STUFF rel =“ alternate ” </div> ” type=“ application/json+oembed ” href =“ /path/to/oembed.json ” /> } … </head> …
CONSUME CONTENT
OEMBE PROVI D DER
PROVI DER
HEY I HAVE THIS URL FOR PROVIDER I WANT TO SHOW A THING, NOT SOMETHING I HAVE THIS MUCH SPACE, TELL ME JUST A LINK KTHX HOW TO DISPLAY IT
HTTP://$PRO GET /OEMBED VIDER ?URL=$FULL_URL_OF_THING_I &MAXWIDTH=$WIDTH&MAXHEIGHT=$H _WANT RESPONSE FOLLOWS EIGHT&FORMAT=JSON
THE IS WEB POROU S
MAKE IT AWESOME
WEB AND OTHER HOT COMPONEN CONFERENCE TOPICS TS
<SELECT> <OPTION NAME=“1”>ONE</OPTIO N> <OPTION NAME= “2”>TWO< /OPTIO ONE N> </SELECT>
“MAKE IT AND OTHER SCOPE- POP” 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
BOON #1 LIFECYCLE 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 #2 MODIFIABLE ONCE RENDERED
DOM VS. SHADOW DOM
<OPTION NAME=“FOO”>FOO</OP CONTE TION> NT <OPTION DOM NAME= “BAR”>BAR< /OPT NODE ION> DISPLA DIV DIV IMG SPAN FOO A Y DIV IMG IMG DIV DIV DIV IMG SPAN BAR A DIV IMG IMG DIV
document.registerElement („custom - select‟, proto); proto.createdC allback var shadow = this.createShadowRoot(); shadow.appendChild(awesomeness);
<OPTION NAME=“FOO”>FOO</OPTI ON> <OPTION NODE NAME= “BAR”>BAR< /OPTI myCompo INSERTE ON> UPDATE nent.js D <OPTION SHADOW DIV DIV IMG SPAN FOO A NAME= “NEW”>NEW< /OPT DOM DIV IMG IMG DIV DIV DIV ION> IMG SPAN BAR A DIV IMG IMG DIV DIV DIV IMG SPAN NEW
WEB ADD BEHAVIOR TO COMPONEN (BUT BRING YOUR OWN CONTENT CONTENT) TS
POLYMER polymer-project.org
MAKE IT AWESOME
LASSO.JS
CLICK HERE
AS EASY AS THE HYPERLINK
<a href =“http:// awesome.com ”> Click here </a>
<lasso-embed url =“http:// awesome.com ”> Loading your stuff now… </lasso-embed>
OEMBE PROVI D DER
RODEO
“html”: “ <script type=“text/ javascript ”> alert(„LOL PWNED‟); </script>”
“html”: “ <script type=“text/ javascript ”> $(„ #login- form‟).submit( stealPlayerAccount ); </script>”
TRUST THIS YES/NO/HELL CONTENT? NO
*.*.HOSTNAME.MA SK /**/PATH/MASK/*.H /^REGEX(P)?$/ TML
DENIED CONTE NT
SANDB CONTE OXED NT
TRUST CONTE ED NT
GOING FAST OR AT LEAST LOOKING FAST
DOIN‟ IT LIVE RIGHT IN THE GAME
DEMO
DEMO
VIMEO FLICKR IMGUR TWITTER DEVIANTART YOUR NEXT APP
SURVIV THE ING WILD
“html”: “ _______ ”
IDIOMATIC IS CO-OPERATIVE WEB UI HARMONIOUS AND WHERE POSSIBLE CONSIDERATE ALWAYS
<IFRAME />
< />
WEB ADD BEHAVIOR TO COMPONEN (BUT BRING YOUR OWN CONTENT CONTENT) TS
OEMBED TELEPORTS ACROSS THE WEB CONTENT AND BEHAVIOR
CUSTOM TAG & CO-OP BOOTSTRAP
<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>
THE IS WEB REMIXA BLE
GITHUB.COM/R DELICIOUS, DELICIOUS FEEDBACK SOON™ IOTGAMES
@RIOTJULESF QUESTIONS AND FEEDBACK TO: ERN
Recommend
More recommend
