A Simple Case for Hybrid Mobile App Development

By Abhishek Narain

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

What is a Hybrid Mobile App?

A hybrid mobile app is similar to any app that you download from an App Store, but the fundamentals of how they work is different from native apps.

Like websites, hybrid mobile apps are built using web technologies like HTML, CSS, and JavaScript, so most of the JS libraries developers use over the web can be reused for hybrid apps too. The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. This enables them to use device capabilities like the accelerometer, camera, and many other system APIs. These capabilities are often not accessible by a website running on mobile. The web is also more interoperable than ever—including modern browser engines like Microsoft Edge’s EdgeHTML—so if you’ve previously ruled out hybrid solutions, it’s a good time to reconsider a hosted web app solution (more on that below).

Where Do Hybrid Mobile Apps Come From?

Mobile and Desktop Users graphical representation

The above graph clearly communicates that the number of mobile users have clearly overtaken desktop users, which is resulting in businesses refocusing priorities to cater to mobile users. While businesses already had a presence on the web—in most cases a website—the easiest option for them to scale up to all mobile platforms is to consider the hybrid approach. It helps them to keep teams with similar skillsets without having to invest hugely in iOS, Android, or Windows Native developers in one go. It sounds like a cost effective strategy, so let’s dig deeper.

HTML5, CSS3 & ES6 in a Mobile App. Really?

In recent years the web has moved towards standards. We rarely find new web apps with metatags for compatibility with IE6. These HTML5, CSS3 and ES6 standards means the web is now cleaner, working across standard browsers without having to change code. In fact, you can scan your website for interoperability best practices here that also help development of cross-platform hybrid apps.

  • Looking at this, we can leverage the standards to ensure we end up using the same DOM even in hybrid mobile apps across all platforms. This approach helps us write clean code and helps easily maintain it. Check out the code for the native-looking header bar for iOS, Android and Windows Phone on JSFiddle.
  • With new HTML5 and CSS elements, we can take care of various screen resolutions that our hybrid apps will run on. In order to make your images look crisp for everyone, you usually have to deliver twice the dimensions than what is actually shown in your app. Serving properly sized images for all different resolutions is one of the most discussed topics in responsive web design. There are various approaches, each with its benefits and drawbacks related to bandwidth, code maintainability and browser support. Let’s quickly review the most popular ones:
  • CSS3 media query works out well for loading logos appropriately based on screen size the hybrid app gets rendered on:
    
    /* Normal-resolution CSS */
    .logo {
      width: 120px;
      background: url(logo.png) no-repeat 0 0;
    }
    
    /* HD and Retina CSS */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
    only screen and ( min--moz-device-pixel-ratio: 1.25),
    only screen and ( -o-min-device-pixel-ratio: 1.25/1),
    only screen and ( min-device-pixel-ratio: 1.25),
    only screen and ( min-resolution: 200dpi),
    only screen and ( min-resolution: 1.25dppx) {
      .logo {
        background: url(logo@2x.png) no-repeat 0 0;
        background-size: 120px; /* Equal to normal logo width */
      }
    }
    
  • Similarly, we can use platform specific fonts by querying device type.
    
    /* Windows Phone */
    font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;
    
    /* Android */
    font-family: 'RobotoRegular', 'Droid Sans', sans-serif;
    
    /* iOS */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
  • Single-page application (SPA) is a web application that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. There are libraries which help web developers make more fluid web experiences:

Enter the Hybrid App Dev Platform

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. John Bristowe provides a good explanation of the why and how on his blog. It was earlier called PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools which is offered by Adobe. For history refer to PhoneGap, Cordova, and what’s in a name?.

These plug-ins include APIs for accessing the device’s accelerometer, contacts, camera, and more. There are 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.

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. While tooling provided by Apache Cordova is largely driven through a command line interface, developers can also use IDEs like Visual Studio. I’ll show you how:

Visual Studio plus HTML5, CSS3 and Javascript

Apache Cordova

