UI as a Service: Breaking Down the Web with oEmbed and Web Components
•
3 j'aime•962 vues
Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1GafB4z. Dan Glegg presents the tools that Riot has developed to deliver user interfaces as a service. Filmed at qconsf.com. A 15-year advocate of tasteful web engineering, Dan Glegg is thrilled to work with such dynamic and exciting technologies.
Recommandé
Recommandé
Contenu connexe
Plus de C4Media
Plus de C4Media (20)
Dernier
Dernier (20)
UI as a Service: Breaking Down the Web with oEmbed and Web Components
- 1. DAN GLEGGUI AS A SERVICE RIOT GAMES @RIOTJUL ESFERN
- 2. InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations /oembed
- 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
- 8. LEAGUE OF LEGENDS STATS 7.5MILL IONPEAK CONCURRENTPLAYERS STATS RELEASED JANUARY 2014 67MILLI ONMONTHLY ACTIVEPLAYERS MORE THAN 27MILLI ONDAILY ACTIVE PLAYERS MORE THAN MORE THAN
- 11. BUNCH O‟
- 15. :(
- 16. TL;DR NOPE
- 20. DATA SERV ICE
- 23. 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 RECOGNIZED FOR EXCELLENCE
- 27. *IT IS NOT QUITE THIS SIMPLE *(SORRY)
- 28. PUBLISH CO
- 30. { “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
- 31. CONSUME CONTENT
- 32. OEMBED PROVIDER
- 33. PROVIDER
- 34. KTHX HEYPROVIDER 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
- 37. MAKE IT AWESOME
- 38. AND OTHER HOT CONFERENCE TOPICS WEB COMPONENTS
- 40. AND OTHER SCOPE- ENLARGING INCANTATIONS “MAKE IT POP”
- 41. <SELECT CLASS=“CUSTOM-SELECT”> <OPTION NAME=“1”>ONE</LI> <OPTION NAME=“2”>TWO</LI> </SELECT>
- 42. + <SELECT CLASS=“CUSTOM-SELECT”>…</SELECT> document.querySelectorAll(„.custom-select‟).forEach(…); DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV SPAN DIVDIV A DIV SPAN DIV IMG DIV IMG DIV SPAN A DIV A DIV DIV DIVDIV DIV SPAN DIV DIV SPAN IMG A DIV DIV SPAN A DIV DIV DIV
- 44. + <CUSTOM-SELECT>…</CUSTOM-SELECT> document.registerElement(„custom-select‟, proto); proto.createdCallback 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
- 45. BOON #2 MODIFIABLE ONCE RENDERED
- 47. DOM NODE CONTENT DISPLAY <OPTION NAME=“FOO”>FOO</OPTION> <OPTION NAME=“BAR”>BAR</OPTION> DIV DIV IMG SPAN FOO A DIV IMG IMG DIV DIV DIV IMG SPAN BAR A DIV IMG IMG DIV
- 48. var shadow = this.createShadowRoot(); shadow.appendChild(awesomeness); document.registerElement(„custom-select‟, proto); proto.createdCallback
- 49. <OPTION NAME=“FOO”>FOO</OPTION> <OPTION NAME=“BAR”>BAR</OPTION> <OPTION NAME=“NEW”>NEW</OPTION> UPDATE SHADOW DOM DIV DIV IMG SPAN FOO ADIV IMG IMG DIV DIV DIV IMG SPAN BAR A DIV IMG IMG DIV DIV DIV IMG SPAN NEW A DIV IMG IMG DIV NODE INSERTED myComponent.js
- 50. ADD BEHAVIOR TO CONTENT WEB COMPONENTS (BUT BRING YOUR OWN CONTENT)
- 53. MAKE IT AWESOME
- 54. LASSO.JS
- 55. CLICK HERE
- 59. <lasso-embed url=“http://awesome.com”> Loading your stuff now… </lasso-embed>
- 60. OEMBED PROVIDER
- 61. RODEO
- 62. alert(„LOL PWNED‟); </script>” “html”: “ <script type=“text/javascript”>
- 63. $(„#login-form‟).submit( stealPlayerAccount ); </script>” “html”: “ <script type=“text/javascript”>
- 66. DENIED CONTENT
- 68. CONTENT TRUSTED
- 69. GOING FAST OR AT LEAST LOOKING FAST
- 70. DOIN‟ IT LIVE RIGHT IN THE GAME
- 71. DEMO
- 73. DEMO
- 77. IS CO-OPERATIVE WHERE POSSIBLE HARMONIOUS AND CONSIDERATE ALWAYS IDIOMATIC WEB UI
- 78. <IFRAME />
- 79. < />
- 80. WEB COMPONENTS ADD BEHAVIOR TO CONTENT (BUT BRING YOUR OWN CONTENT)
- 81. ACROSS THE WEB OEMBED TELEPORT CONTENT AND BEHAVIOR
- 84. +<script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomTagDependency) { } </script> <custom-tag><including-content /></custom-tag> // inject compiled JS script tag
- 85. + <div class=“custom-thing”>…</div> <script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomThingEnhancer) { } </script> // inject compiled JS script tag
- 89. QUESTIONS AND FEEDBACK TO: @RIOTJULESFERN
- 90. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/oembed