Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JARROD OVERSON RIOT ON THE WEB @jsoverson QCon Sao Paulo
WHO IS RIOT
WE MAKE A GAME
https://www.youtube.com/watch?v=CfXQrfhFRnI
https://www.youtube.com/watch?v=gEurXD44af0 - Team DVus Gaming
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
THAT GAME GOT HUGE
LEAGUE OF LEGENDS STATS 67MILLION MONTHLY ACTIVE PLAYERS 27MILLION DAILY ACTIVE PLAYERS 7.5MILLION PEAK CONCURRENT PLAYERS...
EVERY STARTUP’S DREAM AND WORST NIGHTMARE
Company founding & age 1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014 Riot Games Netflix Google Facebook Twit...
Readjusted for first product launch 1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014 Riot Games Netflix Google ...
SCALING COMPANIES IS HARD
COMPANIES SCALING IS HARD PEOPLE
WHAT WORKS HERE DOESN’T WORK
 HERE
WHAT WORKS HERE DOESN’T WORK
 HERE
WHAT WORKS HERE DOESN’T WORK
 HERE
WHAT WORKS HERE DOESN’T WORK
 HERE
WHAT DOES SCALE?
NATURE
OR, RATHER,
WHAT HAS PROGRESSED NATURALLY
WHAT HAS… EVOLVED ORGANICALLY IN THE DIGITAL AGE? BEATEN ALL ODDS AND OUTLASTED ALL ADVERSITY? HAS SCALED SUCCESSFULLY BEY...
www.
THE INTERNET BECAUSE THE COMMUNITY IS GREAT MADE IT GREAT
HOW DID THE COMMUNITY SCALE?
IT IS DISTRIBUTED
IT IS ASYNCHRONOUS
IT IS BLIND TO CLASS, RACE, and SPECIES
YOU CAN SCALE WITHOUT THESE, BUT NOT FOREVER.
PRODUCTIVITY TIME ASYMPTOTE OF PRODUCTIVITY
PRODUCTIVITY TIME CLIFF OF CHANGE
PRODUCTIVITY TIME IF CHANGE ISN’T ACCEPTED
PRODUCTIVITY TIME DON’T FEAR CHANGE
ASYNCHRONOUS COMMUNICATION Mailing lists, IRC, Podcasts, Recorded Meetings, Wikis WHAT CAN WE DO? COMMUNITY BUILDING Inter...
THE WEB IS BUT IT’S BEEN ROUGH. AWESOME
PEAK OF INFLATED EXPECTATIONS TROUGH OF DISILLUSIONMENT HTML5 MOBILE WEB APPS PLATEAU OF REALITY The Web Platform
2008 2009 2010 2011 2012 2013 2014 LET’S MOVE ON
JAVASCRIPT
 WON
AND THIS ISN’T EVEN ITS FINAL FORM
THE WEB IS REINVENTING ITSELF RIGHT NOW
HOW DO WE GET TO THE NEXT LEVEL?
WITH YOU
NATIVE DEVELOPERS asm.js/Emscriptem is not for traditional web developers! THE WEB NEEDS MORE GAME/GRAPHIC DEVELOPERS WebG...
WHAT IS IN STORE?
WEB COMPONENTS
49 WHAT ARE WEB COMPONENTS? “Web Components” is a collection of technologies that enable better encapsulation. • Templates...
<my-element> WITHOUT HACKS“ ”
51 WHAT ARE WEB COMPONENTS TO YOU? “Web Components” are leading a fundamental shift in web evolution.
<particle-system particles=10000 texture=star type=sphere> D em o
<model-viewer model="amumu.obj"> D em o
D em o <x-gif src="animation.gif" speed="2">
SPDY/HTTP 2.0
56 WHAT IS SPDY? r SPDY is an open protocol designed to… Improve security ➡ Reduce latency Increase request efficiency … a...
MORE DATA, FEWER REQUESTS ”“
58 WHAT IS SPDY TO YOU? • Concatenation? Irrelevant. • Sprite maps? Gone. • CSS @import? Go for it!
WITH SPRITES 
 & CONCAT LOOSE FILES REQUESTS WITH SPDY ! Stats and images from https://speakerdeck.com/wesleyhales/writing...
