SEO Optimization keyboard_arrow_down

Fundamentals

Learn how to develop hybrid mobile web apps

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.