Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
DAN
GLEGGUI AS A
SERVICE RIOT
GAMES
@RIOTJUL
ESFERN
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practi...
TEAM
ORIENTED
100+
CHAMPIONS
MODERN
FANTASY
LEAGUE OF LEGENDS STATS
7.5MILL
IONPEAK
CONCURRENTPLAYERS
STATS RELEASED JANUARY 2014
67MILLI
ONMONTHLY
ACTIVEPLAYERS
MORE...
BUNCH O‟
DISCRETE
APPLICATIONS
DISCRETE
EXPERIENCES
ARCHITECTURE
DEFINES
PLAYER
EXPERIENCE
THE
:(
TL;DR
NOPE
DATA
SERV
ICE
UI
SERV
ICE
DATA
OBJECTS
THE WIRE
OVER
DATA
SERV
ICE
DATA
SERV
ICE
UI
SERV
ICE
DATA
UISOON-TO-BE-
REVEALED MAGIC
EXPERIENCE
THE WIRE
OVER
IN THE FIELD OF RENDERING
STUFF FROM OTHER APPS
WITHOUT NECESSARILY KNOWING OR
CARING WHAT THAT STUFF IS
OR HOW IT SHOULD ...
OEMBED
IS BEST
EMBED
*IT IS NOT QUITE THIS
SIMPLE
*(SORRY)
PUBLISH CO
<!DOCTYPE HTML>
<html>
<head>
…
<link
rel=“alternate”
type=“application/json+oembed”
href=“/path/to/oembed.json” />
…
</he...
{
“title”: “League of Legends…”,
“type”: “rich”,
“thumbnail_url”: “https://…”,
“width”: 1920,
“height”: 1080,
“html”:
“<di...
CONSUME
CONTENT
OEMBED
PROVIDER
PROVIDER
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...
GET /OEMBED
?URL=$FULL_URL_OF_THING_I
_WANT
&MAXWIDTH=$WIDTH&MAXHEIGHT=$H
EIGHT&FORMAT=JSON
RESPONSE FOLLOWS
HTTP://$PROVI...
IS
THE
WEB
POROUS
MAKE IT
AWESOME
AND OTHER HOT
CONFERENCE TOPICS
WEB COMPONENTS
ONE
NAME=“1”>ONE</OPTION>
<SELECT>
<OPTION
<OPTION NAME=“2”>TWO</OPTION>
</SELECT>
AND OTHER SCOPE-
ENLARGING INCANTATIONS
“MAKE IT POP”
<SELECT CLASS=“CUSTOM-SELECT”>
<OPTION NAME=“1”>ONE</LI>
<OPTION NAME=“2”>TWO</LI>
</SELECT>
+
<SELECT CLASS=“CUSTOM-SELECT”>…</SELECT>
document.querySelectorAll(„.custom-select‟).forEach(…);
DIV DIV DIV DIV DIV DIV...
BOON #1
LIFECYCLE
MANAGEMENT
+
<CUSTOM-SELECT>…</CUSTOM-SELECT>
document.registerElement(„custom-select‟, proto);
proto.createdCallback
CUSTOM-SELECT D...
BOON #2
MODIFIABLE ONCE RENDERED
DOM
DOM VS.
SHADOW
DOM NODE
CONTENT
DISPLAY
<OPTION NAME=“FOO”>FOO</OPTION>
<OPTION NAME=“BAR”>BAR</OPTION>
DIV DIV IMG SPAN FOO A DIV IMG IM...
var shadow = this.createShadowRoot();
shadow.appendChild(awesomeness);
document.registerElement(„custom-select‟, proto);
p...
<OPTION NAME=“FOO”>FOO</OPTION>
<OPTION NAME=“BAR”>BAR</OPTION>
<OPTION NAME=“NEW”>NEW</OPTION>
UPDATE SHADOW DOM
DIV DIV ...
ADD BEHAVIOR TO
CONTENT
WEB COMPONENTS
(BUT BRING YOUR OWN
CONTENT)
POLYMERpolymer-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>
OEMBED
PROVIDER
RODEO
alert(„LOL PWNED‟);
</script>”
“html”: “ <script type=“text/javascript”>
$(„#login-form‟).submit(
stealPlayerAccount
);
</script>”
“html”: “ <script type=“text/javascript”>
YES/NO/HELL
NO
TRUST THIS CONTENT?
/^REGEX(P)?$/
*.*.HOSTNAME.MASK
/**/PATH/MASK/*.HTML
DENIED
CONTENT
CONTENT
SANDBOXED
CONTENT
TRUSTED
GOING FAST
OR AT LEAST LOOKING
FAST
DOIN‟ IT LIVE
RIGHT IN THE GAME
DEMO
DEMO
VIMEO
FLICKR
IMGUR
TWITTER
DEVIANTART
YOUR NEXT APP
SURVIVING
THE WILD
“html”:
“_______”
IS CO-OPERATIVE
WHERE POSSIBLE
HARMONIOUS AND
CONSIDERATE ALWAYS
IDIOMATIC WEB UI
<IFRAME
/>
< />
WEB COMPONENTS
ADD BEHAVIOR TO CONTENT
(BUT BRING YOUR OWN CONTENT)
ACROSS THE WEB
OEMBED
TELEPORT CONTENT AND BEHAVIOR
CO-OP
BOOTSTRAP
CUSTOM TAG &
+<script type=“text/javascript”>
var ns = window.Riot || {};
if(!ns.CustomTagDependency) {
}
</script>
<custom-tag><includ...
+
<div class=“custom-thing”>…</div>
<script type=“text/javascript”>
var ns = window.Riot || {};
if(!ns.CustomThingEnhancer...
IS
THE WEB
REMIXABLE
DELICIOUS, DELICIOUS FEEDBACK
GITHUB.COM/RIOTGAMES
SOON™
QUESTIONS AND FEEDBACK TO:
@RIOTJULESFERN
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/oembed
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
UI as a Service: Breaking Down the Web with oEmbed and Web Components
Prochain SlideShare
Chargement dans…5
×

UI as a Service: Breaking Down the Web with oEmbed and Web Components

829 vues

Publié le

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.

Publié dans : Technologie

UI as a Service: Breaking Down the Web with oEmbed and Web Components

  1. 1. DAN GLEGGUI AS A SERVICE RIOT GAMES @RIOTJUL ESFERN
  2. 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. 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
  4. 4. TEAM ORIENTED
  5. 5. 100+ CHAMPIONS
  6. 6. MODERN FANTASY
  7. 7. 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
  8. 8. BUNCH O‟
  9. 9. DISCRETE APPLICATIONS DISCRETE EXPERIENCES
  10. 10. ARCHITECTURE DEFINES PLAYER EXPERIENCE THE
  11. 11. :(
  12. 12. TL;DR NOPE
  13. 13. DATA SERV ICE UI SERV ICE DATA
  14. 14. OBJECTS THE WIRE OVER
  15. 15. DATA SERV ICE
  16. 16. DATA SERV ICE UI SERV ICE DATA UISOON-TO-BE- REVEALED MAGIC
  17. 17. EXPERIENCE THE WIRE OVER
  18. 18. 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
  19. 19. OEMBED IS BEST EMBED
  20. 20. *IT IS NOT QUITE THIS SIMPLE *(SORRY)
  21. 21. PUBLISH CO
  22. 22. <!DOCTYPE HTML> <html> <head> … <link rel=“alternate” type=“application/json+oembed” href=“/path/to/oembed.json” /> … </head> …
  23. 23. { “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
  24. 24. CONSUME CONTENT
  25. 25. OEMBED PROVIDER
  26. 26. PROVIDER
  27. 27. 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
  28. 28. GET /OEMBED ?URL=$FULL_URL_OF_THING_I _WANT &MAXWIDTH=$WIDTH&MAXHEIGHT=$H EIGHT&FORMAT=JSON RESPONSE FOLLOWS HTTP://$PROVIDER
  29. 29. IS THE WEB POROUS
  30. 30. MAKE IT AWESOME
  31. 31. AND OTHER HOT CONFERENCE TOPICS WEB COMPONENTS
  32. 32. ONE NAME=“1”>ONE</OPTION> <SELECT> <OPTION <OPTION NAME=“2”>TWO</OPTION> </SELECT>
  33. 33. AND OTHER SCOPE- ENLARGING INCANTATIONS “MAKE IT POP”
  34. 34. <SELECT CLASS=“CUSTOM-SELECT”> <OPTION NAME=“1”>ONE</LI> <OPTION NAME=“2”>TWO</LI> </SELECT>
  35. 35. + <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
  36. 36. BOON #1 LIFECYCLE MANAGEMENT
  37. 37. + <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
  38. 38. BOON #2 MODIFIABLE ONCE RENDERED
  39. 39. DOM DOM VS. SHADOW
  40. 40. 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
  41. 41. var shadow = this.createShadowRoot(); shadow.appendChild(awesomeness); document.registerElement(„custom-select‟, proto); proto.createdCallback
  42. 42. <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
  43. 43. ADD BEHAVIOR TO CONTENT WEB COMPONENTS (BUT BRING YOUR OWN CONTENT)
  44. 44. POLYMERpolymer-project.org
  45. 45. MAKE IT AWESOME
  46. 46. LASSO.JS
  47. 47. CLICK HERE
  48. 48. AS EASY AS THE HYPERLINK
  49. 49. <a href=“http://awesome.com”> Click here </a>
  50. 50. <lasso-embed url=“http://awesome.com”> Loading your stuff now… </lasso-embed>
  51. 51. OEMBED PROVIDER
  52. 52. RODEO
  53. 53. alert(„LOL PWNED‟); </script>” “html”: “ <script type=“text/javascript”>
  54. 54. $(„#login-form‟).submit( stealPlayerAccount ); </script>” “html”: “ <script type=“text/javascript”>
  55. 55. YES/NO/HELL NO TRUST THIS CONTENT?
  56. 56. /^REGEX(P)?$/ *.*.HOSTNAME.MASK /**/PATH/MASK/*.HTML
  57. 57. DENIED CONTENT
  58. 58. CONTENT SANDBOXED
  59. 59. CONTENT TRUSTED
  60. 60. GOING FAST OR AT LEAST LOOKING FAST
  61. 61. DOIN‟ IT LIVE RIGHT IN THE GAME
  62. 62. DEMO
  63. 63. DEMO
  64. 64. VIMEO FLICKR IMGUR TWITTER DEVIANTART YOUR NEXT APP
  65. 65. SURVIVING THE WILD
  66. 66. “html”: “_______”
  67. 67. IS CO-OPERATIVE WHERE POSSIBLE HARMONIOUS AND CONSIDERATE ALWAYS IDIOMATIC WEB UI
  68. 68. <IFRAME />
  69. 69. < />
  70. 70. WEB COMPONENTS ADD BEHAVIOR TO CONTENT (BUT BRING YOUR OWN CONTENT)
  71. 71. ACROSS THE WEB OEMBED TELEPORT CONTENT AND BEHAVIOR
  72. 72. CO-OP BOOTSTRAP CUSTOM TAG &
  73. 73. +<script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomTagDependency) { } </script> <custom-tag><including-content /></custom-tag> // inject compiled JS script tag
  74. 74. + <div class=“custom-thing”>…</div> <script type=“text/javascript”> var ns = window.Riot || {}; if(!ns.CustomThingEnhancer) { } </script> // inject compiled JS script tag
  75. 75. IS THE WEB REMIXABLE
  76. 76. DELICIOUS, DELICIOUS FEEDBACK GITHUB.COM/RIOTGAMES SOON™
  77. 77. QUESTIONS AND FEEDBACK TO: @RIOTJULESFERN
  78. 78. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/oembed

×