Introducing a Hybrid Mobile Application

A common misconception is that a Hybrid Mobile Application cannot be installed on the device, but that is wrong. A Hybrid Mobile App is like any other Native Mobile App, which can be installed on devices and published using App stores. They can access the device hardware such as camera, accelerometer, GPS, and so on.

As we have discussed, there are multiple mobile platforms such as iOS, Android, Windows, plus many new ones such as Firefox OS and Tizen that have emerged lately. The development environment and programming languages are different for each of these. We have to code using Objective-C for iOS apps, Java (Android SDK) for Android apps, C#/VB.net with XAML for Windows Phone apps. If any entity requires its mobile presence across all these platforms, multiple teams and different codebases need to be maintained, which is too cumbersome.

Hybrid Mobile Apps can be developed for multiple platforms using a single codebase. However, some specialized code needs to be written for each platform to harness the native APIs for it.

Types of Hybrid Mobile Apps

There are broadly two categories of Hybrid Mobile Apps in the industry:

• WebView-based Hybrid Apps
• Cross-compiled Hybrid Apps

WebView-based Hybrid Apps

Each native mobile platform has a common control/component called a WebView, which is nothing but a Chromeless browser. This component is utilized to open locally hosted web content, for example, HTML pages, CSS files, and JavaScript code. HTML5 and CSS3 provide capabilities to develop responsive apps, which can render nicely on multiple screen sizes. The web technologies have evolved to handle the touch interactions that make them a perfect candidate for developing solutions for smartphones and tablets. The example of development platform and frameworks using this approach are Cordova, Ionic Framework, KendoUI Mobile, F7, Mobile Angular UI, Onsen UI, and many more.

Cross-compiled Hybrid Apps

Another category of hybrid app involves cross-compiling multiple native apps from a single programming language. For example, the developer will code using a single language, say, A, which can be converted at compile time or run time into native language components. Generally, these types of frameworks and platforms leverage creating a bridge or a mapping of native components to their custom constructs in the programming language intended for development. Examples for this category are Xamarin (C#), Kony (JS), Corona (C Lang.), Qt(C++), and many more.

We will be talking about WebView-based Hybrid Apps in this book as they are more suitable for large-scale and complex Mobile Apps. In this next section, we will learn more about the anatomy of Hybrid Apps and how they are capable of developing Native Apps for multiple platforms.

Anatomy of a Hybrid Mobile App

Hybrid Apps are no different from Native Mobile Apps that are installed on any mobile platform such as Android or iOS. On any platform, the core device APIs for hardware such as GPS, Camera, Accelerometer, and so on will be exposed by the Mobile OS. The following diagram shows the anatomy of Hybrid Mobile App:

These APIs are consumed by the native code of your Hybrid Apps. All the components of Hybrid Apps are discussed in detail in the following section.

Custom WebView

Each native platform development kit has a component called WebView, which is nothing but a Chromeless browser control. WebView has the capability to open local or remote web content, which is exploited by Hybrid App frameworks to display the UI of the app using web technologies. This is the most important component of a Hybrid App and has a significant role in deciding the performance of the app.

WebViews in popular platforms such as iOS and Android used to have a different rendering engine and JavaScript engine than the latest browser (Chrome or Safari). Last year, Apple released a new control in its SDK called WKWebView, which uses all the performance optimization such as the Nitro JavaScript engine used by the Safari browser on iOS. On similar lines, Google also released an updated WebView, which uses the rendering engine and JavaScript runtime of Chromium (Chrome browser). Google has also launched a new feature called Updatable WebView from Android (5.0) Lollipop, which enables you to upgrade only the WebView of your Hybrid App.

Crosswalk is an interesting open source project that enables app developers to embed custom WebView into your Hybrid App. With these advancements, Hybrid Apps have become capable of using the latest web features such as WebRTC for real-time multimedia communication, and WebGL for advanced graphics rendering.

Native library

All the Hybrid App development frameworks based on WebView have their own native library. It comprises some basic utility functions that support the Hybrid App such as creating app configs, bootstrap code for Native Apps, customization for the WebView, common error/exception handling logic, and so on. The native library is specific to the mobile platform as it involves interacting with the core OS APIs and components.

The most popular framework, for example, Apache Cordova/Phonegap has an architecture of dividing its native library into a core section and pluggable components called plugins. This helps in reducing the bare minimum size of a Hybrid App. Developers can use only the plugins they require for a specific app. A plugin will include native code for a particular feature and a JavaScript interface exposing the native functionality. For example, if you want to use the Fingerprint Authentication API for iOS, you can just include the plugin for iOS and use it apart from the core. It also enables communities to contribute by developing open source plugins.

Native to JS Bridge

In a WebView-based Hybrid App, the UI is always written using web technologies, and JavaScript is the language for writing logic and hence we need to call our native code from JS and get results to JS also. A bridge has two functions, one is to enable JS to call any native method and the other is to allow native methods to execute callbacks in JS. The bridge comprises different implementations in different platforms to call JS from native. For example, in Android, Java objects are marshalled into the WebView and can be called from the JS. In iOS, JS calls a specific URL scheme, which is interpreted by the native code. The reverse bridge is a simple global JS function that is called by the WebView passing special arguments such as callback results or specific commands.