7 Tips for PhoneGap (&Mobile-Web) Beginners

While the mobile app market continues to grow steadily, mobile app development knowledge in most companies is still immature. Most companies have already aligned their business strategies with the latest mobile-world changes and started recruiting mobile teams but haven't yet streamlined their app development processes. This problem is notable also among mobile-web app developers, where the two domains have synthesized into one platform that carries both methodologies and twists. Here are some tips and thoughts I've gathered through my work with PhoneGap / Apache Cordova.

It’s a mobile app not a web app
The very first thing you notice when switching from web app to mobile-web app development is that your tools and environment are quite similar. This may lead to a misconception about your target audience environment and behavior. Actually, there is little in common between a web browser user and a mobile app user. For example the .click() event has a major role in browser use but really doesn't fit the mobile context where users prefer to tap (touch) elements of their app interface. Technically, "touchend” events are fired with no delay so they are significantly faster than “click” events.


Another example of a behavior that usually happens in the context of web browsers and doesn't make any sense in mobile apps, is highlighting elements after a user has clicked on them. In a mobile app, you need to prevent objects from being highlighted by a touch event.

Using a fully featured engine/framework vs. your own stack of libraries
As in creating web or desktop apps, one should choose the right UI patterns to develop mobile apps easily. Most mobile app workflows fit into short and gamified scenarios. There are plenty of game engines and App UI frameworks that can be very handy. Rather than using a fully featured framework that may limit your scenarios and put them in the wrong pattern, there is the option of using low-level libraries that solve a specific problem. This is usually better if your game or app has specific UI requirements like special animation but is less recommended if you want to build a traditional mobile-web app. Combining several libraries such as backbone.js and jquery transit may provide a great starting point in creating a flexible interface and smooth workflows.

Responsiveness and image preloading
You may make the assumption that since you are working on a client-side app, there is zero-time resource loading, for example, for loading images, scripts and local data files. This is, of course, not true and may cause bad user experiences and slow response times. To solve it, there are two methods that should be taken:
Use Asynchronous Module Definition (AMD) to load resources and handle dependencies. One simple implementation is requirejs.
Use the sprite technique to store your images and improve the drawing time. One simple implementation is spritejs. 

Usage analytics and A/B testing in the context of mobile web
Tracking and analyzing your users’ experience of your app is a key factor for improving your product incrementally. This also enables you to drop the MVP (most valuable product) before releasing a fully featured mobile app. Three great examples that are already adjusted to the mobile app world are Google Analytics, Mixpanel and KISSmetrics. Another technique that should help with improving your product incrementally is AB testing. This allows you to switch the content or view of your mobile app to show how your users consume it. For example, you can reorder the main menu items to see how many people get to the goal of selecting an option that you want them to select (purchasing your app, downloading more content, etc.).

Different platforms, same conventions? customization?
If you target several mobile platforms, it’s a bit naïve to think that your app is going behave in an identical manner on all platforms. This may lead to the fact that you will need to customize your app according to the target platform it is running on. Another factor is that if you use plain Apache Cordova (rather than the Phonegap build) you will need to customize several platform-dependent settings on your own. For example, if you want to hide the status bar when running your app, in iOS you will need to tweak Info.plist with the key field “UIStatusBarHidden” and the value “YES”. In Android it’s done differently by tweaking the app’s manifest file.

Emulator
One of the key benefits to using mobile-web is the fact that you can have one emulator that fits all platforms. In other words, you don’t need a different emulator for each platform (iOS emulator, Android Emulator, etc.). Chrome Ripple extension is the easiest way to do that.

Continuous delivery 
A key decision you will need to decide upfront is what method to use to build your mobile app, either independently (in-house) or using the Phonegap build. If you decide the former you can use automatic tools such as Jenkins and XCode Jenkins Plugin, which are highly recommended for easing the delivery process and streamlining the work within your team.