Riot on the web - Kenote @ QCon Sao Paulo 2014

79

description

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.

Transcript of Riot on the web - Kenote @ QCon Sao Paulo 2014

Page 1: Riot on the web - Kenote @ QCon Sao Paulo 2014
Page 2: Riot on the web - Kenote @ QCon Sao Paulo 2014

JARROD OVERSON

RIOT ON THE WEB

@jsoverson

QCon Sao Paulo

Page 3: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHO ISRIOT

Page 4: Riot on the web - Kenote @ QCon Sao Paulo 2014

WE MAKE A GAME

Page 5: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 6: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 7: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 8: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 9: Riot on the web - Kenote @ QCon Sao Paulo 2014

THAT GAME GOT HUGE

Page 10: Riot on the web - Kenote @ QCon Sao Paulo 2014
Page 11: Riot on the web - Kenote @ QCon Sao Paulo 2014

LEAGUE OF LEGENDS STATS

67MILLIONMONTHLY ACTIVE

PLAYERS

27MILLIONDAILY ACTIVE

PLAYERS

7.5MILLIONPEAK CONCURRENT

PLAYERS

STATS  RELEASED  JANUARY  2014

Page 12: Riot on the web - Kenote @ QCon Sao Paulo 2014

EVERY STARTUP’S DREAM AND WORST NIGHTMARE

Page 13: Riot on the web - Kenote @ QCon Sao Paulo 2014

Company founding & age

1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014

Riot Games

Netflix

Google

Facebook

Twitter

Blizzard

Page 14: Riot on the web - Kenote @ QCon Sao Paulo 2014

Readjusted for first product launch

1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014

Riot Games

Netflix

Google

Facebook

Twitter

Blizzard

Page 15: Riot on the web - Kenote @ QCon Sao Paulo 2014

SCALINGCOMPANIESIS HARD

Page 16: Riot on the web - Kenote @ QCon Sao Paulo 2014

COMPANIESSCALING

IS HARDPEOPLE

Page 17: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT WORKS HERE

DOESN’T WORKHERE

Page 18: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT WORKS HERE

DOESN’T WORKHERE

Page 19: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT WORKS HERE

DOESN’T WORKHERE

Page 20: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT WORKS HERE

DOESN’T WORKHERE

Page 21: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT DOES SCALE?

Page 22: Riot on the web - Kenote @ QCon Sao Paulo 2014

NATURE

Page 23: Riot on the web - Kenote @ QCon Sao Paulo 2014

OR, RATHER,

Page 24: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT HAS PROGRESSED NATURALLY

Page 25: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT HAS…

EVOLVED ORGANICALLY IN THE DIGITAL AGE?

BEATEN ALL ODDS AND OUTLASTED ALL ADVERSITY?

HAS SCALED SUCCESSFULLY BEYOND ALL REASON?

Page 26: Riot on the web - Kenote @ QCon Sao Paulo 2014

www.

Page 27: Riot on the web - Kenote @ QCon Sao Paulo 2014

THE INTERNET

BECAUSE THECOMMUNITY

IS GREAT

MADE IT GREAT

Page 28: Riot on the web - Kenote @ QCon Sao Paulo 2014

HOW DID THE COMMUNITY SCALE?

Page 29: Riot on the web - Kenote @ QCon Sao Paulo 2014

IT IS DISTRIBUTED

Page 30: Riot on the web - Kenote @ QCon Sao Paulo 2014

IT IS ASYNCHRONOUS

Page 31: Riot on the web - Kenote @ QCon Sao Paulo 2014

IT IS BLIND TO CLASS, RACE, and SPECIES

Page 32: Riot on the web - Kenote @ QCon Sao Paulo 2014

YOU CAN SCALE WITHOUT THESE, BUT NOT FOREVER.

Page 33: Riot on the web - Kenote @ QCon Sao Paulo 2014

PROD

UCTI

VITY

TIME

ASYMPTOTE OF PRODUCTIVITY

Page 34: Riot on the web - Kenote @ QCon Sao Paulo 2014

PROD

UCTI

VITY

TIME

CLIFF OF CHANGE

Page 35: Riot on the web - Kenote @ QCon Sao Paulo 2014

PROD

UCTI

VITY

TIME

IF CHANGE ISN’T ACCEPTED

Page 36: Riot on the web - Kenote @ QCon Sao Paulo 2014

PROD

UCTI

VITY

TIME

DON’T FEAR CHANGE

Page 37: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 38: Riot on the web - Kenote @ QCon Sao Paulo 2014

THE WEB IS

BUT IT’S BEEN ROUGH.AWESOME

Page 39: Riot on the web - Kenote @ QCon Sao Paulo 2014

PEAK OF INFLATED EXPECTATIONS

TROUGH OF DISILLUSIONMENT

HTML5

MOBILE WEB APPS

PLATEAU OF REALITY

The Web Platform

Page 40: Riot on the web - Kenote @ QCon Sao Paulo 2014

2008 2009 2010 2011 2012 2013 2014

LET’S MOVE ON

Page 41: Riot on the web - Kenote @ QCon Sao Paulo 2014

JAVASCRIPTWON

