5 Tips For Building High Performance PhoneGap Applications

When it comes to developing a PhoneGap app, some of the most common questions people often ask are about its performance. How to increase the speed of a PhoneGap app? How to make a PhoneGap app deliver native user experience? Or how to build high-performance PhoneGap apps?

As we know, PhoneGap uses familiar web technologies like HTML5, JavaScript, and CSS and building HTML5-based applications using JavaScript is quite easy. In fact, it is easier to create less performant applications using JavaScript. One way to ensure decent performance when building an app with JavaScript is to be vigilant when writing the code. Some of the other ways to develop high-performance PhoneGap apps are mentioned below. Take a look:

Using a JavaScript Framework:
The programmers that created frameworks for building HTML mobile applications spent thousands of hours to fix various potential performance issues and simplify mobile app development. If you try to build an HTML mobile app without using a framework, it will likely be time-consuming and error prone. As a result, it is advised to use a framework for creating an HMTL mobile app with JavaScript and ensure high performance.

Avoid using bad animations:
Here ‘bad animations’ refers to animations with CSS which are, in most cases, not smooth. To avoid this, you can use transitions in the following way:

Bad:

.el {
top: 0;
transition: 200ms top;
}

.el .animated {
top: 20px;
}

Good:

.el {
top: 0;
transition: 200ms transform;
}

.el .animated {
transform: translate3d(0, 20px, 0);
}

The use of CSS transformations helps to offload the rendering to the GPU by converting the element into an image during the transitions that avoid style recalculations. And with translate3d, you can set the transformations to z axis to force the use of GPU.

Tap Delay:
Tap delay is a telltale sign of an application built with HTML5 with a 300ms tap delay. When a user taps anything on your mobile app, the browser powering your app will wait 300ms prior to actually triggering an event. This contributes greatly to making the app perform slow and not quite as fast as a native app.

Offline Storage:
It is easier to store application data on local servers. The app uses storage that is dedicated to the app within the browser which enables you to store simple strings and retrieve them later. However, there are some issues with the local storage including limited storage space and persistence issues with the data. One good solution is to make use of an SQLite plugin. It provides access to native storage, eliminating the space restrictions. Also, PouchDB, an open source JavaScript database, can be used in conjunction with the SQLite plugin. This gives a basic NoSQL style syntax that enables easy storage and retrieval of data while syncing the local data with a remote database.

Cross Walk:
The Cross Walk project enables Android apps to use CrossWalk WebView in place of the default system WebView. This provides a consistent WebView even after using various versions of Android and benefits such as improved performance, WebRTC, Web Components and more. You can add CrossWalk to your PhoneGap application using the Crosswalk WebView Cordova Plugin.

If you have any questions, feedback or suggestions regarding building high-performance PhoneGap apps, you can consult developers of PhoneGap or write to use using the comment box below.

A professional and security-oriented programmer having more than 6 years of experience in designing, implementing, testing and supporting mobile apps developed.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store