Developing Native Apps with HTML5
by: Roberto De Simone
App development with Web Technologies and Apache Cordova leads to less development and maintenance costs. With a single code base it is possible to build apps for Android, iOS and Windows.
[original post created September 2014. This post is completely rewritten]
Apache Cordova is the key product to develop apps with HTML5
The key product to develop native apps with web technologies is Apache Cordova. Also very popular is PhoneGap. There is some confusion about how PhoneGap is related to Cordova: it is a fork of Cordova. Both products are nearly identical at the moment. But as announced in a PhoneGap blog, it is to be expected that PhoneGap will be extended with additional features - like Progressive Web Apps support. Further on I will refer only to Cordova.
How does Apache Cordova work
Frameworks to develop Cordova apps
There are various frameworks available; from my experience, the following have especially to be mentioned:
- Ionic: maybe the most popular and most complete framework. Ionic is built with Angular. Apart from the nice UI components, Ionic solves various issues concerning Cordova development out of the box - Ionic Native provides a very nice plugin integration.
- Framework 7: originally a VanillaJS framework which was not especially created for Cordova. Since it got a Vue integration, Framework 7 got very popular. The UI components are pixel perfect, and the speed is amazing.
- Onsen UI: this framework uses Web Components and supports various JS frameworks (Angular 1, Angular 2, React and Vue).
Tools to build the app
The native programming tools
For app building, the native development tools are still the first choice (xCode, Android Studio, Visual Studio) because they provide maximum flexibility. But it is to mention that the learning effort is not to underestimate. Also maintaining the development environment with all related components requires a lot of attention. Microsoft tries to address the dependencies issue with TACO Tools. This is a CLI which installs all necessary components needed to build Cordova apps. TACO Tools also make sure that all components fit together. They do this by providing Validated Kits. Especially for enterprise development this is very useful.
Cloud based app building tools
There are also services which don’t require the installation of the native development tools. The building happens in the cloud. To be mentioned are PhoneGap Build and the Monaca Cloud IDE. Not all plugins can be used when building in the cloud. Also there are limited possibilities for customization of the build process.
Microsoft Visual Studio
Microsoft Visual Studio supports the building of Cordova apps as a first class citizen. It installs all development tools locally with the already mentioned TACO tools. For iOS development, a Mac with the remote agent will be needed. It is even possible to use MacInCloud. Bottom line, the whole development happens inside Visual Studio, and Microsoft takes care of the installation process. Additionally, there are templates for Ionic and Onsen.
Testing and debugging Cordova apps
When it comes to testing or debugging the use of emulators / simulators (iOS) is helpful. Since Android Studio 2.2, also the Android emulators are very useful, if the PC/Mac supports Intel HAXM (Hardware Accelerated Execution Manager). It is no longer necessary to use a third party service. Even better though is to have a set of various devices.
The role of the WebView
The WebView is part of the operating system
As said above, the web app is being executed in the WebView. Apart from Crosswalk for Android (see later), the WebView is part of the operating system and not of the app.
An operation system update therefore might also change the functionality of the WebView. As a consequence the WebView is a component which is not under the control of the developer.
Android specific WebView issues
Android devices running version 5.0 and higher have a WebView which will be updated through the Google Play Store. This way these devices will always have a WebView which is powered by the latest version of Chromium. But it has to be kept in mind that also a newer version of a WebView might break some functionality of the app.
Android 4.1, 4.2 and 4.3 still use the old Android stock browser which has limited functionality. Android 4.4 got Chrome (32 and 33), which already was a big improvement. But these old operating systems have in common that the WebView will never be updated. Targeting these operating systems is a mess unless using Crosswalk Project. When using Crosswalk, a modern version of Chromium (which can be defined by the developer) will be bundled with the app. Generally this is great because now the developer knows exactly for which WebView he has to develop. But Crosswalk also has its downside: the minimum size of an APK is 30MB if different builds for arm and x86 are provided. The APK size approximately doubles when using a common APK for arm and x86. There is also a light version of Crosswalk which downloads Crosswalk on first time usage (I don’t recommend this solution).
My personal opinion is to target Android 4.4 or higher (but it depends on whether the UI Framework supports 4.4) or even better to target Android 5.0 or higher and to avoid Crosswalk in favor of a light app package.
iOS specific WebView issues
Since iOS 8, two different WebViews are available: the old UIWebView and the modern WKWebView which brings performance improvements and a lower memory footprint. Due to some issues most Cordova apps still use the old UIWebView.
Other issues for Cordova development
All software components to build a Cordova app must fit together: node, cordova, cordova-platforms (Android, iOS, Windows), build tools (Android Studio, xCode, Visual Studio), plugins, UI frameworks… Not all versions of each component can work together. This is maybe the biggest issue when developing for Cordova. It is important to have a fully automated build process in order the project to be easily set up after updating software components. All project settings should be done with config.xml settings. When custom settings are needed, hooks should be developed (check the Cordova Documentation for further information). Changing manually settings in the native development tools should be avoided whenever possible.
Forms and keyboard handling
Another related issue are missing Form Control widgets (pickers) to help user input. It is a good idea to take a look at Mobiscroll.
Large list scrolling
Plugins will be used for functionality which cannot be developed with Web Technologies. Today for the most popular requirements a plugin is available. But there might be a problem in case a feature is needed for which a plugin is not available or a plugin is not working correctly. In this case there is no way around to create a new plugin or to modify an existing plugin and therefore native development skills are required.
Cordova provides strong productivity gains for app development
Once able to handle Cordova app development, the productivity gain for app development is unbeatable compared to the native development tools. Developing one code base and being able to deliver an app for each platform is super cool!
There are also big synergies for the web. If the app is nicely designed, the same code base can even be used for a web app which is deployed through a web server.
Frameworks like Ionic are also supporting the building of Progressive Web Apps (PWA).
How does Cordova compare to native development
The use of the native APIs will always lead to a better user experience. The question is whether it is worth to spend double, triple or even more time to develop an app with the native APIs when users can not really notice the difference between an app developed with native APIs or one developed with Web Technologies.
Also note: there are many frameworks which try to solve the problem of using the native APIs with a single source base - React Native, Nativescript, Flutter, Xamarin Forms - just to mention a few. The results of these frameworks are very nice, and yet they need time to evolve in order to reach similar productivity gains as Apache Cordova does.
Apart from the productivity gains: UI frameworks, Web Technologies and plugins are constantly improving under every aspect. In the future it will even get more difficult to distinguish between an app developed with native APIs and one developed with Web Technologies.