Articles tagged with: Mobile Dev

ZeptoJS: Nice and fast

ZeptoJS is a lightweight Javascript library that mimics JQuery selectors and typical functionality, while being much smaller (~25KB, can go under 10KB GZipped). It was meant for mobile so works on most widely used platforms and its only major drawback is no support of Internet Explorer.

I have one micro-site to keep my bookmarks, really really simple: I manage the bookmarks by editing a C# array that when the page gets loaded renders the contents in this format:

<div id="bmarks">
<h3 id="0">__SECTION_NAME__</h3>
<p id="s0">
<a href="__URL__">_DESCRIPTION__</a>
<a href="__URL__">_DESCRIPTION__</a>
<a href="__URL__">_DESCRIPTION__</a>
</p>
<h3 id="1">__SECTION_NAME__</h3>
<p id="s1">
<a href="__URL__">_DESCRIPTION__</a>
...
</p>
...
</div>

Previously, I had additional markup and lots of "onclick" added to every section and item tags, plus no javascript library, only pure JS to toggle displaying one category, hiding another, and other fancy stuff.

The page weighted around 12KB and, while it was really fast loading with a lot of bookmarks, response when using it just after loading was not as good at my mobile phone as in the desktop. In my context this meant that my javascript either was slow due to lots of DOM elements (few hundreds only so unlikely) or due to having to attach and manage too many event handlers (one per bookmark, one per section in my original code).

This, combined with some DOM lookups that were redundant, were for sure the source of unoptimal performance in such a simple webpage.

Yesterday I decided to reduce a lot the markup, do more CSS styling for removing tags (like <br>), and reduce the Javascript to the minimun after adding ZeptoJS. I removed some visual stuff that really was not so interesting, like +/- icons before the section name (which I could have done with CSS too).

This is the resulting javascript I need to toggle displaying and hiding of sections:

$('#bmarks').on('click', 'h3', ToggleSection);
function
ToggleSection(eventData) {
$(
"p").each(function () { $(this).hide() });
$('#s' + eventData.currentTarget.id).show();
}

Keeping DOM lookups to the minimum with event delegation proved really easy to achieve, and toggle() function saved me some ifs and extra lines of code to handle the logic of hide/show.

Now the page weights ~50KB because I have inlined ZeptoJS library and CSS. With proper a caching header and unfrequently changing contents (as it is my scenario) this means a single HTTP request to fetch everything and then cached read from the browser onwards.

On my phone the first load feels equally faster under 3G (where latency downloading content sucks) but now the page is really really responsive. As it only keeps one event handler for the whole document's clicks feels way more responsive.


Cydia apps = Android apps = caution

Few days ago I gave a deep look at the Cydia store on my iPhone 4 and installed some apps/packages (mostly system tweaks). I had tho charge the phone, so when I went to sleep I left it turned on at 100% battery.

Next morning the battery was at 59%. Without any call, any internet browsing, any action. I was suspicious so I did a huge sweep removing all unused/unwanted Cydia applications. And as I guessed, the problem fade away, now the phone eats 15-20% battery on a normal day receiving or making around 5 calls, browsing RSS and Twitter and answering some emails from the phone.

Why this battery consumption? And why Cydia and not normal iOS apps?

iOS apps have a very restricted execution environment. Memory consumption is handled by the OS, and if the application leaves foreground and eats too much becomes the first candidate to be removed from memory to free space.

Also, any app left in background has to implement a Service, that either performs some small tasks (with an even more limited CPU and memory availability pool) or uses push notifications (either local or remote) to communicate with other services or system components (background state). Or directly does nothing else than pausing everything until resumed (suspended state)...

iOS background application management is quite aggresive: Applications that take more than 5 seconds to enter in background mode will be terminated; Some classes and components auto-dispose data structures if not being in use and displayed when receiving low-memory warnings.

Also, I assume that a few of those theorical Apple "review before approval" tests would be related with memory or resources consumption, to avoid a single app eating too much memory or running sluggish and creating a poor "user experience".

All of this might apply to Cydia apps, or may not. With a jailbroken iPhone, you can download the full iOS SDK .h files and build really low level applications, system components, and almost everything you wish.

But at the same time, nobody forces you to do something the correct way. You can skip memory consumption checks, you can develop system background applications,... But you can also easily introduce memory leaks, CPU intensive tasks only noticied after long activity periods, never-ending background tasks...

When you use Cydia your phone can be used as a Unix device. And coding a Unix OS is not the same as coding iOS.

Why the comparison with Android apps?

