A Simple Case for Hybrid Mobile App Development

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?

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:
  • Image resizing from server-side
  • Client-side detection and replacement via JavaScript
  • HTML5 picture element
  • HTML5 srcset attribute
  • CSS image-set
  • CSS media queries
  • Resolution-independent images (SVG)
• 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:
  • AngularJS
  • EmberJS
  • BackboneJS, etc.

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:

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’.
• Create a ‘New Project’ in Visual Studio. Select the ‘Blank App (Apache Cordova)’ template under JavaScript.
• 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.

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.

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:

• Scan your site for out-of-date libraries, layout issues, and accessibility
• Download free virtual machines for Mac, Linux, and Windows
• Check Web Platform status across browsers including the Microsoft Edge roadmap
• Remotely test for Microsoft Edge on your own device

More in-depth learning from our engineers and evangelists:

• Interoperability best practices (series):
  • How to avoid Browser Detection
  • Using CSS Prefix best practices
  • Keeping your JS frameworks & libs updated
  • Building plug-in free web experiences
• Coding Lab on GitHub: Cross-browser testing and best practices
• Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
• Advancing JavaScript without Breaking the Web (from Christian Heilmann)
• Unleash 3D rendering with WebGL (from David Catuhe)
• Hosted web apps and web platform innovations (from Kiril Seksenov)

Our community open source projects:

• vorlon.JS (cross-device remote JavaScript testing)
• manifoldJS (deploy cross-platform hosted web apps)
• babylonJS (3D graphics made easy)

More free tools and back-end web dev stuff:

• Visual Studio Code (lightweight code-editor for Mac, Linux, or Windows)
• Visual Studio Dev Essentials (free, subscription-based training and cloud benefits)
• Code with node.JS with trial on Azure Cloud