You want to develop apps with Cordova or PhoneGap, but you’re wondering: where do I start?
If you are a native app developer, you may have reached a point in your career where your client says: “I understand that a native app has its benefits, but I prefer Cordova because I want to save on maintenance cost. I don’t want to have to maintain two separate products: Android and iOS”. At this point you just have to consider that maybe your customer is right and you start thinking if Cordova can really compete with a native app. You can read about Native Apps vs Cordova/PhoneGap in this article we wrote previously.
What is Cordova, what is PhoneGap?
The first thing you need to do is to understand the difference between Cordova and PhoneGap so you can choose which one you want to work with. In short, initially there was only PhoneGap, but one day the creators of PhoneGap decided to donate the code to the Apache Software Foundation to make the software part of the Apache incubator. This version of PhoneGap under the care of Apache was renamed Cordova. Today, PhoneGap is a distribution of Cordova. honeGap is maintained by Adobe, and both PhoneGap and Cordova are distributed as free software. The difference is that PhoneGap benefits from certain tools created by Adobe that facilitate development: such as PhoneGap Developer App, Adobe PhoneGap Build, Adobe Marketing Cloud y Adobe PhoneGap Enterprise.Which one is right for me to develop apps?
To decide whether to use PhoneGap or Cordova, one asks oneself the questions: Will I use the tools provided by Adobe if not which tools/framework will I use? If you consider that Adobe’s tools are beneficial for you and you are willing to pay for some of them then choose PhoneGap; if not, choose Cordova.
But why use Cordova if PhoneGap has more tools at your disposal? Some authors on the Internet, like Bartek de MakeHybridApps, say that Cordova receives updates a bit faster and has a simpler interface. Others, like Utkarsh Sinha en Quora, ay that the Cordova team has less monetary interest than the PhoneGap team, and that if you’re an experienced developer and want more control over your app, you’ll probably love Cordova.
The best thing to do would be to determine which framework/tools you want to use for your PhoneGap/Cordova development, and based on that decide which of the two is right for you. For example, we already saw that there are many Adobe tools available for PhoneGap, but other frameworks like Ionic, in their chapter 1 of the guide, recommend using Cordova even though Ionic works for both PhoneGap and Cordova.
At EtyaLab we have opted to use Cordova, so the rest of the article focuses on some things you should know about Cordova.
Why Cordova allows me to develop with HTML, CSS and JavaScript?
Because the application written with Cordova runs inside a WebView.
A WebView is a control provided by the different platforms (Android, iOS, Windows Phone, etc.) that allows you to display a web page. Android uses the WebView, class, while iOS uses the UIWebView class
What Cordova does is to create a native app shell, whose only component is a web view where the application you have written with HTML, CSS and JavaScript runs. So your application written in Cordova is simply a web page.
The web page you will write in Cordova to function as a mobile app must follow a particular design to look like a native application: the Single Page Application (SPA) design.
What is a Single Page Application?
A Single Page Application o SPA is a web application that runs entirely on a single page with the goal of making the user experience more fluid. Since the page is only loaded the first time, no new pages will be loaded while the user is using the application. This is important, because by loading the page only once, all the resources needed by the page (the HTML, CSS and JavaScript) are loaded at startup, and when using the application, the user does not have to wait for the reload time, as he/she will never have to move to another page. After the initial load, the rest of the resources needed by the application can be downloaded dynamically via AJAX.
In this introduction to SPAs, the author mentions several applications that have been implemented as SPAs: Gmail, Google Maps, Google Drive, Hotmail and Trello. Now you know why the page never reloads when you open an email in Gmail.
As a native app developer you may ask yourself: if your app is just a web page running inside a WebView, how can you do to display the different screens you show in your native app? How do you simulate the creation of Android activities or iOS segue? For this, there are several SPA frameworks that can help you.
4 Reasons to use a Framework
In its documentation, Cordova presents several SPA frameworks that can be used to develop applications with Cordova Among those mentioned are AngularJS, jQuery Mobile and Sencha Touch. At EtyaLab we have chosen to useIonic because it integrates very well with Cordova and offers well-designed controls for the mobile environment.il.
Using a framework to work your application in Cordova instead of writing the whole application on your own has many advantages. Many developers on the Internet, such as Josh Morony, emphasize how important it is to use a framework to develop applications with Cordova. Here are some of the advantages of using a framework:
1. Controls designed to look native
Check out some of the controls that Ionic offers so you can build a web application that looks native.
2. Behavior that looks native
Android and iOS have animations that are native to the mobile environment, such as transitions between screens, scrolling lists, etc. The framework developers have already done the work of recreating those animations with JavaScript for you.
3. Optimized code to improve performance
Let’s remember that the app we are going to create will be running on a mobile device that does not have the same resources as a computer. The creators of the frameworks have taken the necessary measures so that the functionality offered by the framework takes the least number of resources possible.
4. Handling of SPA sections as screens
Do you remember the question from a while ago about how can you do to display the different screens that you show in your native application? Well, the frameworks we have listed above take care of that job for you. You just have to read the documentation of the framework you choose to understand how a section of your SPA is displayed as if it were a screen of the application without having to reload the page you are displaying..
Considerations when using Cordova
You will need to test the app on many devices
Different devices have different DOM implementations; so you have to test on multiple devices in order to correct any deviations in the presentation of the app. This would be equivalent to the process when you write a web application and support multiple browsers; you have to make sure that the application looks good in as many browsers as possible.
You will have access to native functionality through plugins.
In order for you to access phone functionality such as camera, accelerometer, battery status, status bar, storage, etc., you will need to install several of the plugins developed for Cordova. But don’t worry, most of the functionality generally needed is already covered, according to this platform support chart.
Very old versions of Android/iOS will not be supported.
support According to the Cordova for Android documentation, as a rule of thumb, “Android versions stop being supported by Cordova when they fall below 5% on Google’s distribution dashboard“.
Next Steps
Install Cordova
You can use either of these two guides, although there are many more on the Internet:
2.Filip Petkovski’s Detailed Guide
Install Ionic
With Cordova installed, installing Ionic is fairly easy:
Unleash your imagination
What will be your first Cordova application?
