UI AS A GLEGG SERVICE RIOT GAMES @RIOTJUL ESFERN TEAM ORIENTED - - PowerPoint PPT Presentation

▶
ui as a
SMART_READER_LITE
LIVE PREVIEW

UI AS A GLEGG SERVICE RIOT GAMES @RIOTJUL ESFERN TEAM ORIENTED - - PowerPoint PPT Presentation

Sep 26, 2022 292 likes •1.17k views

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

slide-1
SLIDE 1

DAN GLEGG

UI AS A SERVICE RIOT

GAMES @RIOTJUL ESFERN

slide-2
SLIDE 2
slide-3
SLIDE 3

TEAM ORIENTED

slide-4
SLIDE 4

100+ CHAMPIONS

slide-5
SLIDE 5

MODERN FANTASY

slide-6
SLIDE 6

LEAGUE OF LEGENDS STATS

7.5MILL ION

PEAK CONCURRENT PLAYERS

STATS RELEASED JANUARY 2014

67MILLI ON

MONTHLY ACTIVE PLAYERS MORE THAN

27MILLI ON

DAILY ACTIVE PLAYERS MORE THAN MORE THAN

slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9

BUNCH O‟ VERTICALS

slide-10
SLIDE 10

DISCRETE APPLICATIONS DISCRETE EXPERIENCES

slide-11
SLIDE 11

TH E

EXPERI ENCE PLAYE R DEFINE S ARCHITE CTURE

slide-12
SLIDE 12
slide-13
SLIDE 13

