Making sense of the mobile development ecosystem — Part 2: Hybrid apps and hybrid/native apps

By Brian Rinaldi

This article covers hybrid apps and hybrid/native apps as part of a series on options for mobile development. Part 1 laid out the development spectrum — from mobile web to native — that you can see in the diagram below and took a deeper dive into the mobile web option.

The spectrum of mobile application development options

The following are more options on the spectrum when it comes to mobile app development:

Hybrid apps

Technically speaking, the term “hybrid” can refer to any native application that contains some portion of content displayed by a WebView. In practice, hybrid typically refers to mobile applications where the majority of the application is built within the WebView and contained within a native app wrapper.

Hybrid mobile apps can be developed using the same technologies used to build a standard website: HTML, CSS and JavaScript. However, the native app wrapper means the app can be deployed to app stores and/or installed on devices the same way as a fully native mobile application.

Under the hood, hybrid apps typically include native components that allow the app to access native APIs for capabilities not accessible within the browser. These work through a bridge that allows the WebView to communicate with the native components and the developer to call APIs from JavaScript.

Each of these layers incurs a minor performance cost, and there can be difficulties in making the user interface (UI) look and behave like a native application. However, depending on your use case, these issues may be offset by the ease of development and skill reuse that hybrid development offers as well as the ability to target multiple mobile platforms with a single code base.

Hybrid development with Cordova and PhoneGap

Apache Cordova, an open source framework for building hybrid mobile applications, was first created by Nitobi and is now part of Adobe. The commercial equivalent from Adobe is called PhoneGap. The two names are often used interchangeably, but Cordova is the predominant framework for hybrid mobile app development.

Cordova provides the native application wrapper and the bridges to communicate with native device APIs from within the WebView. In addition, Cordova offers a plug-in architecture that simplifies the process of plugging new functionality into a hybrid app with native code. Because Cordova is an established solution with a large community, there are currently more than 1,000 existing plug-ins developers can leverage within their app — Telerik maintains a list of verified Cordova plug-ins that have been tested and documented.

There are also some widely used frameworks for developing applications with Cordova, the most prominent being the Ionic Framework. Other popular frameworks include Framework7 and Onsen UI.


Hybrid/native mobile apps

The hybrid/native mobile application model is very new, and some may argue it’s just hybrid. However, what distinguishes this development model is that it uses a combination of native UI components and transitions with the WebView. These native UI elements are leveraged strategically to make the application look, feel and behave more “natively,” while still allowing developers to enjoy the code reuse and ease of development, using web technologies — HTML, CSS or JavaScript — in a majority of the application code.

While the hybrid/native model is new, there are already a couple of frameworks designed to help simplify its use, including Microsoft’s Project ACE and Mobify’s Astro. Because these frameworks rely on Cordova, they still allow developers to leverage the Cordova plug-in ecosystem.

Hybrid mobile app development offers numerous benefits, from skill and code reuse to rapid prototyping. However, running your application entirely in the WebView also comes with some tradeoffs. Hybrid/native strategies attempt to mitigate those tradeoffs by leveraging native UI components where appropriate, but it is still a relatively new and experimental model with a steep learning curve.

The next article in this series will look at the JavaScript Native, cross-compiled and native mobile development options.

Written By

Brian Rinaldi

Developer Programs Manager, Telerik

Brian uses his decades of experience in development and the developer community to help the Telerik Developer Relations team deliver top-notch content and community programs. He is co-editor of the Mobile Web Weekly newsletter and authored the recent report on Static Site Generators…

Other Articles by Brian Rinaldi
See All Posts