3 Essential Lessons For Developing Great PhoneGap Apps

QArea Expert by QArea Expert on February 17, 2015

3 Essential Lessons For Developing Great PhoneGap Apps
Reading Time: 3 minutes

What’s the Challenge?

We all know very well why we’re into PhoneGap app development: PhoneGap is just the best option we see to help us take an app and transfer it to a number of native App Stores avoiding the necessity to learn some new languages. While PhoneGap APIs are certainly simpler and easier to navigate than HTML5 functions, and app development with PhoneGap becomes a much easier task, with this great power also comes great responsibility.

Thus, simple apps built with PhoneGap that require no data connection and just serve static information work just OK. However, once you’ve decided to add some complex CSS3 elements, multiple devices support or heavy transitions, you start realizing there must be some steps you need to iron out first.

Generally speaking, there are 3 lessons you need to learn.

Lesson 1: Understand Native Patterns

The most powerful thing that immediately jumps out at developers from PhoneGap website is that this framework publishes one codebase into up to seven various app stores. OK, it really does it, but that doesn’t mean your app looks great on each platform. Thus, it’s essential to understand the key development and design principles of those devices you want your app to support.

First, your app should act and feel like native. A good trick to do it is to avoid making users “wait” for some app actions and exclude the “loading symbol” at all. As for the design side, you need to follow some important layout patterns across different platforms, too. Thus, the iOS and Android interfaces of one app look similar in content, but their navigation bars are different.

Conforming to the principles of different systems requires creating more code bases, but the inner content will be the same, so you’ll have to change only your header and footer.

Lesson 2: Live by DOM

Document Object Model (DOM) certainly isn’t your best friend while building PhoneGap apps. A downside of making rich and feature-heavy effects and transitions is the frequency of the DOM changes you must make. Thus, while a desktop browser has extensive resources it works with and its engine rendering Javascript is better, it’s not the case with mobile browsers which generally lack such resources. Of course, this problem among some other may cause some issues in displaying content and general app performance as well as affect the user experience as a whole.

Luckily, there are some solutions you can use to increase performance in such cases: hardware acceleration for browser, excluding box shadows and gradients, using pre-compiled templates, and minimizing the DOM structure.

Lesson 3: Test and Debug

Debugging and testing are among the most difficult tasks in the process of your PhoneGap app building. As your web app is intended for mobile, you are able to push fixes to the users quickly, but you are also subject to the process of approval for updates while submitting the app to different stores, too, and this can take certain time. Thus, it’s simply imperative that your app is extensively tested before launch.

On the web, you should be using tools like Firebug and Web Inspector that let you inspect DOM elements and see XHR requests. Testing on the mobile phone is more challenging, but Weinre, a great PhoneGap’s tool, will help you remotely debug the nagging issues.

Where Are We Heading?

You may see PhoneGap app development as a daunting business after the challenges we’ve discussed here. But all the lecturing was aimed only at sparing you most difficulties. In reality, after following these tips you’ll get an app many people aren’t even going to notice it’s PhoneGap-based and won’t be able to differentiate it from a native app – and this is actually your goal. Similarly, don’t get too overwhelmed with building a perfect Android or iOS app – focus on creating a great app as such instead.

Contact us for further guidance and support!