ui as a
play

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

  1. DAN UI AS A GLEGG SERVICE RIOT GAMES @RIOTJUL ESFERN

  3. TEAM ORIENTED

  4. 100+ CHAMPIONS

  5. MODERN FANTASY

  6. 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

  9. BUNCH O‟ VERTICALS

  10. DISCRETE APPLICATIONS DISCRETE EXPERIENCES

  11. ARCHITE DEFINE CTURE TH S E PLAYE EXPERI R ENCE

  13. :(

  14. TL;DR NOPE

  16. DATA DATA SERV SERV ICE ICE UI

  17. OBJEC OV TS ER THE WIRE

  18. DATA SERV ICE

  19. DATA DATA SERV SERV ICE ICE UI UI SOON-TO-BE- REVEALED MAGIC

  20. EXPERI OV ENCE ER THE WIRE

  21. 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

  22. OEMBED IS BEST EMBED

  25. *IT IS NOT QUITE THIS *(SORRY) SIMPLE

  26. PUBLISH CONTENT

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

  28. 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> …

  29. CONSUME CONTENT

  30. OEMBE PROVI D DER

  31. PROVI DER

  32. 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

  33. HTTP://$PRO GET /OEMBED VIDER ?URL=$FULL_URL_OF_THING_I &MAXWIDTH=$WIDTH&MAXHEIGHT=$H _WANT RESPONSE FOLLOWS EIGHT&FORMAT=JSON

  34. THE IS WEB POROU S

  35. MAKE IT AWESOME

  36. WEB AND OTHER HOT COMPONEN CONFERENCE TOPICS TS

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

  38. “MAKE IT AND OTHER SCOPE- POP” ENLARGING INCANTATIONS

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

  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

  41. BOON #1 LIFECYCLE MANAGEMENT

  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

  43. BOON #2 MODIFIABLE ONCE RENDERED

  44. DOM VS. SHADOW DOM

  45. <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

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

  47. <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

  48. WEB ADD BEHAVIOR TO COMPONEN (BUT BRING YOUR OWN CONTENT CONTENT) TS

  50. POLYMER polymer-project.org

  51. MAKE IT AWESOME

  52. LASSO.JS

  53. CLICK HERE

  55. AS EASY AS THE HYPERLINK

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

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

  58. OEMBE PROVI D DER

  59. RODEO

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

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

  62. TRUST THIS YES/NO/HELL CONTENT? NO

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

  64. DENIED CONTE NT

  65. SANDB CONTE OXED NT

  66. TRUST CONTE ED NT

  67. GOING FAST OR AT LEAST LOOKING FAST

  68. DOIN‟ IT LIVE RIGHT IN THE GAME

  69. DEMO

  71. DEMO

  72. VIMEO FLICKR IMGUR TWITTER DEVIANTART YOUR NEXT APP

  73. SURVIV THE ING WILD

  74. “html”: “ _______ ”

  75. IDIOMATIC IS CO-OPERATIVE WEB UI HARMONIOUS AND WHERE POSSIBLE CONSIDERATE ALWAYS

  76. <IFRAME />

  77. < />

  78. WEB ADD BEHAVIOR TO COMPONEN (BUT BRING YOUR OWN CONTENT CONTENT) TS

  79. OEMBED TELEPORTS ACROSS THE WEB CONTENT AND BEHAVIOR

  81. CUSTOM TAG & CO-OP BOOTSTRAP

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

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

  84. THE IS WEB REMIXA BLE

  86. GITHUB.COM/R DELICIOUS, DELICIOUS FEEDBACK SOON™ IOTGAMES

  87. @RIOTJULESF QUESTIONS AND FEEDBACK TO: ERN

Recommend

More recommend