A little while ago I used my old friend Iain Lobb’s BunnyMark to compare the performance of C++ code compiled via Haxe NME vs native C++ (read more here). Today as HTML5/JavaScript is all the rage and because Haxe offers a couple of ways of deploying to HTML5, I thought I would run some (more) test.
There are two different ways to deploy to HTML5/Javascript via Haxe, one is to write the JavaScript in Haxe using the Haxe JavaScript api (which is a group of TypeDefs) or two, using the NME library which replicates the flash display list and is then converted via the Jeash library.
I also wanted to test using the DisplayList in Jeash vs custom blitting in Jeash, when I did my earlier tests I found some of the Jeash api would throw errors related to “bitmapData.lock() / unlock()”, I asked Neil Drummond the creator of the Jeash library about this and he advised me to use the display list rather than blitting because when using the display list, each object gets its own hardware accelerated canvas, I wanted to test this theory.
The test was simple, how many Bunnies can you get on screen whilst running at a constant 60 fps. First off I wrote a native/pure JavaScript version, then I wrote the Haxe JavaScript version, this gives you all the goodness of classes and strong typing but you are essentially writing pure JavaScript. Haxe JavaScript is really just a bunch of TypeDefs, I had to borrow Mike Canns custom Canvas TypeDefs because the Haxe JS does not have anything for it yet. The third test was be to write a DisplayList version using NME and the final test was be to write a Blitted test using NME.
The results:
- Native JavaScript: With pure JavaScript I could get about 4000 Bunnies. This seemed okay but in when compared to flash, its is half the amount.
- NME/Jeash : Both the display list and the blitted version performed comparably but that was not very well. I could only get about 1000 Bunnies.
- Haxe JavaScript – This was a pleasant surprise, the Haxe compiled JavaScript was able to run 5000 Bunnies at 60 fps, that’s 1000 more than the native code!
The numbers:
- Native:4000.
- NME: DisplayList: 1000.
- NME: Blitted: 1000.
- Haxe JS:5000.
So the winner is Haxe JavaScript which is awesome because it means you get to write within a strong typed environment and get all the good stuff thats comes with that. Again I am a little not too impressed with the NME output, the idea of being able to “write once and run everywhere” doesn’t seem much more than a pipe dream.
So the big question is “if you need to target JavaScript/HTML5, do you write the JS in Haxe or write it natively?” I was shocked how easy canvas stuff was although it does like like a step backwards compared to ActionScript, I ran into a bunch of scope issues that brought back memories/nightmares of AS2 programming. With Haxe you don’t have to worry about any of this, you get all the static type checking, the error detection, the utility libraries, I think it is definitely the way forward.
Links to the tests:
- NME/Jeash Blitted: Link.
- NME/Jeash DisplayList: Link.
- Native JavaScript: Link.
- Haxe JavasScript: Link.
- Haxe Flash: Link.
- Native Flash: Link.
Share Your Thoughts