The Roveb Blog

Simple Mobile Website Loyalty Program for your Business with Roveb

Feb 8, 2012
Home

Our Experience With jQuery Mobile and Sencha Touch

Before we started building Roveb, we spent some time researching and studying mobile Web usability on smartphones. Our main focus was on hand-held usability, small-screen aesthetics and Web standards. During the initial prototyping phase, we reviewed jQuery Mobile and Sencha Touch as two of the many mobile Web development frameworks out there.

We found that both of these frameworks are better for native app development (with the Web app running in a container) rather than for mobile Web apps or mobile websites, since they are not optimized towards a great user experience. Both try to mimic the native app look & feel, but in most cases their shortcomings make their use counter-productive for the mobile Web in its current state.

Here’s a summary of our analysis:

1. Size and Speed

  • jQuery Mobile (1.0.1) CDN-Hosted JavaScript is 81.5KB (minified) in size or 24KB minified and gzipped.
  • jQuery Mobile (1.0.1) CDN-Hosted CSS with Default Theme is 48.6KB (minified) in size or 7KB minified and gzipped.
  • jQuery core (1.6.4, required for jQuery Mobile) CDN-Hosted JavaScript is 89.5KB (minified) in size or roughly 30KB minified and gzipped.

That’s a total of 220KB (minified) or 61KB minified and gzipped, to be delivered on an average mobile network (remember smartphone users are most active outdoors, away from their home or office WiFi).

  • Sencha Touch (1.1.1) core JavaScript (no official CDN copy available) alone is a whopping 367KB (minified) in size.

These figures exclude any custom HTML, JavaScript, CSS and images that the final mobile app or website will hold.

The sheer size of these libraries made it unacceptable for real-world use cases. Even if the files are served from a CDN, it still leaves room for improvement, until 4G becomes a widespread standard.

So why is file size a major consideration for mobile Web apps and sites? Because not only does it affect the download time of the resources on mobile bandwidth, but it significantly increases the parse & render time (see below) in mobile browsers.

Sure, a CDN (with local fallback ofcourse) will provide slightly better downloads, increased parallelism and better caching, but those advantages are mostly made redundant due to the increased mobile network latency, mobile browser gzip decompression and script parse time.

2. Parse Time

Speeding up mobile websites is as important as having one. Google’s mobile performance best practices suggests:

In our own tests conducted in early 2011, we found that on modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.

That would roughly equate to 171ms of load time for jQuery Mobile and jQuery (minified and decompressed), and around 370ms+ for Sencha Touch, on each page request. Add the mobile browser gzip decompression time along with load time for other content on the mobile page and those numbers would go up even more.

With site speed becoming increasingly valuable in Web search ranking and overall online sales, even small changes in response times, specially in a mobile environment, can have significant effects.

Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20%. Tests at Amazon revealed similar results: every 100ms increase in load time of Amazon.com decreased sales by 1%.

3. Usability

In our prototype testing on iPhone and Android, we found that while Sencha-based pages were pretty responsive and swift, jQuery Mobile operated with sluggish transitions, scrolling issues with fixed toolbars and inconsistent look & feel between the two devices.

Between the two, we found jQuery Mobile more suitable for development due to its markup-based approach as opposed to Sencha’s pure JavaScript code, despite jQuery Mobile being sluggish than Sencha in actual usage. Sencha has an Open Source version. jQuery Mobile is Open Source too, and it is backed by a smart community. It also has a wider device support, although 95% of current US mobile traffic is represented by Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices alone.

So when it comes to developing for the mobile Web, light-weight and more optimized alternatives like Zepto.js and HTML5 Mobile Boilerplate are more suitable.

Notes

  1. neilnand reblogged this from roveb
  2. hoangthienan7 reblogged this from roveb
  3. roveb posted this

We are Roveb
Follow us on Twitter