Your SlideShare is downloading. ×
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Making HTML5 Mobile Games Indistinguishable from Native Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making HTML5 Mobile Games Indistinguishable from Native Apps

250

Published on

Presented at FITC Toronto 2014 on April 27-29, 2014 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
250
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Making  HTML5   Mobile  Games   Indis5nguishable   from  Na5ve  Apps   Presented by Christopher Shankland Lead Software Developer Big Viking Games
  • 2. Outline •  Performance – Raw computation •  Memory – A walk down GC Lane •  Latency – Avoiding watchdog •  Graphics – 80% of everything •  Network – Keeping the NSA busy
  • 3. Performance •  Rethink everything
  • 4. Performance •  Rethink everything •  Know your environment
  • 5. Performance •  Rethink everything •  Know your environment •  Use the “features” that exist
  • 6. Performance •  Rethink everything •  Know your environment •  Use the “features” that exist •  Look under the hood
  • 7. Tools •  Chrome Dev Tools
  • 8. Tools •  Native Profiling (mobile)
  • 9. Tools •  jsperf.com
  • 10. Tools •  V8 tools - Optimization profiling
  • 11. Tools •  Safari remote debugging
  • 12. Memory •  Garbage Collected (GC) environment •  Nearly everything creates garbage: o  [], {}, new , Object.keys, function() {}, Function.bind(...), Array.concat(...), String(s)
  • 13. Memory source: http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf •  Mobile makes the situation exponentially worse
  • 14. 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 ..."
  • 15. Memory •  Create pools of things •  Adopt an "out parameter" convention •  asm.js style pre-allocation
  • 16. Latency •  Critical rendering path
  • 17. 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
  • 18. Latency •  Critical rendering path Network HTML/CSS/JS
  • 19. Network •  WebSockets – Vanilla / Binary / WebWorker
  • 20. Network •  WebSockets – Vanilla / Binary / WebWorker •  Use XHR with proper content type
  • 21. Graphics •  CSS or Canvas
  • 22. Graphics •  CSS or Canvas •  Hardware Acceleration
  • 23. Graphics •  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets
  • 24. Graphics •  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets •  Going Native
  • 25. 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
  • 26. Thanks! Questions? Contact: cshankland@bigvikinggames.com @cashankland

×