making html5 mobile games indistinguishable from native apps

26
Making HTML5 Mobile Games Indis5nguishable from Na5ve Apps Presented by Christopher Shankland Lead Software Developer Big Viking Games

Upload: fitc

Post on 06-May-2015

253 views

Category:

Technology


1 download

DESCRIPTION

Presented at FITC Toronto 2014 on April 27-29, 2014 More info at www.FITC.ca When developing in web languages like HTML5, CSS and JavaScript, you don’t control the majority of the code that is running your game, therefore you need to be able to profile and understand how the underlying code functions. Chrome Tools, JSPerf and Automated Testing are all critical tools that make HTML5 development possible. Some key technical points that Chris Shankland will dive into include: It is significantly faster to reassign functions rather than use inheritance The importance of profiling and the need to not assume anything How to create automated test cases How to optimize for garbage collection environment Technical details around CSS vs. Canvas The need to optimize for the environment your code will ultimately be running in – specifically the browser interpreter – and not your specific development environment. And some technical challenges that will be discussed: Performance Optimization Automated Testing Understanding native performance and memory in a UIWebView Using wrappers and building plug-ins for mobile app stores

TRANSCRIPT

Page 1: Making HTML5 Mobile Games Indistinguishable from Native Apps

Making  HTML5  Mobile  Games  Indis5nguishable  from  Na5ve  Apps  

Presented by Christopher Shankland Lead Software Developer

Big Viking Games

Page 2: Making HTML5 Mobile Games Indistinguishable from Native Apps

Outline

•  Performance – Raw computation •  Memory – A walk down GC Lane •  Latency – Avoiding watchdog •  Graphics – 80% of everything •  Network – Keeping the NSA busy

Page 3: Making HTML5 Mobile Games Indistinguishable from Native Apps

Performance

•  Rethink everything

Page 4: Making HTML5 Mobile Games Indistinguishable from Native Apps

Performance

•  Rethink everything •  Know your environment

Page 5: Making HTML5 Mobile Games Indistinguishable from Native Apps

Performance

•  Rethink everything •  Know your environment •  Use the “features” that exist

Page 6: Making HTML5 Mobile Games Indistinguishable from Native Apps

Performance

•  Rethink everything •  Know your environment •  Use the “features” that exist •  Look under the hood

Page 7: Making HTML5 Mobile Games Indistinguishable from Native Apps

Tools •  Chrome Dev Tools

Page 8: Making HTML5 Mobile Games Indistinguishable from Native Apps

Tools •  Native Profiling (mobile)

Page 9: Making HTML5 Mobile Games Indistinguishable from Native Apps

Tools •  jsperf.com

Page 10: Making HTML5 Mobile Games Indistinguishable from Native Apps

Tools •  V8 tools - Optimization profiling

Page 11: Making HTML5 Mobile Games Indistinguishable from Native Apps

Tools •  Safari remote debugging

Page 12: Making HTML5 Mobile Games Indistinguishable from Native Apps

Memory

•  Garbage Collected (GC) environment •  Nearly everything creates garbage:

o  [], {}, new , Object.keys, function() {}, Function.bind(...), Array.concat(...), String(s)

Page 13: Making HTML5 Mobile Games Indistinguishable from Native Apps

Memory

source: http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf

•  Mobile makes the situation exponentially worse

Page 14: Making HTML5 Mobile Games Indistinguishable from Native Apps

Memory ECMAScript wiki: (http://wiki.ecmascript.org/doku.php?id=strawman:gc_semantics)

"the garbage collector MUST NOT collect any storage that then becomes

needed to continue correct execution of the program ... All objects which are not transitively strongly reachable from roots SHOULD eventually be collected, if needed to prevent the program execution from failing due to memory exhaustion" "... there is no spec of how much actual memory any individual object occupies ..."

Page 15: Making HTML5 Mobile Games Indistinguishable from Native Apps

Memory •  Create pools of things •  Adopt an "out parameter" convention •  asm.js style pre-allocation

Page 16: Making HTML5 Mobile Games Indistinguishable from Native Apps

Latency

•  Critical rendering path

Page 17: Making HTML5 Mobile Games Indistinguishable from Native Apps

Latency

•  Critical rendering path Network

3G 4G

Control plane (200-2500 ms) (50-100 ms)

DNS lookup 200 ms 100 ms

TCP Connection 200 ms 100 ms

TLS handshake (200-400 ms) (100-200 ms)

HTTP request 200 ms 100 ms

Page 18: Making HTML5 Mobile Games Indistinguishable from Native Apps

Latency

•  Critical rendering path Network HTML/CSS/JS

Page 19: Making HTML5 Mobile Games Indistinguishable from Native Apps

Network

•  WebSockets – Vanilla / Binary / WebWorker

Page 20: Making HTML5 Mobile Games Indistinguishable from Native Apps

Network

•  WebSockets – Vanilla / Binary / WebWorker •  Use XHR with proper content type

Page 21: Making HTML5 Mobile Games Indistinguishable from Native Apps

Graphics

•  CSS or Canvas

Page 22: Making HTML5 Mobile Games Indistinguishable from Native Apps

Graphics

•  CSS or Canvas •  Hardware Acceleration

Page 23: Making HTML5 Mobile Games Indistinguishable from Native Apps

Graphics

•  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets

Page 24: Making HTML5 Mobile Games Indistinguishable from Native Apps

Graphics

•  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets •  Going Native

Page 25: Making HTML5 Mobile Games Indistinguishable from Native Apps

References / Links

•  Ilya Grigorik (Google) Optimizing the Critical Rendering Path https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present

•  Mozilla Developer Network (MDN) https://developer.mozilla.org/en-US/docs/Web

•  Quantifying the Performance of Garbage Collection vs. Explicit Memory Management http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf

•  James Mickens on JavaScript https://www.usenix.org/system/files/1403_02-08_mickens.pdf

•  HTML5 Rocks http://www.html5rocks.com/en/

•  Modern IE http://modern.ie/en-us

Page 26: Making HTML5 Mobile Games Indistinguishable from Native Apps

Thanks!

Questions?

Contact: [email protected] @cashankland