PhoneGap: How To Create One App For All Platforms
Based on the keynote contributed by MobiDev to iForum, written and presented by our leading HTML/JS expert Yuriy Luchaninov.
is a popular framework for cross-platform app development. One of the
main advantages is the opportunity to use the same code on various
platforms. Basically, PhoneGap is a native
Currently PhoneGap supports a number of platforms; however, covering Android and iOS only, we cover 91% of the whole smartphone market. Thus we cover Apple App Store and Google Play, which hold 92% of total revenue.
Getting started: specifics of a PhoneGap application
A good app is a responsive app; that's one of the main tasks in PhoneGap app development. The user won't feel discomfort, if the app, while performing a long operation, blocks the interface and shows the progress bar. But the discomfort appears when the user touches the button that doesn't respond at once. It's not even a matter of several seconds; it takes only 100 millisecond lag between touch and response to cause a subconscious discomfort. And that's how we feel that the app interface doesn't react as an object of the physical world.
Let's learn the main problems in making a PhoneGap application responsive:
#1. The 300 millisecond lag between touch and click event on touchscreens
#2. The problems of touching
#3. Optimization of DOM (document object model) of the app screen
#4. The problem of long lists
300 ms lag between touch and click event on touchscreens
The problems of touching
One of the most widespread bugs in PhoneGap apps is usually described as either "I touch the button, but it doesn't always work," or "I touch the button to no response." This bug appears due to improperly created user interface, and it raises the problem of touching.
Let's see how it works on the image where a finger interacts with a device. The red spot marks the visual contact area between the finger and the screen, while the green one marks the real contact area. These areas differ, because we look at the touchscreen at an angle, while our finger-cushions are curvy.
The difference is measured by mere pixels, but with small interface elements it's enough to feel. With bigger interface elements, there can be a complaint like "The lower side of the button doesn't respond to the touch." This can be corrected quite simply, with proper layout of the app page. For example, the area of response can be made bigger than the button itself. It can be placed upon a bigger, invisible interface element; or the button size can consider the possible area of a touch.
Optimization of DOM structure
If you choose an element of the list on a page, then proceed to another page to display the result, you'll need to store data somewhere between the pages. Usually these data are transmitted through the server and are stored there. But since WebView gives no opportunities to transmit data between the pages, there has to be another solution.
One of the simplest ways to solve this problem is using single-page apps. These are the apps that display the same page which has changing content. This approach can cause lags in the app. The more complicated the app is, the longer these lags are.
There are two ways to solve the problem:
#1. Load the content of the page with Ajax queries.
The maximum optimization can be reached with two of these combined. Then you will have to load the page just once.
The problem of long lists
This problem basically begins with the previous one, which adds the necessity of rendering or recalculating the list elements, including the invisible ones. For example, if the fill of a list element depends on its position in the list, the rendering machine will apply CSS to all of the list elements, including the ones that are located beyond the visible area.
In native components it's realized—as shown on the first part of the picture—with replacement of data in an invisible element with a changed position. This means there's no list of 1000 elements on the screen. There are only 10 visible elements, while others (cache) are hidden and alter their content.
Useful tips: how to build a highly responsive PhoneGap application
• Place input fields on the upper side of the screen.
• Avoid long lists and overloading screens with excessive elements.
• Avoid shades, which decrease performance on low-end Android devices.
• Gradients don't always look good (depending on the display quality and screen resolution), and require extra capacities, in comparison with one-color fill. That's why, just like shades, they should be applied only out of necessity.
• Semitransparent fill should be implemented as a .png file, in order to make it render the same on various platforms.
• Use the capacities of the graphics processing unit (GPU) for animations.
+ The most obvious advantage of hybrid app development is the level of code sharing.
+ Adjustments can be performed via browser; remote adjustments can be performed on a mobile device via 'weinre'.
- Necessity to optimize UI for different platforms. Each platform requires an extra amount of time for this optimization; however, it's much faster, than programming two native apps from scratch.
- No support for multithreading, since not all of the mobile WebViews have the implemented WebWorkers. This can be resolved with native PhoneGap plugins.
- Necessity to create a responsive interface (including the abovementioned problems: the 300 ms lag, the problem of touching, optimization of DOM and long lists).
As you can see, it's not all about advantages and disadvantages, and these drawbacks are not quite drawbacks proper, but rather the technical specifics of PhoneGap.
Thus, if you want the app to perform complicated calculations or display a lot of data simultaneously, it's a better task for native development.
• You need a great unique UI.
• Complicated calculations and operations are performed on the server side.
• The app contains a lot of image, audio and video content.
• mass media
• online shops
• portals, forums and blogs
• presentations, branded and PR applications
• applications for tourism industry, etc.
Feel free to get acquainted with a detailed case study on PhoneGap app development.
Long and turbulent is the way from a startup idea to the first version of a software product launched on the market. But it's... more →
Effective UI/UX design is directed at needs, wishes, and limitations of end users. That's what you must keep in mind when you... more →
July 12, 2013
Based on the report contributed by MobiDev to iForum 2013, written and presented by our leading PhoneGap specialist Yuriy... more →