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.
