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,058 views
842 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

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

×