asm.js“azzim jay ess”
WHAT IN THE WORLD IS ASM.JS?
62 WHAT ASM.JS ISN’T. asm.js is not • A plugin • A JavaScript library • A new language • A way to write code
WHAT IS ASM.JS? asm.js is a spec.
IF YOU CAN’T WRITE ASM.JS, WHAT DO YOU DO WITH IT? SHOULDN’T
66 WHAT IS ASM.JS TO YOU? The web is now a viable compilation target.
EMSCRIPTEM $ emcc hello_world.cpp ! $ node a.out.js Hello World
EMSCRIPTEM $ emcc file_access.cpp -o output.html
EMSCRIPTEM $ emcc file_access.cpp -o output.html -—preload-file asset_dir/
70 DEBUG C++ IN THE BROWSER http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.html Alon Zakai @GDC 2014
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
THERE HAS NEVER BEEN A MORE PERFECT TIME TO TAKE AN ACTIVE ROLE IN THE WEB COMMUNITY
SO TAKE AN ACTIVE ROLE
THE WEB WON AND WITH THAT VICTORY COMES NEW CHALLENGE
EDGE #2 EDGE #1
THE WEB IS OURS
AND THEIRS
KEEP IT GREAT KEEP IT OPEN GET INVOLVED
JARROD OVERSON RIOT ON THE WEB @jsoverson QCon Sao Paulo
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014
Upcoming SlideShare
Loading in …5
×

Riot on the web - Kenote @ QCon Sao Paulo 2014

1,212 views

Published on

Slides for the keynote given at QCon Sao Paulo 2014. Talk goes into the problems scaling Riot and how we've tried to solve them as well as what we've learned from the web and what lies in store next.

Published in: Technology
no profile picture user

  • Be the first to comment