:(

slide-14
SLIDE 14

TL;DR NOPE

slide-15
SLIDE 15
slide-16
SLIDE 16

DATA SERV ICE UI SERV ICE DATA

slide-17
SLIDE 17

OV ER

THE WIRE OBJEC TS

slide-18
SLIDE 18

DATA SERV ICE

slide-19
SLIDE 19

DATA SERV ICE UI SERV ICE DATA UI

SOON-TO-BE- REVEALED MAGIC

slide-20
SLIDE 20

OV ER

THE WIRE EXPERI ENCE

slide-21
SLIDE 21

RECOGNIZED FOR EXCELLENCE

IN THE FIELD OF RENDERING STUFF FROM OTHER APPS

WITHOUT NECESSARILY KNOWING OR CARING WHAT THAT STUFF IS

OR HOW IT SHOULD LOOK OR ANYTHING LIKE THAT

A STANDARD

slide-22
SLIDE 22

OEMBED IS BEST EMBED

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

*IT IS NOT QUITE THIS SIMPLE *(SORRY)

slide-26
SLIDE 26

PUBLISH CONTENT

slide-27
SLIDE 27

<!DOCTYPE HTML> <html> <head> … <link rel=“alternate” type=“application/json+oembed” href=“/path/to/oembed.json” /> … </head> …

slide-28
SLIDE 28

{ “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

slide-29
SLIDE 29

CONSUME CONTENT

slide-30
SLIDE 30

OEMBE D PROVI DER

slide-31
SLIDE 31

PROVI DER

slide-32
SLIDE 32

I HAVE THIS URL FOR SOMETHING

I WANT TO SHOW A THING, NOT JUST A LINK

I HAVE THIS MUCH SPACE, TELL ME HOW TO DISPLAY IT

KTHX

HEY PROVIDER

slide-33
SLIDE 33

GET /OEMBED

?URL=$FULL_URL_OF_THING_I _WANT

&MAXWIDTH=$WIDTH&MAXHEIGHT=$H EIGHT&FORMAT=JSON

RESPONSE FOLLOWS

HTTP://$PRO VIDER

slide-34
SLIDE 34

IS

POROU S THE WEB

slide-35
SLIDE 35

MAKE IT

AWESOME

slide-36
SLIDE 36

WEB COMPONEN TS

AND OTHER HOT CONFERENCE TOPICS

slide-37
SLIDE 37

<SELECT> <OPTION NAME=“1”>ONE</OPTIO N> <OPTION NAME=“2”>TWO</OPTIO N> </SELECT> ONE

slide-38
SLIDE 38

“MAKE IT POP”

AND OTHER SCOPE- ENLARGING INCANTATIONS

slide-39
SLIDE 39

<SELECT CLASS=“CUSTOM- SELECT”> <OPTION NAME=“1”>ONE</LI> <OPTION NAME=“2”>TWO</LI>

slide-40
SLIDE 40

<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

slide-41
SLIDE 41

BOON #1

LIFECYCLE MANAGEMENT

slide-42
SLIDE 42

<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

slide-43
SLIDE 43

BOON #2

MODIFIABLE ONCE RENDERED

slide-44
SLIDE 44

SHADOW DOM

DOM VS.

slide-45
SLIDE 45

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

slide-46
SLIDE 46

document.registerElement(„custom- select‟, proto); proto.createdC allback var shadow = this.createShadowRoot(); shadow.appendChild(awesomeness);

slide-47
SLIDE 47

<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

slide-48
SLIDE 48

ADD BEHAVIOR TO CONTENT

(BUT BRING YOUR OWN CONTENT)

WEB COMPONEN TS

slide-49
SLIDE 49
slide-50
SLIDE 50

POLYMER

polymer-project.org

slide-51
SLIDE 51

MAKE IT

AWESOME

slide-52
SLIDE 52

LASSO.JS

slide-53
SLIDE 53

CLICK HERE

slide-54
SLIDE 54
slide-55
SLIDE 55

AS EASY AS THE HYPERLINK

slide-56
SLIDE 56

<a href=“http://awesome.com”> Click here </a>

slide-57
SLIDE 57

<lasso-embed url=“http://awesome.com”> Loading your stuff now… </lasso-embed>

slide-58
SLIDE 58

PROVI DER OEMBE D

slide-59
SLIDE 59

RODEO

slide-60
SLIDE 60

“html”: “ <script type=“text/javascript”> alert(„LOL PWNED‟); </script>”

slide-61
SLIDE 61

“html”: “ <script type=“text/javascript”> $(„#login-form‟).submit( stealPlayerAccount ); </script>”

slide-62
SLIDE 62

TRUST THIS CONTENT? YES/NO/HELL NO

slide-63
SLIDE 63

*.*.HOSTNAME.MA SK /**/PATH/MASK/*.H TML /^REGEX(P)?$/

slide-64
SLIDE 64

DENIED CONTE NT

slide-65
SLIDE 65

SANDB OXED CONTE NT

slide-66
SLIDE 66

TRUST ED CONTE NT

slide-67
SLIDE 67

GOING FAST

OR AT LEAST LOOKING FAST

slide-68
SLIDE 68

DOIN‟ IT LIVE RIGHT IN THE GAME

slide-69
SLIDE 69

DEMO

slide-70
SLIDE 70
slide-71
SLIDE 71

DEMO

slide-72
SLIDE 72

IMGUR FLICKR VIMEO TWITTER DEVIANTART YOUR NEXT APP

slide-73
SLIDE 73

SURVIV ING THE WILD

slide-74
SLIDE 74

“html”: “_______”

slide-75
SLIDE 75

IS CO-OPERATIVE WHERE POSSIBLE

HARMONIOUS AND CONSIDERATE ALWAYS

IDIOMATIC WEB UI

slide-76
SLIDE 76

<IFRAME />

slide-77
SLIDE 77

< />

slide-78
SLIDE 78

ADD BEHAVIOR TO CONTENT

(BUT BRING YOUR OWN CONTENT)

WEB COMPONEN TS

slide-79
SLIDE 79

TELEPORTS CONTENT AND BEHAVIOR

ACROSS THE WEB

OEMBED

slide-80
SLIDE 80
slide-81
SLIDE 81

CO-OP BOOTSTRAP CUSTOM TAG &

slide-82
SLIDE 82

+

<custom-tag><including-content /></custom-tag> <script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomTagDependency) { // inject compiled JS script tag } </script>

slide-83
SLIDE 83

+

<div class=“custom-thing”>…</div> <script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomThingEnhancer) { // inject compiled JS script tag } </script>

slide-84
SLIDE 84

IS

REMIXA BLE THE WEB

slide-85
SLIDE 85
slide-86
SLIDE 86

GITHUB.COM/R IOTGAMES SOON™

DELICIOUS, DELICIOUS FEEDBACK

slide-87
SLIDE 87

@RIOTJULESF ERN

QUESTIONS AND FEEDBACK TO: