1.
JARROD OVERSON
RIOT ON THE
WEB
@jsoverson
QCon Sao Paulo

2.
WHO IS
RIOT

3.
WE MAKE A GAME

4.
https://www.youtube.com/watch?v=CfXQrfhFRnI

5.
https://www.youtube.com/watch?v=gEurXD44af0 - Team DVus Gaming

6.
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm

7.
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm

8.
THAT GAME GOT HUGE

9.
LEAGUE OF LEGENDS STATS
67MILLION
MONTHLY ACTIVE
PLAYERS
27MILLION
DAILY ACTIVE
PLAYERS
7.5MILLION
PEAK CONCURRENT
PLAYERS
STATS
RELEASED
JANUARY
2014

10.
EVERY STARTUP’S DREAM AND WORST NIGHTMARE

11.
Company founding & age
1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014
Riot Games
Netflix
Google
Facebook
Twitter
Blizzard

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.
SCALING
COMPANIES
IS HARD

14.
COMPANIES
SCALING
IS HARD
PEOPLE

15.
WHAT WORKS
HERE
DOESN’T WORK
HERE

16.
WHAT WORKS
HERE
DOESN’T WORK
HERE

17.
WHAT WORKS
HERE
DOESN’T WORK
HERE

18.
WHAT WORKS
HERE
DOESN’T WORK
HERE

19.
WHAT DOES SCALE?

20.
NATURE

21.
OR, RATHER,

22.
WHAT HAS PROGRESSED NATURALLY

23.
WHAT HAS…
EVOLVED ORGANICALLY IN THE DIGITAL AGE?
BEATEN ALL ODDS AND OUTLASTED ALL ADVERSITY?
HAS SCALED SUCCESSFULLY BEYOND ALL REASON?

24.
www.

25.
THE INTERNET
BECAUSE THE
COMMUNITY
IS GREAT
MADE IT GREAT

26.
HOW DID THE COMMUNITY SCALE?

27.
IT IS DISTRIBUTED

28.
IT IS ASYNCHRONOUS

29.
IT IS BLIND TO CLASS, RACE, and SPECIES

30.
YOU CAN SCALE WITHOUT THESE,
BUT NOT FOREVER.

31.
PRODUCTIVITY
TIME
ASYMPTOTE OF PRODUCTIVITY

32.
PRODUCTIVITY
TIME
CLIFF OF CHANGE

33.
PRODUCTIVITY
TIME
IF CHANGE ISN’T ACCEPTED

34.
PRODUCTIVITY
TIME
DON’T FEAR CHANGE

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.
THE WEB IS
BUT IT’S BEEN ROUGH.
AWESOME

37.
PEAK OF INFLATED EXPECTATIONS
TROUGH OF DISILLUSIONMENT
HTML5
MOBILE WEB APPS
PLATEAU OF REALITY
The Web
Platform

38.
2008 2009 2010 2011 2012 2013 2014
LET’S MOVE ON

39.
JAVASCRIPT
WON

40.
AND THIS ISN’T EVEN ITS FINAL FORM

41.
THE WEB IS REINVENTING
ITSELF RIGHT NOW

42.
HOW DO WE GET TO
THE NEXT LEVEL?

43.
WITH YOU

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.
WHAT IS IN STORE?

46.
WEB COMPONENTS

47.
49
WHAT ARE WEB COMPONENTS?
“Web Components” is a collection of
technologies that enable better encapsulation.
• Templates
• Shadow DOM
• Custom Elements

48.
<my-element>
WITHOUT HACKS“ ”

49.
51
WHAT ARE WEB COMPONENTS TO YOU?
“Web Components” are leading a
fundamental shift in web evolution.

50.
<particle-system particles=10000
texture=star
type=sphere>
D
em
o

51.
<model-viewer model="amumu.obj">
D
em
o

52.
D
em
o
<x-gif src="animation.gif" speed="2">

53.
SPDY/HTTP 2.0

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.
MORE DATA,
FEWER REQUESTS ”“

56.
58
WHAT IS SPDY TO YOU?
• Concatenation? Irrelevant.
• Sprite maps? Gone.
• CSS @import? Go for it!

57.
WITH SPRITES
& CONCAT
LOOSE FILES
REQUESTS WITH SPDY
!
Stats and images from https://speakerdeck.com/wesleyhales/writing-real-time-web-apps

58.
asm.js“azzim jay ess”

59.
WHAT IN
THE WORLD
IS ASM.JS?

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.
WHAT IS ASM.JS?
asm.js is a spec.

62.
IF YOU CAN’T WRITE ASM.JS,
WHAT DO YOU DO WITH IT?
SHOULDN’T

63.
66
WHAT IS ASM.JS TO YOU?
The web is now a
viable compilation target.

64.
EMSCRIPTEM
$ emcc hello_world.cpp
!
$ node a.out.js
Hello World

65.
EMSCRIPTEM
$ emcc file_access.cpp
-o output.html

66.
EMSCRIPTEM
$ emcc file_access.cpp
-o output.html
-—preload-file asset_dir/

67.
70
DEBUG C++ IN
THE BROWSER
http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.html
Alon Zakai @GDC 2014

68.
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm

69.
THERE HAS NEVER BEEN A MORE PERFECT TIME
TO TAKE AN ACTIVE ROLE IN THE WEB COMMUNITY

70.
SO TAKE AN ACTIVE ROLE

71.
THE WEB WON
AND WITH THAT VICTORY
COMES NEW CHALLENGE

72.
EDGE
#2
EDGE
#1

73.
THE WEB IS OURS

74.
AND THEIRS

75.
KEEP IT GREAT
KEEP IT OPEN
GET INVOLVED

76.
JARROD OVERSON
RIOT ON THE
WEB
@jsoverson
QCon Sao Paulo