riot on the web - kenote @ qcon sao paulo 2014

JARROD OVERSON

RIOT ON THE WEB

@jsoverson

QCon Sao Paulo

WHO ISRIOT

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

67MILLIONMONTHLY ACTIVE

PLAYERS

27MILLIONDAILY ACTIVE

PLAYERS

7.5MILLIONPEAK CONCURRENT

PLAYERS

STATS  RELEASED  JANUARY  2014

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

Twitter

Blizzard

Readjusted for first product launch

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

Riot Games

Netflix

Google

Facebook

Twitter

Blizzard

SCALINGCOMPANIESIS HARD

COMPANIESSCALING

IS HARDPEOPLE

WHAT WORKS HERE

DOESN’T WORKHERE

WHAT WORKS HERE

DOESN’T WORKHERE

WHAT WORKS HERE

DOESN’T WORKHERE

WHAT WORKS HERE

DOESN’T WORKHERE

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 BEYOND ALL REASON?

www.

THE INTERNET

BECAUSE THECOMMUNITY

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.

PROD

UCTI

VITY

TIME

ASYMPTOTE OF PRODUCTIVITY

PROD

UCTI

VITY

TIME

CLIFF OF CHANGE

PROD

UCTI

VITY

TIME

IF CHANGE ISN’T ACCEPTED

PROD

UCTI

VITY

TIME

DON’T FEAR CHANGE

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

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

JAVASCRIPTWON

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 WebGL is capable, performant, real and not just for games!

EVERYONE! Fresh perspectives, creative thinkers, new ideas!

WHAT IS IN STORE?

WEB COMPONENTS

49

WHAT ARE WEB COMPONENTS?

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

• Templates • Shadow DOM • Custom Elements

<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>

Demo

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

Demo

Demo

<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

… and is a starting point for HTTP 2.0

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-real-time-web-apps

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.htmlAlon Zakai @GDC 2014

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

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

SO TAKE AN ACTIVE ROLE

THE WEB WONAND 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