![Page 1: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/1.jpg)
![Page 2: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/2.jpg)
JARROD OVERSON
RIOT ON THE WEB
@jsoverson
QCon Sao Paulo
![Page 3: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/3.jpg)
WHO ISRIOT
![Page 4: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/4.jpg)
WE MAKE A GAME
![Page 6: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/6.jpg)
https://www.youtube.com/watch?v=gEurXD44af0 - Team DVus Gaming
![Page 7: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/7.jpg)
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
![Page 8: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/8.jpg)
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
![Page 9: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/9.jpg)
THAT GAME GOT HUGE
![Page 10: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/10.jpg)
![Page 11: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/12.jpg)
EVERY STARTUP’S DREAM AND WORST NIGHTMARE
![Page 13: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/13.jpg)
Company founding & age
1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014
Riot Games
Netflix
Blizzard
![Page 14: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/14.jpg)
Readjusted for first product launch
1991 1993 1995 1997 1999 2001 2003 2005 2007 2009 2011 2014
Riot Games
Netflix
Blizzard
![Page 15: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/15.jpg)
SCALINGCOMPANIESIS HARD
![Page 16: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/16.jpg)
COMPANIESSCALING
IS HARDPEOPLE
![Page 17: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/17.jpg)
WHAT WORKS HERE
DOESN’T WORKHERE
![Page 18: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/18.jpg)
WHAT WORKS HERE
DOESN’T WORKHERE
![Page 19: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/19.jpg)
WHAT WORKS HERE
DOESN’T WORKHERE
![Page 20: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/20.jpg)
WHAT WORKS HERE
DOESN’T WORKHERE
![Page 21: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/21.jpg)
WHAT DOES SCALE?
![Page 22: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/22.jpg)
NATURE
![Page 23: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/23.jpg)
OR, RATHER,
![Page 24: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/24.jpg)
WHAT HAS PROGRESSED NATURALLY
![Page 25: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/26.jpg)
www.
![Page 27: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/27.jpg)
THE INTERNET
BECAUSE THECOMMUNITY
IS GREAT
MADE IT GREAT
![Page 28: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/28.jpg)
HOW DID THE COMMUNITY SCALE?
![Page 29: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/29.jpg)
IT IS DISTRIBUTED
![Page 30: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/30.jpg)
IT IS ASYNCHRONOUS
![Page 31: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/31.jpg)
IT IS BLIND TO CLASS, RACE, and SPECIES
![Page 32: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/32.jpg)
YOU CAN SCALE WITHOUT THESE, BUT NOT FOREVER.
![Page 33: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/33.jpg)
PROD
UCTI
VITY
TIME
ASYMPTOTE OF PRODUCTIVITY
![Page 34: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/34.jpg)
PROD
UCTI
VITY
TIME
CLIFF OF CHANGE
![Page 35: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/35.jpg)
PROD
UCTI
VITY
TIME
IF CHANGE ISN’T ACCEPTED
![Page 36: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/36.jpg)
PROD
UCTI
VITY
TIME
DON’T FEAR CHANGE
![Page 37: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/38.jpg)
THE WEB IS
BUT IT’S BEEN ROUGH.AWESOME
![Page 39: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/40.jpg)
2008 2009 2010 2011 2012 2013 2014
LET’S MOVE ON
![Page 41: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/41.jpg)
JAVASCRIPTWON
![Page 42: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/42.jpg)
AND THIS ISN’T EVEN ITS FINAL FORM
![Page 43: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/43.jpg)
THE WEB IS REINVENTING ITSELF RIGHT NOW
![Page 44: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/44.jpg)
HOW DO WE GET TO THE NEXT LEVEL?
![Page 45: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/45.jpg)
WITH YOU
![Page 46: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/46.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/47.jpg)
WHAT IS IN STORE?
![Page 48: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/48.jpg)
WEB COMPONENTS
![Page 49: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/49.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/50.jpg)
<my-element>WITHOUT HACKS“ ”
![Page 51: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/51.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/52.jpg)
<particle-system particles=10000 texture=star type=sphere>
Demo
![Page 53: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/53.jpg)
<model-viewer model="amumu.obj">
Demo
![Page 54: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/54.jpg)
Demo
<x-gif src="animation.gif" speed="2">
![Page 55: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/55.jpg)
SPDY/HTTP 2.0
![Page 56: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/56.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/57.jpg)
MORE DATA, FEWER REQUESTS ”“
![Page 58: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/58.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/59.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/60.jpg)
asm.js“azzim jay ess”
![Page 61: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/61.jpg)
WHAT IN THE WORLD IS ASM.JS?
![Page 62: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/62.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/63.jpg)
WHAT IS ASM.JS?
asm.js is a spec.
![Page 64: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/64.jpg)
![Page 65: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/65.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/66.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/67.jpg)
EMSCRIPTEM
$ emcc hello_world.cpp !$ node a.out.js Hello World
![Page 68: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/68.jpg)
EMSCRIPTEM
$ emcc file_access.cpp \ -o output.html
![Page 69: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/69.jpg)
EMSCRIPTEM
$ emcc file_access.cpp \ -o output.html \ -—preload-file asset_dir/
![Page 70: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/70.jpg)
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://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/71.jpg)
https://www.youtube.com/watch?v=Jc4WlSgr8jU - MachinimaRealm
![Page 72: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/72.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/73.jpg)
SO TAKE AN ACTIVE ROLE
![Page 74: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/74.jpg)
THE WEB WONAND WITH THAT VICTORY COMES NEW CHALLENGE
![Page 75: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/75.jpg)
EDGE #2
EDGE #1
![Page 76: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/76.jpg)
THE WEB IS OURS
![Page 77: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/77.jpg)
AND THEIRS
![Page 78: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/78.jpg)
KEEP IT GREAT KEEP IT OPEN GET INVOLVED
![Page 79: Riot on the web - Kenote @ QCon Sao Paulo 2014](https://reader033.vdocuments.site/reader033/viewer/2022051323/54b753ed4a79596e388b486e/html5/thumbnails/79.jpg)
JARROD OVERSON
RIOT ON THE
WEB@jsoverson
QCon Sao Paulo