Well, I've had for more than a year an Android phone, and while it is great for browsing and a few more tasks, the truth is that the application store sucks. And not only because many applications have a lite version that goes terribly slow (because of the Ads, dumb background images or worse that make the apps take a lot to load), but mainly because Android SDK doesn't performs any decent control on your application behaviour.

I've tried some Android apps that made the phone go really slow (an HTC Magic is ok but far from being the fastest device out there), processes hanging on background ("the process com.xxxx.yyy has stopped responding") or crashed on phone boot and directly never worked. And using task killers is not always a good idea (although I prefer to use them and kill those free apps of unknown code quality).

The Android Market also has no review approval. You can upload anytime your app, and basically they will shut it down if people complain (and not always). No security checks (just OS warnings about what special features of your phone the application is going to use), no quality or speed checks...

Android is much like the now defunct Windows Mobile: It gives you a quite pure multitasking (although needs different code and "Services"), it gives you freedom, but it also has a risk, the risk of uncontrolled bad developers and bad code.

That's why my warning; Take caution with what you install of Cydia (and of the Android Market!). Freedom has also a price and using the non-official SDK means bad code can do bad things to your phone.

There are many interesting applications to tweak your phone, add custom free ringtones and install otherwise impossible applications (like wifi analysers), but also some apps might eat your battery and part of your CPU.


Mobile devices detection using the User Agent

One of the basic HTTP headers is the User Agent, which provides information about what type of device is connecting to a web server, usually (but not always) along with other details as version and compatibility.

Detection and parsing of the user agent string is a very interesting field. Being a simple HTTP string header anyone can tamper with it and modify to fool servers and websites into thinking it is something else, so the basic rule here is "take the UA as it is: one unsecure descriptor". In other words, think accordingly and either let the user handle errors for tampering with it, or query for more information.

Before digging into how to detect a mobile device using the user agent, I've prepared a small demo that displays a lot of information gathered by ASP.NET in the Request object: Link no longer available

For example, using the AcceptTypes array you can check the types of markup understood by the browser/device, auto-setup a default language based on the UserLanguages array, or check the Referer and forbid hotlinking of your images from other sites or forums. If you click on the "View Extended info" link you'll get a few fields as inspiration sources :)

Back to the goal of this post, the UA strings should follow a pattern (defined loosely in the HTTP RFC), so making a list and matching against it would be the first idea. There are huge UA lists, the most famous one being WURFL, because also includes device capabilities.

WURFL is not bad, in fact is great for some basic detection of mobile phones and some PDAs. But if you're going to use it for capabilities detection, beware of a huge design mistake that WURFL creator made: if you only store a boolean value for a capability, you're introducing either false positives (fake true values) or false negatives(fake false values).
The correct approach would have been to store a tri-state value (unknown/true/false), but WURFL doesn't has it, so you will probably want to create your own "extended WURFL" with some sort of validated capabilities or corrected ones (I've suffered both cases of false positives and false negatives at work).

Once pointed out this important limitation, and focusing on the UA itself, we have our UA database, but when testing with some varied phones, we see that some of them don't match. Why is this?

Well, probably because mobile operators and mobile phone manufacturers seem to enjoy ignoring specifications and doing "funny" things like sending your phone serial number in the user agent, appending all kind of dumb info (under Windows this is quite frequent too, to have all kind of crap added to the user agent) or having tons of revisions of a browser, all of them screwing an exact match.

A few examples of desktop browsers:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5

And some mobile devices:

Mozilla/5.0 (Linux; U; Android 1.5; HTC Magic Build/PLAT-RC33) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Vodafone/1.0/HTC_Diamond/1.97.164.3 Opera/9.50 (Windows Nt 5.1; U; es_ES)

See a few problems in those sample UAs? Some have "Mobile Safari/xxx" while others have "Mobile/xxxx safari/yyy". Some include a revision number or the language inside the parenthesis, while others don't (or include a lot of different info. The HTC Diamond even lies, saying that it is a Windows NT 5.1 platform (a desktop Windows XP!)
And this are at least common ones that you can easily fix (searching for "HTC Diamond" for example instead of focusing just on the operating system), others are really hard or contain way too much useless info.

One way to improve the matching is using some algorithm, the most common one being Levenshtein, which measures how different are two strings (in number of charactes).

But even without applying some "noise cleaning" to the user agent, it will only have a limited improve in the matching process.

And here is where we stop and let you think about the best way to do or improve UA matching.

I for example am working in a small "Mobile Device Detector" .NET library that tries to detect mobile devices using only regular expressions, some UA cleaning and some logic, but no UA database at all (fast & light on resources, but at first not as varied and complete as a DB solution).
Right now it's in the early stages but already working and can be tested in this url (recommended with a mobile device):
http://amimobile.kartones.net

