PhoneGap development highlights

We should mention some highlights before starting real development. They will help you understand why some mobile frameworks behave the way they do. The first thing we should understand is that a mobile device is more limited in resources than a computer. We should think of it from different aspects of the development.

Use a single-page application approach

Single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience.

Loosely defined, a SPA is a client-side application that is run from one request of a web page. The user loads an initial set of resources (HTML, CSS, and JavaScript) and further updates (showing a new view, loading data) are done via AJAX.

Some SPA libraries you can use in your Cordova applications are:

AngularJS
EmberJS
Backbone
Kendo UI
Monaca
ReactJS
Sencha Touch
jQuery Mobile

Don't generate the UI on the server

Often, we need an interaction between our application and other servers. We need it to share data between multiple endpoints: other mobile devices, websites, and so on. Very often, the architecture is built in such a way that it sends not just data, but layout information as well.

It will be better to just create a needed set of data on the server side and send it with JSON, XML, or other formats. It can be customized as well. Do not send HTML through the Internet because it could be stored on the client. We will reduce the payload without sending HTML through Internet.

Limit network access

Cache static and dynamic data on the device. It can be filesystem, local storage, or database. Use the offline-first approach. We will discuss this approach in the upcoming chapters.

Increase perceived speed

We can create the illusion of faster hybrid application with the following approaches:

Don't wait for the data to display the UI
Tip
Do not show the preloaders without it being ready UI. Display the UI first, and only when you get data, update this UI. It allows you to increase perceptive performance.
Avoid the click event's 300 ms delay
Tip
Do not use click events on the mobile devices. It works fine on the devices, but most devices impose a 300 ms delay on them in order to distinguish between a touch and a touch hold event. Using touchstart or touchend will result in a dramatic improvement—300 ms doesn't sound like much, but it can result in jerky UI updates and behavior.

Use hardware acceleration

Using hardware-accelerated CSS transitions will be dramatically better than using JavaScript to create animations. See the list of resources at the end of this section for examples.

Optimize images

Combine images in sprites. It will decrease the number of requests and will improve the speed of image display. Just use CSS sprite sheets, which support high-resolution screens.

You can read about sprites on the following sites:

There are a lot of other resources that you can find online as well.

Optimize payload

Compress CSS and JavaScript. Compress JPEG pictures. Don't use a full-stack framework just because you like a small piece of it. Use system fonts. Use fonts for icons.

Tip

For example, we can use FontAwesome from http://fortawesome.github.io/Font-Awesome/. It includes a lot of free icons we can use.

Minimize browser reflows

Minimizing browser reflows will help in saving memory and CPU resources. We can do it with following steps:

Reduce the number of DOM elements
Minimize access to the DOM
Update elements "offline" before reinserting into DOM
Avoid tweaking layout in JavaScript

Test

Use Chrome Developer tools, Xcode profiler, and other tools to understand performance problems, memory leaks, and other issues in the application.

PhoneGap By Example

By : Andrew Kovalenko

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

PhoneGap development highlights

Use a single-page application approach

Don't generate the UI on the server

Limit network access

Increase perceived speed

Tip

Tip

Use hardware acceleration

Optimize images

Optimize payload

Tip

Minimize browser reflows

Test

PhoneGap By Example

By : Andrew Kovalenko

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

PhoneGap development highlights

Use a single-page application approach

Don't generate the UI on the server

Limit network access

Increase perceived speed

Tip

Tip

Use hardware acceleration

Optimize images

Optimize payload

Tip

Minimize browser reflows

Test

Create a Note

Delete Bookmark

Delete Note

Edit Note

Confirmation

Buy this book with your credits?