Page 42: Riot on the web - Kenote @ QCon Sao Paulo 2014

AND THIS ISN’T EVEN ITS FINAL FORM

Page 43: Riot on the web - Kenote @ QCon Sao Paulo 2014

THE WEB IS REINVENTING ITSELF RIGHT NOW

Page 44: Riot on the web - Kenote @ QCon Sao Paulo 2014

HOW DO WE GET TO THE NEXT LEVEL?

Page 45: Riot on the web - Kenote @ QCon Sao Paulo 2014

WITH YOU

Page 46: Riot on the web - Kenote @ QCon Sao Paulo 2014

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!

Page 47: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT IS IN STORE?

Page 48: Riot on the web - Kenote @ QCon Sao Paulo 2014

WEB COMPONENTS

Page 49: Riot on the web - Kenote @ QCon Sao Paulo 2014

49

WHAT ARE WEB COMPONENTS?

“Web Components” is a collection of technologies that enable better encapsulation.

• Templates • Shadow DOM • Custom Elements

Page 50: Riot on the web - Kenote @ QCon Sao Paulo 2014

<my-element>WITHOUT HACKS“ ”

Page 51: Riot on the web - Kenote @ QCon Sao Paulo 2014

51

WHAT ARE WEB COMPONENTS TO YOU?

“Web Components” are leading a fundamental shift in web evolution.

Page 52: Riot on the web - Kenote @ QCon Sao Paulo 2014

<particle-system particles=10000 texture=star type=sphere>

Demo

Page 53: Riot on the web - Kenote @ QCon Sao Paulo 2014

<model-viewer model="amumu.obj">

Demo

Page 54: Riot on the web - Kenote @ QCon Sao Paulo 2014

Demo

<x-gif src="animation.gif" speed="2">

Page 55: Riot on the web - Kenote @ QCon Sao Paulo 2014

SPDY/HTTP 2.0

Page 56: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 57: Riot on the web - Kenote @ QCon Sao Paulo 2014

MORE DATA, FEWER REQUESTS ”“

Page 58: Riot on the web - Kenote @ QCon Sao Paulo 2014

58

WHAT IS SPDY TO YOU?

• Concatenation? Irrelevant. • Sprite maps? Gone. • CSS @import? Go for it!

Page 59: Riot on the web - Kenote @ QCon Sao Paulo 2014

WITH SPRITES & CONCAT

LOOSE FILES

REQUESTS WITH SPDY

!Stats and images from https://speakerdeck.com/wesleyhales/writing-real-time-web-apps

Page 60: Riot on the web - Kenote @ QCon Sao Paulo 2014

asm.js“azzim jay ess”

Page 61: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT IN THE WORLD IS ASM.JS?

Page 62: Riot on the web - Kenote @ QCon Sao Paulo 2014

62

WHAT ASM.JS ISN’T.

asm.js is not

• A plugin • A JavaScript library • A new language • A way to write code

Page 63: Riot on the web - Kenote @ QCon Sao Paulo 2014

WHAT IS ASM.JS?

asm.js is a spec.

Page 64: Riot on the web - Kenote @ QCon Sao Paulo 2014
Page 65: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

SHOULDN’T

Page 66: Riot on the web - Kenote @ QCon Sao Paulo 2014

66

WHAT IS ASM.JS TO YOU?

The web is now a viable compilation target.

Page 67: Riot on the web - Kenote @ QCon Sao Paulo 2014

EMSCRIPTEM

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

Page 68: Riot on the web - Kenote @ QCon Sao Paulo 2014

EMSCRIPTEM

$ emcc file_access.cpp \ -o output.html

Page 69: Riot on the web - Kenote @ QCon Sao Paulo 2014

EMSCRIPTEM

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

Page 70: Riot on the web - Kenote @ QCon Sao Paulo 2014

70

DEBUG C++ IN THE BROWSER

http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.htmlAlon Zakai @GDC 2014

Page 71: Riot on the web - Kenote @ QCon Sao Paulo 2014

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

Page 72: Riot on the web - Kenote @ QCon Sao Paulo 2014

THERE HAS NEVER BEEN A MORE PERFECT TIMETO TAKE AN ACTIVE ROLE IN THE WEB COMMUNITY

Page 73: Riot on the web - Kenote @ QCon Sao Paulo 2014

SO TAKE AN ACTIVE ROLE

Page 74: Riot on the web - Kenote @ QCon Sao Paulo 2014

THE WEB WONAND WITH THAT VICTORY COMES NEW CHALLENGE

Page 75: Riot on the web - Kenote @ QCon Sao Paulo 2014

EDGE #2

EDGE #1

Page 76: Riot on the web - Kenote @ QCon Sao Paulo 2014

THE WEB IS OURS

Page 77: Riot on the web - Kenote @ QCon Sao Paulo 2014

AND THEIRS

Page 78: Riot on the web - Kenote @ QCon Sao Paulo 2014

KEEP IT GREAT KEEP IT OPEN GET INVOLVED

Page 79: Riot on the web - Kenote @ QCon Sao Paulo 2014

JARROD OVERSON

RIOT ON THE

WEB@jsoverson

QCon Sao Paulo