Article Preview
Buy Now
FEATURE
Optimizing iPhone WebApp
How REALbasic enabled us to release our iPhone WebApp on schedule
Issue: 7.6 (September/October 2009)
Author: Mattias Sandström
Article Description: No description available.
Article Length (in bytes): 12,796
Starting Page Number: 13
Article Number: 7608
Related Web Link(s):
http://developer.apple.com
http://www.einhugur.com
Excerpt of article text...
In a rush to complete Tangix's first WebApp for the iPhone, a simple WebApp providing an interface from the iPhone into our online certification system, we ran across some serious performance issues. Inside the WebApp we display statistics per country and have a small flag icon displayed together with the numbers. The flag itself is not big (16 by 11 pixels, less than 4kB in size) and the system was fast and responsive over WiFi during the development phase of the project.
However, targeting the iPhone platform is something different -- network connectivity could range from EDGE (230kbp/s on a sunny day) via 3G and all the way to broadband WiFi access (several Mbp/s). The initial solution for how to handle the flag icons were not ideal over the cellular network, as the multiple requests for the various flags simply took too much time to complete. To make matters worse, we designed the WebApp to be offline-capable meaning that all flag icons have to be downloaded, not just the 15 flags needed to display the statistics (as other flags could be needed on other occasions). There are 247 flag icon files and about 500 kB in total.
The value of beta--testing
Luckily this problem was noticed when beta--testing and we had a day to figure out a solution to this problem before launching the WebApp. Analyzing the traffic between the iPhone and the server, each of the 247 flag files were requested from the server and the whole process took about two minutes before the WebApp got responsive again -- this over the 3G network. The download speed was not an issue, but the network latency made the requests crawl and the number of requests made matters worse. Latency over a cellular network is generally very high, adding about 600 milliseconds to the round--trip time. Now we understood the problem and could start working on a solution.
We decided to change the WebApp from displaying the flag icon in an IMG--tag that changes the SRC parameter to point to the correct flag (that is made available in the offline cache) to instead use a single picture (stored in the iPhone offline cache) that is instead a mosaic of all flags. Instead of an IMG tag, an HTML5 CANVAS container will be used to display the flag which is cut out from the mosaic of flags. The flag is then drawn in the CANVAS' 2D context -- a cool way to learn this new HTML5 feature!
Creating a quick REALbasic hack
...End of Excerpt. Please purchase the magazine to read the full article.