Developing Native Apps with HTML5

Created: 05/15/2017
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.

picture showing symbols for developing native apps with HTML5

[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

Basically Cordova creates a plain native app which embeds a WebView - simply said, a browser. The WebView executes the web app which is developed with Web Technologies. Additionally Cordova provides a set of plugins which allow to access operating system specific APIs. Plugins are native code with an interface to JavaScript. The native app consists of the plugins’ code, the code to manage the WebView with all its interfaces, and the necessary files to develop the web apps (HTML, CSS, JavaScript,…) files as assets. This is the reason why Cordova apps are also called Hybrid Apps - a combination of native and web code. The Cordova CLI is responsible for putting all together.

Frameworks to develop Cordova apps

The web app is being developed with a JavaScript in conjunction with an UI (user interface) framework. There are some choices to take: Is there a preference for a JavaScript framework like Angular, React or Vue? How shall the app look like? Shall it follow the operating system standards and therefore look like a native app, or shall it implement an own corporate identity or a combination of both? I believe most developers want to implement as many as possible native looking components.

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.

An additional significant advantage of the WKWebView is the support of scroll events. This is important for large lists, when native scrolling should be used. With UIWebView, JavaScript based scrolling has to be used, if scroll events are required.

Other issues for Cordova development

Dependencies

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

When developing forms, the Keyboard Plugin should be used in order to scroll the inputs to the correct position. The keyboard plugin provides events which indicate the opening and closing of the keyboard. With the help of these events, it is possible to scroll the view with JavaScript to the correct position.

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

When handling large lists, scrolling is an issue. Native scrolling is the simplest and most performant way to scroll. As mentioned above, for iOS the WKWebView has to be used. Even though native scrolling can handle a few hundred list items, it is not possible to handle very large lists. In this case some kind of pagination is needed or the use of a JavaScript related concept, e.g. InfiniteScroll from Ionic.

Plugins

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.

Conclusion

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.