Riot on the web - Kenote @ QCon Sao Paulo 2014

  1. 1. JARROD OVERSON RIOT ON THE WEB @jsoverson QCon Sao Paulo
  2. 2. WHO IS RIOT
  3. 3. WE MAKE A GAME
  4. 4. https://www.youtube.com/watch?v=CfXQrfhFRnI
  5. 5. https://www.youtube.com/watch?v=gEurXD44af0 - Team DVus Gaming
  6. 6. https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
  7. 7. https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
  8. 8. THAT GAME GOT HUGE
  9. 9. LEAGUE OF LEGENDS STATS 67MILLION MONTHLY ACTIVE PLAYERS 27MILLION DAILY ACTIVE PLAYERS 7.5MILLION PEAK CONCURRENT PLAYERS STATS  RELEASED  JANUARY  2014
  10. 10. EVERY STARTUP’S DREAM AND WORST NIGHTMARE
  11. 11. Company founding & age 1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014 Riot Games Netflix Google Facebook Twitter Blizzard
  12. 12. Readjusted for first product launch 1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014 Riot Games Netflix Google Facebook Twitter Blizzard
  13. 13. SCALING COMPANIES IS HARD
  14. 14. COMPANIES SCALING IS HARD PEOPLE
  15. 15. WHAT WORKS HERE DOESN’T WORK
 HERE
  16. 16. WHAT WORKS HERE DOESN’T WORK
 HERE
  17. 17. WHAT WORKS HERE DOESN’T WORK
 HERE
  18. 18. WHAT WORKS HERE DOESN’T WORK
 HERE
  19. 19. WHAT DOES SCALE?
  20. 20. NATURE
  21. 21. OR, RATHER,
  22. 22. WHAT HAS PROGRESSED NATURALLY
  23. 23. WHAT HAS… EVOLVED ORGANICALLY IN THE DIGITAL AGE? BEATEN ALL ODDS AND OUTLASTED ALL ADVERSITY? HAS SCALED SUCCESSFULLY BEYOND ALL REASON?
  24. 24. www.
  25. 25. THE INTERNET BECAUSE THE COMMUNITY IS GREAT MADE IT GREAT
  26. 26. HOW DID THE COMMUNITY SCALE?
  27. 27. IT IS DISTRIBUTED
  28. 28. IT IS ASYNCHRONOUS
  29. 29. IT IS BLIND TO CLASS, RACE, and SPECIES
  30. 30. YOU CAN SCALE WITHOUT THESE, BUT NOT FOREVER.
  31. 31. PRODUCTIVITY TIME ASYMPTOTE OF PRODUCTIVITY
  32. 32. PRODUCTIVITY TIME CLIFF OF CHANGE
  33. 33. PRODUCTIVITY TIME IF CHANGE ISN’T ACCEPTED
  34. 34. PRODUCTIVITY TIME DON’T FEAR CHANGE
  35. 35. ASYNCHRONOUS COMMUNICATION Mailing lists, IRC, Podcasts, Recorded Meetings, Wikis WHAT CAN WE DO? COMMUNITY BUILDING Internal conferences, Meetups, Hackathons, Communities of Practice CONTRIBUTION AND LEARNING Internal & External open source, code standards, recognition CULTURE OF OPENNESS AND EQUALITY Encourage everyone to question and communicate at any level
  36. 36. THE WEB IS BUT IT’S BEEN ROUGH. AWESOME
  37. 37. PEAK OF INFLATED EXPECTATIONS TROUGH OF DISILLUSIONMENT HTML5 MOBILE WEB APPS PLATEAU OF REALITY The Web Platform
  38. 38. 2008 2009 2010 2011 2012 2013 2014 LET’S MOVE ON
  39. 39. JAVASCRIPT
 WON
  40. 40. AND THIS ISN’T EVEN ITS FINAL FORM
  41. 41. THE WEB IS REINVENTING ITSELF RIGHT NOW
  42. 42. HOW DO WE GET TO THE NEXT LEVEL?
  43. 43. WITH YOU
  44. 44. NATIVE DEVELOPERS asm.js/Emscriptem is not for traditional web developers! THE WEB NEEDS MORE GAME/GRAPHIC DEVELOPERS WebGL is capable, performant, real and not just for games! EVERYONE! Fresh perspectives, creative thinkers, new ideas!
  45. 45. WHAT IS IN STORE?
  46. 46. WEB COMPONENTS
  47. 47. 49 WHAT ARE WEB COMPONENTS? “Web Components” is a collection of technologies that enable better encapsulation. • Templates • Shadow DOM • Custom Elements
  48. 48. <my-element> WITHOUT HACKS“ ”
  49. 49. 51 WHAT ARE WEB COMPONENTS TO YOU? “Web Components” are leading a fundamental shift in web evolution.
  50. 50. <particle-system particles=10000 texture=star type=sphere> D em o
  51. 51. <model-viewer model="amumu.obj"> D em o
  52. 52. D em o <x-gif src="animation.gif" speed="2">
  53. 53. SPDY/HTTP 2.0
  54. 54. 56 WHAT IS SPDY? r SPDY is an open protocol designed to… Improve security ➡ Reduce latency Increase request efficiency … and is a starting point for HTTP 2.0
  55. 55. MORE DATA, FEWER REQUESTS ”“
  56. 56. 58 WHAT IS SPDY TO YOU? • Concatenation? Irrelevant. • Sprite maps? Gone. • CSS @import? Go for it!
  57. 57. WITH SPRITES 
 & CONCAT LOOSE FILES REQUESTS WITH SPDY ! Stats and images from https://speakerdeck.com/wesleyhales/writing-real-time-web-apps
  58. 58. asm.js“azzim jay ess”
  59. 59. WHAT IN THE WORLD IS ASM.JS?
  60. 60. 62 WHAT ASM.JS ISN’T. asm.js is not • A plugin • A JavaScript library • A new language • A way to write code
  61. 61. WHAT IS ASM.JS? asm.js is a spec.
  62. 62. IF YOU CAN’T WRITE ASM.JS, WHAT DO YOU DO WITH IT? SHOULDN’T
  63. 63. 66 WHAT IS ASM.JS TO YOU? The web is now a viable compilation target.
  64. 64. EMSCRIPTEM $ emcc hello_world.cpp ! $ node a.out.js Hello World
  65. 65. EMSCRIPTEM $ emcc file_access.cpp -o output.html
  66. 66. EMSCRIPTEM $ emcc file_access.cpp -o output.html -—preload-file asset_dir/
  67. 67. 70 DEBUG C++ IN THE BROWSER http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.html Alon Zakai @GDC 2014
  68. 68. https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
  69. 69. THERE HAS NEVER BEEN A MORE PERFECT TIME TO TAKE AN ACTIVE ROLE IN THE WEB COMMUNITY
  70. 70. SO TAKE AN ACTIVE ROLE
  71. 71. THE WEB WON AND WITH THAT VICTORY COMES NEW CHALLENGE
  72. 72. EDGE #2 EDGE #1
  73. 73. THE WEB IS OURS
  74. 74. AND THEIRS
  75. 75. KEEP IT GREAT KEEP IT OPEN GET INVOLVED
  76. 76. JARROD OVERSON RIOT ON THE WEB @jsoverson QCon Sao Paulo

×