I recently came across a nice article/experiment from Matt Gemmell (@mattgemmell) where he decided to test how many simultaneous touches the iPad Multi Touch display would register, it turns out its 11 and he put together a pretty impressive demo app to prove it (see the Screen Shot).
At first sight you would think its a pretty complex application to achieve this, i mean all the multi touch stuff and the animation seems quite complex, however anybody who knows the iOS SDK will tell you that this stuff is trivial at best, and while Matt has done a great job of pulling it all together its far from complex.
The SDK that wasn’t mean’t to be
This application got me thinking about the iOS SDK and the fact that Apple originally didn’t want us writing native applications and in fact they wanted us to write Browser based applications in Javascript, HTML5 and CSS3.
Now its pretty clear to me that the native apps we see (in abundance) on the app store like Angry Birds, Twitterific, Pulse, Things, Pages, etc… could be written using JS, HTML5 and CSS3 but they would most definitely be poorer for it, come on, the runtime performance, the slick User Experience, simply can’t be replecated to the same level with an app running inside a Browser! (let the flame war begin)
So on that note i decided to replicate Matt’s Multi Touch application in Javascript, HTML5 and CSS3, so with a little digging around in Apples documentation I found all the Javascript events that expose touches (touchstart, touchend and touchmove) and began hacking!
Now let me say right now that this is one hours worth of hacking and the end goal was to build an application that was comparable to Matt’s, I suspect some of the code could be optimised, in fact I really hope that is the case when it comes to the Canvas drawing methods (but that is another story for another post).
Now for some reason I fully expected the JS version to respond to less touches than the native version but in fact its 11 just like Matt’s Version, I also expected the animation to be less “smooth” and jerky when I was moving my fingers around, and I was spot on. The iPad benefits from multithreading and a graphics rendering pipeline, where the Browser that my app is running in does not so any processing I do to draw, calculate or respond to touch events all happens in the same thread as well as the browsers rendering code, this in a nut shell is the reason why these apps will not compete with Naive apps, I may in the near future re visit this topic and look at using HTML5 Web-Workers which in theory would give me the ability to run background threads, but i suspect that even that wouldn’t help too much for applications that are so closely coupled to the rendering engine.
Anyway, here is the application I wrote (visit it on an iOS device) it works almost exactly like the Original albeit its not as smooth. The source code is all inline (for your convenience) so feel free to take a look (lift, steal, optimise, laugh at, etc…) and let me know what you think.
My Conclusion
The iPad really is a “Magical” device, and with Great tools like Sencha Touch web developers are better placed than ever before when it comes to building native-ish applications, but I really believe that these apps will be the poorer relations to their native cousins. So keep learning Obj-C folks!