If you notice any problem or incorrect matching please let me know so I can correct the logic and improve similar cases.

The world of mobile development (even indirect like mobile websites) is a bit caotic sometimes , but if things were always easy what fun would be in the software development world?


Is Android becoming the new J2ME?

AndroidWhen J2ME appeared, we were all told that it would allow to create Java applications that would run on any capable phone.
Nice utopia, but anybody that has either worked developing or alongside J2ME developers knows that this is, apart from a funny joke, quite distant from reality.

J2ME, if anything, can be said to be "code one, port everywhere". With the epic mistake of Sun of letting manufacturers implement their own version of J2ME Virtual Machines, the mess that we have currently gives more headaches that solves problems, but still there are quite a lot of non-smartphones in the market so support and application development has to be still present.

False capabilities reporting, all kind of errors, problems and bugs on VM implementations lead to almost 100% of the cases leading to a pack of "builds" for specific devices (or if you're lucky, family of devices of a brand), each with different fixes and/or hacks to bypass the problems.

So, in conclusion we have a nice idea gone terribly wrong and causing a lot of development problems.

Leaving apart other major PDA types (iPhone, Windows Mobile and BlackBerry), Google probably said "Hey, we can do better! Let's include normal Java and provide better SDKs, more guidelines, an AppStore like Marketplace but free, and everything will go nice".

And yes, the idea is ok, in fact Google is pumping SDKs at quite a fast pace (although they are more related to special launchs like Google Maps Navigation/Motorola Droid or the Nexus One than to the size of changes and new features).

Android itself is more than decent. IMHO is after the iPhone the best smartphone choice, better than a Blackberry and way better than Windows Mobile (I've been a WM user since its 2000 PDAs), the market has a lot of apps...

But I see two major problems:

The first one, Google itself noticed it, and is one of the reasons why Nexus One exists: Pushing SDKs is nice, but if the OS version pushing depends on the Operator, your screwed. In Spain, my HTC Magic runs Android 1.6 because Vodafone rolled the update, but HTC Hero is stuck on 1.5 because Orange hasn't pushed 1.6 (says will push 2.0 but we'll see).

Nexus One will be able to have direct updates, so problem solved, but at the same time google is now a competitor of the manufacturers and operators. The same problem happens with any Windows Mobile device, you usually get stuck with the OS version it has forever. Apple did it correctly because they only build a single range of models, so they control their OS updates.

And the second problem, is the falacy of Java pure multi-platform, projected on Android.

At work, we have one specific device that does not render correctly all transparent pngs on WebKit. Why does it happen, if it's the same browser everywhere? Why some devices throw errors when others work perfectly with the same code? Why Google didn't thought about multiple resolutions at first, and then launched a device with a crappier, lower resolution than "the standard" after many apps are out?

Those two things, and some stupid limitations (the browser doesn't allows HTML file upload controls, but if you install Opera Mini under Android, it is able to use them...) are making me wonder if really Android is so platform independent, or if we're going the way of a "cooler an better" J2ME version 2.

If you have an Android phone with some apps installed, you will probably notice this in a subtle way: almost weekly updates on quite a lot of apps, with update logs like "added multiple resolutions support" and then "fixed a few bugs", "fixed a problem with xxxxx device", "updated for the nth time to support Android 2.1" (isn't it backwards compatible?)...

I wish I'm wrong...


Windows Mobile and iPhone thoughts

Since my shift of job, I'm "living" on a multi-platform environment (in fact, I am part of the minority of Windows users), and a lot of people has iPhones. Add to it some friends who have them too, and it's impossible to avoid looking and chatting about them. So this post is some sort of personal comparison and thoughts about iPhone and Windows Mobile.

I've been using Windows Mobile since I think 8 years (the old HPs with 4 colors and a terrible battery), so I have some knowledge of their evolution.

Windows Mobile has always been very similar. Apart from higher resolution "cousins" (which haven't extended too much to the market, maybe because of the higher battery consumption, maybe because a lot of applications don't support non standard 320x240 or 240x320 resolutions), most core changes habe been related either to internal aspects (less hangs/errors, better multithreading, lower battery consumption, smaller WM cores...) or to integrate Windows Mobile with phones (but then, not so good, because Smartphones are just non-touch screens and fewer buttons, and at least with WM5.0 Visual Studio had yet problems differentiating them).

So we can say that Windows Mobile evolves very slowly, except on from the developers perspective, because since .NET Compact Framework appeared, creating apps has been simplified and extended a lot (currently we have .NET CF versions 2.0 and 3.5, although are not comparable to normal .NET Framework ones).
And with P/Invoke we always have the option to access all the APIs non available from managed code.

But Windows Mobile has a really big burden that Microsoft seems to avoid constantly: Usability.

Using a smartphone is far away from using a low-cost Nokia, and miles away from using an iPhone. And the PDAs, phone or not, can't be properly used without the pen, no matter how much effort companies like HTC put into creating custom UI; they are just applications over the Windows GUI and you end having to use it for any non-trivial task.

But then came the iPhone and revolution arised. A semi-perfect UI, impressive look&feel, fast responses, very decent battery, big buttons and on-screen keyboard to avoid needing a pen...

So my first question is: Why Microsoft doesn't improves drastically the UI of Windows Mobile? After all those years it should have been a logical advance. Now, it is a requisite.

Windows Mobile 6.5 has indeed improved it, but both internet articles and friends told me that it is "the Windows Vista of PDAs": Pretty but slow and a resource hog. So either you buy a new non-cheap phone with a fast "cpu, or forget about it. Do we have to wait now until WM7.0 to "fix" resource usage?

Apple is improving iPhone OS quite vastly, adding tons of new APIs and radical unpresent functionalities (like push application messages). Why MS don't does something similar, at least with the things it most needs?

The iPhone has hardware accelerated graphics built-in, and a growing list of impressive games. Windows Mobile has had touch screens since they appeared, and until the Nintendo DS came out, we didn't had more than one or two games that implemented radically different ways of interacting with a pen on a touch screen.
Some PDAs even had a now defunct NVidia 3D accelerator. And yet, I only play two games or ScummVM from my PDA, because the rest of games suck.

Why so much resource, innovation (at the past) and time wasted for nothing?

The iPhone has some serious lacks, like not supporting background applications. Windows Mobile has always had them, and it is so easy to develop one. And yet, Appe launches a "patch" (push messages) and I'm sure it will make the iPhone shine even more.

I am tired of phone company spam over SMS, so I have in mind developing an SMS-spam filter (a background application that checks new SMS as they arrive and using a black-list deletes them automatically). That kind of application can't be done for the iPhone, unless Apple decides to do it (or you jailbreak it, because I've seen that kind of apps on a unlocked iPhone).

We have Windows Mobile emulators, APIs, third party components, native DLLs, ActiveSync APIs, PocketOutlook, IRDA, GPRS, 3G, Wireless, Bluetooth, SMS, MMS, push mail... tons of options at our disposal. And all of them lightly used.

Just look at the browsers... iPhones Safari is almost perfect, it only lacks Flash support, but renders webpages perfectly, allows zoom and works like a charm. Is almost equal as using the desktop Safari.
Windows Mobile 6 has a crappy "Mobile Internet Explorer" that sucks (in fact works like Internet Explorer 3.0, doesn't even supports a decent javascript or CSS 2.0), so we have to either rely on Opera Mobile (which works fine, but needs a lot of memory and is slow and not as usable as Safari) or wish that Mobile Firefox comes out soon. Why doesn't Microsoft improves once and for all Mobile Internet Explorer? (And no, Pocket IE6 is not much of an improvement, it is only good compared with the current PocketIE).

Apple has some dictatorial restrictions: App store apps having to be approved, SDK only for Mac and limited (but growing a lot in new APIs), no option of other browsers or applications already present at the iPhone OS... But it works! At least what they provide is really good, enough for the majority of the users!

I love having the option to develop my own applications for the devices I use, I like developing in C# for my HTC Touch. But the truth is that if in Spain Telefonica didn't had the monopoly of iPhone distribution, I would probably switch from Windows Mobile to an iPhone, even not being able to develop my apps (or maybe yes, if Mac OS and the SDK works inside a VM...).

Palm is already dead because of their lack of innovation, and Windows Mobile took its market.
Blackberrys are widely extended for corporate use because they won't be really nice, but they are usable and good for email.
If Microsoft doesn't "awakes" and starts focusing on really improving Windows Mobile, they will lose their market share and user base and keep their PDA-Phones only for their employees and friends.

And from my developer perspective, that would be a pity. Windows Mobile isn't bad, it is just too desktop-like and needs to become a real phone-oriented OS. But Microsoft doesn't seems to understand that, and is slowly going to the same path Palm went: slow and delayed improvement (not evolution). While iPhone is becoming a revolution.

Note: Here it is a very similar post to what I think of iPhone, but more deep as the author actually owns an iPhone and not has only played with them as I.