Getting Started with Hybrid Apps Using Visual Studio 2015

  • While installing Visual Studio 2015 (try VS Code for Mac, Linux, or Windows or the new Dev Essentials offerings that includes cross-platform tools) ensure that you select custom install and select checkbox for ‘Tools for Apache Cordova’.Visual Studio installation
  • Create a ‘New Project’ in Visual Studio. Select the ‘Blank App (Apache Cordova)’ template under JavaScript.Apache Cordova sample appApache Cordova sample app
  • You can use AngularJS or any other JS library of your choice, with Intellisense. Hence developers can be more productive using Visual Studio. Not just this but the debugging experience is great too. Visual Studio ships an Android Emulator which boots up lightning fast compared to the one present with the SDK.Android emulatorAndroid emulator

Try a Hosted Web App Solution

Increasingly, hosted web apps are a new lower cost way to build cross-platforms apps using a pre-existing web experience. The web app is hosted on the server and the HTML/CSS/JS files are not present locally in the package. Open source libraries like manifold.JS have increasingly made this path easier – you build your manifest file, upload logos, and you can quickly put your web app in the Android, iOS, and Windows Stores. Some platforms like the Universal Windows Platform also permit use of native APIs like notifications and monetization features. You can follow this tutorial to create a hosted web application in a few minutes for Windows 10.

Pros:

  • This sounds like a great option for web developers who already have responsive web applications to get started with UWP APIs without having to start from scratch.
  • Application updates are controlled from the server, so the application is always updated.
  • Monetization though the store.
  • Native API access/Cortana/Windows Hello etc.

Cons:

  • It requires a consistent network connection, as the application files are hosted on the server.

Then Why Use Native at All?

In the past Facebook had leveraged the hybrid approach for their apps to ship cross-platform, which they replaced later with native apps, claiming faster performance since native apps leverage platform specific APIs. I am not suggesting that hybrid apps are always a failure, but you need to select the approach wisely based on your app requirements, user expectations, APIs that you want to use, etc. At the end of the day all you want is that the users enjoy and use your application as much as possible.

The statistics from flurry below show the usage of different categories of apps on Android and iOS.

IOS and Android's browser and apps usage graphical representation

This is interesting to know as it gives an insight into what end users like doing most on each platform. If your app’s category coincides with higher percentage use apps, you have a bigger audience but might have stiffer competition from other apps. You might consider this in taking a call for hybrid or native application development.

Conclusion

I have seen many B2B apps using hybrid approaches to meet business requirements over focusing on end user experience, many of whom can afford to do this as their audience is already well-trained in using their existing apps.

In B2C scenarios, the focus changes a bit. End users expect the simplest and the best of experiences from your application, so you need to focus on UX, performance, simplicity, stickiness and other consumer retention concerns. There’s nothing better than when you can use a native platform specific feature here like ‘Windows Hello’ to authenticate the user by scanning their retina or leverage TouchID in an iOS App.

More Hands-on with Web Development

This article is part of the web development series from Microsoft evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:

More in-depth learning from our engineers and evangelists:

Our community open source projects:

More free tools and back-end web dev stuff:

  • https://www.codenameone.com/ Shai Almog

    Interesting article.
    Are you familiar with Codename One?

    We recently added open source support for Cordova which should make building Cordova apps without a Mac or without a Windows machine really trivial. It should also allow many other nice to have features such as desktop packaging, native code access and Java support.

  • http://www.imobdev.com/ Darshan Thakker

    Great article that describe whole scenario of development of hybrid app.

  • http://8sph.com 8th Sphere

    I agree. Hybrid apps are great for most purposes, but not always the right solution. If you want to build games or have a lot of control over hardware for other reasons, then native approach is best.

  • http://www.imobdevtech.com/ Dev Patel

    Really great article..!!

  • http://www.hbandroidlabs.com/ Jane Brewer

    Nice article, it’s depends on requirements and how you deal with it whether you are using Hybrid or native plate-forms for mobile app development.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.