- Cordova Tutorial
- Cordova - Home
- Cordova - Overview
- Cordova - Environment Setup
- Cordova - First Application
- Cordova - Config.xml File
- Cordova - Storage
- Cordova - Events
- Cordova - Back Button
- Cordova - Plugman
- Cordova - Battery Status
- Cordova - Camera
- Cordova - Contacts
- Cordova - Device
- Cordova - Accelerometer
- Cordova - Device Orientation
- Cordova - Dialogs
- Cordova - File System
- Cordova - File Transfer
- Cordova - Geolocation
- Cordova - Globalization
- Cordova - InAppBrowser
- Cordova - Media
- Cordova - Media Capture
- Cordova - Network Information
- Cordova - Splash Screen
- Cordova - Vibration
- Cordova - Whitelist
- Cordova - Best Practices
- Cordova Useful Resources
- Cordova - Quick Guide
- Cordova - Useful Resources
- Cordova - Discussion
Cordova - Best Practices
Cordova is used for creating hybrid mobile apps, so you need to consider this before you choose it for your project. Below are the best practices for Cordova apps development.
Single Page Apps
This is the recommended design for all Cordova apps. SPA is using client-side router and navigation loaded on the single page (usually index.html). The routing is handled via AJAX. If you have followed our tutorials, you probably noticed that almost every Cordova plugin needs to wait until the device is ready before it can be used. SPA design will improve loading speed and overall performance.
Touch Events
Since Cordova is used for mobile world it is natural to use touchstart and touchend events instead of click events. The click events have 300ms delay, so the clicks don’t feel native. On the other hand, touch events aren't supported on every platform. You should take this into consideration before you decide what to use.
Animations
You should always use hardware accelerated CSS Transitions instead of JavaScript animations since they will perform better on mobile devices.
Storage
Use storage caching as much as possible. Mobile network connections are usually bad, so you should minimize network calls inside your app. You should also handle offline status of the app, since there will be times when user's devices are offline.
Scrolling
Most of the time the first slow part inside your app will be scrolling lists. There are couple of ways to improve scrolling performance of the app. Our recommendation is to use native scrolling. When there are lots of items in the list, you should load them partially. Use loaders when necessary.
Images
Images can also slow the mobile app. You should use CSS image sprites whenever possible. Try to fit the images perfectly instead of scaling it.
CSS styles
You should avoid shadows and gradients, since they slow the rendering time of the page.
Simplification
Browser's DOM is slow, so you should try to minimize DOM manipulation and number of DOM elements.
Testing
Ensure that you test your app on as many devices and operating system versions as possible. If app works flawlessly on one device, it doesn't necessary mean that it will work on some other device or platform.