What is a Hybrid Mobile App?

Hybrid mobile apps are like any other apps you’ll find on your phone. They install on your device. You can find them in app stores. With them, you can play games, engage your friends through social media, take photos, track your health, and much more.

Like the websites on the internet, hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript. The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. (You can think of the WebView as a chromeless browser window that’s typically configured to run fullscreen.) This enables them to access device capabilities such as the accelerometer, camera, contacts, and more. These are capabilities that are often restricted to access from inside mobile browsers. Furthermore, hybrid mobile apps can include native UI elements in situations where necessary, as evidenced by Basecamp’s approach towards hybrid mobile app development.

It can be very difficult to tell how a mobile application is built. Hybrid mobile applications are no different. A well-written hybrid app shouldn’t look or behave any differently than its native equivalent. More importantly, users don’t care either way. They simply want an application that works well. Trying to figure out if a mobile application is hybrid or native is like trying to differentiate rare grape varieties of wine. Unless you’re a sommelier or someone who really cares about it, it’s not terribly important. What matters is that the wine tastes good. The same can be said for hybrid mobile applications; so long as the application does what it’s supposed to do, who really cares how it was built? This point is underscored through an experiment we conducted where we wanted to see if people could tell the difference between a native application and a hybrid application:

How are hybrid mobile apps built?

Hybrid mobile applications are built in a similar manner as websites. Both use a combination of technologies like HTML, CSS, and JavaScript. However, instead of targeting a mobile browser, hybrid applications target a WebView hosted inside a native container. This enables them to do things like access hardware capabilities of the mobile device.

Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code. As a side note, Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools. For more context about this history, check out PhoneGap, Cordova, and what’s in a name?

These plug-ins include APIs for accessing the device’s accelerometer, contacts, camera, and more. There is also a number of plug-ins that are built and maintained by the developer community at-large. These can be found in the Apache Cordova Plugins Registry. A curated subset of these plug-ins that have been throughly tested, documented, and extended can also be found at the Telerik Verified Plugins Marketplace.

Application assets like HTML, CSS, JavaScript are packaged through the tooling made available through Apache Cordova to target platform SDKs. Once built, you have an application that can run like any other kind of application on the device. The tooling provided by Apache Cordova is largely driven through a command line interface. That stated, developers can still leverage IDEs like Visual Studio and solutions like the Telerik Platform to further enhance productivity.

What are the motivations to go hybrid?

Hybrid mobile applications provide a way for developers to re-use their existing skills in web development. Developers don’t like the prospect of getting locked into proprietary platforms. This includes the programming languages and SDKs provided by platform vendors (more on this later).

Hybrid mobile application development looks appealing to an organization’s bottom line. Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? Well, the reality is a bit more complicated.

Yes, it’s true that hybrid mobile application development enables developers to target more than one platform. However, each platform comes with a set of caveats when it comes to its web runtime or WebView. This is especially true with Android, which is inconsistent between OS versions.

Moreover, there might be unique capabilities of platforms to which a developer may wish to target. In those instances, a combination of plugins and platform-specific code must be utilized in order to take advantages of those capabilities. Alternatively, developers can take advantage of 3rd party web runtimes like Crosswalk that can be embedded in your hybrid app.

It should be noted that Android 5.0 introduced updatable WebViews via the Android System WebView. Check out What Android 5.0’s Auto-Updating WebView Means for Mobile Apps for more information about this recent change and the impact it will have for hybrid mobile development.

When should you build a hybrid mobile app?

Before committing to a platform strategy, it’s important to evaluate the technical and non-technical merits of hybrid versus alternatives like web and native – especially as it relates to your mobile application’s requirements. For example:

Which mobile platforms do you wish to target?

Do you want to distribute your application via app stores?

Are you looking to utilize the capabilities of the mobile device?

What are the technical abilities of your development team?

Does the one-size-fit-all approach of hybrid really live up to its promise?

These and other questions are worth asking before embarking upon development of a mobile application. To elaborate on this, let’s examine a few of these questions in more detail.