April 15, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Six Tips for More Responsive Cordova Apps

  • December 30, 2013
  • By David Talbot
  • Send Email »
  • More Articles »

HTML5 apps built with Apache Cordova are great technologies to create multi-platform apps. When done properly you can create a high performance app that is just as responsive to the user as a native app.

Don’t Click Me There!

When you first try to adapt a web app to mobile the first thing you’ll notice is no matter where they tap on the screen it feels laggy. Your first instinct would be to think that the rumors you heard about HTML apps on mobile phones being slow are true. This isn’t the case. What you are experiencing is how a mobile web browser is trying to interpret touch commands to map them to old-style click events.

The browser receives a touchstart event first, then it is listening to see if the finger is going to move to scroll or release to become a tap before it fires the click event your app is listening for. The total lag introduced by the browser trying to interpret the touch event to click event mapping is about 300ms. 300ms may not sound like a lot but it is more than enough to make an app feel noticeable lag.

To eliminate this lag, you can either change your script to use the touchend event instead of the click event, or you can use a touch-to-click polyfill like FastClick. FastClick takes the incoming touch events and maps them to the click event without the 300ms delay. After you include the script on your page, you just need to initialize it with the single line of code below and you can keep using the click event with no delay!

$(document).ready(function() {
    FastClick.attach(document.body);
});

Simplify Your Structure

The more nested your HTML tags, the more work the mobile browser will have to do in order to paint the screen. This is because the browser needs to look all the way down the DOM tree to see if an item at the lowest level needs to make the container wider and if it does, the top level container needs to re-layout where all of its children are placed. One of the biggest culprits is using nested tables in order to lay out the page, which any modern web developer would tell you is a no-no… but old habits die hard.

Keep as much of your page directly on the page body as possible for an app that can render its screens quickly. Avoid nesting deeply and keep the structure simple.

Size Your Images

Since the dawn of the web, smart web developers have known that setting your image width and height properties is a great way to speed up how your page renders. This good habit extends into the era of HTML/Cordova apps even if your image is stored locally on-device.

This improves the speed of your application for a similar reason to why simplifying the structure of your app improves performance. If the browser knows exactly the size of the image when it interprets the HTML, it knows exactly how much space to give that image before it fetches the image even if it just needs to fetch the image from the local disk.

Go On-Device

Frequently web app developers will look to adapt their existing web app into an Android or iOS app. Your first instinct will be to point Cordova to your web app’s URL on the internet. This might be an expedient way to say your app is now a mobile app but the user experience will disappoint your users.

The problem is of course that every page view will have to reach out across the internet over a cell connection to fetch your web page and all of its images. The performance will of course match the performance of your web site but a user’s expectation for a mobile app’s performance is to be much more responsive than a web app. The user expects something to happen the moment they tap something.

The solution to this problem is to write your application’s UI tier in pure “.html” files enhanced by CSS and JavaScript without using a server side page generation language like ASPX, Java or Ruby.

Use LocalStorage for Your ViewModels

When a user launches an app, they expect it to launch quickly and with data. The user doesn’t expect the app to show a blank screen while your app fetches data. Most apps do, however, need to regularly communicate with a server to get and set data. In order to keep your app as responsive as possible, store your app’s ViewModel in localStorage in order to always have data on-hand to render a screen.

Even if you need to put up a loading message while you refresh the data, the user will be able to see the app with the previous data behind it and feel like your app is more responsive than if they were shown a blank screen with a loading message.

Likewise, you can use localStorage to provide a two-stage commit when the user changes data. For example, you can have a write queue that saves changes to localStorage that is then asynchronously uploaded to the server while the user is still free to continue interacting with other screens in your app.

Force Hardware Acceleration Selectively

Many devices, including mobile phones, have a separate GPU that can be tapped by invoking a CSS transform on them. In effect, this trick is all about rendering your element the same as it always is but by telling the browser that you want a 3D transform, you’re moving the rendering of this element from the CPU to the GPU. You can do this by using a simple CSS translate3d shown below.

.Accel {
transform: translate3d(0,0,0);
}

This particular trick needs to come with some caution as it can’t be universally applied because the amount of memory available on the GPU is limited and exceeding the amount of memory available on the GPU can cause app crashes. Although practical use of this approach can take some experimentation, a good rule of thumb is to use it if you have part of your page that is fairly complex compared to the rest of the page, apply it to the top-level element of that complex piece of your page and measure the improvement. When you are testing for hardware acceleration, you will of course need to test on-device and not through an emulator to see what kind of performance improvement you’ll get.


Tags: HTML5, web applications, apps, application, apache cordova




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel