Everything you need to know about building hybrid apps but were afraid to ask

Guest post by Ian Naylor, Founder and CEO of AppInstitute, one of the world’s leading DIY app builders

Most of us already know what the word hybrid means, so there’s no need to define it in general terms. Relating it specifically to mobile apps, a hybrid app is one that is built using common web technologies (HTML5, CSS3, and JavaScript), before being wrapped in a container that allows it to run natively on mobile devices: making one thing by combining two different elements.

Of course, if you’re quite familiar with the app technology landscape, you would also already be familiar with terms like native apps, and web apps (which can be turned into progressive web apps). So why do hybrid apps even exist, and how are they different?

Native apps are obviously the gold standard because they are specifically written for the operating system (OS) on which they will run (with iOS and Android being the most popular). These types of apps not only perform better and offer a better user-experience, but they also have easier access to system resources. But they take longer – and cost considerably more – to develop.

The Offcourse golfing app, developed using Onsen UI

Web apps don’t require separate versions for different operating systems, so they can typically be developed faster, and at a far lower cost. However, unless they are progressive web apps, they can’t be added to a device’s home screen, and they can’t work without an internet connection. They also have limited access to system resources.

Hybrid apps combine a little bit of both web apps and native apps, so you can deploy a single codebase across multiple platforms, and also provide a ‘home’ for the app on the device’s home screen. The primary content is still loaded over the internet, but the experience, look, and feel is quite app-like. Unlike web apps, hybrid apps can access some system resources, and while the overall experience might not be as smooth as a native app, advancements in the frameworks used to develop hybrid apps have improved the experience over the last few years. Many of you may remember the sometimes awful experience of using the Facebook mobile app before the company developed a native app, but nowadays there it’s highly likely that you have used a hybrid app without even knowing it.

Why Choose a Hybrid App?

Not every business needs – or has the resources to – develop a native app. Choosing to develop a hybrid app isn’t so much a compromise as it is choosing a great alternative. There are many factors to consider when deciding between developing a native or hybrid app, but the top three are:

• Your budget.
• The complexity of the features you plan to include, both in the initial release, and in future updates. The overall complexity of the app itself is also a consideration.
• The overall quality of the user-experience you want.

Apps that will include advanced graphics (3D graphics, multi-layered animations), or require simultaneous processing of large amounts of data (fast rendering of video, applying live filters to photos, etc.), are not suited to the hybrid approach. Think: games and certain entertainment apps. But many apps that would fall within the shopping, utility, and productivity categories are ideal candidates.

The companion app for the Joule sous vide tool, developed using Ionic

The potential benefits of choosing a hybrid app over a native app, particularly for small and medium businesses, include:

• They are easier to maintain. Using web technologies means you don’t have to develop and maintain separate codebases for Android and iOS devices: a single codebase works on almost any mobile operating system.
• They are cheaper and faster to develop. The use of web technologies also closes the gap between idea and finished app, and the cost of development is typically less. Many web developers won’t have much difficulty transitioning to developing a hybrid app, while a native app requires specialists: Java for Android, and Swift and/or Objective-C for iOS.
• There are a large number of resources available. Any nascent technology starts out with limited resources and capabilities, and while this was once true for hybrid apps, you now have extensive resources available, including multiple development frameworks. If the features and functions you want in your app are available, there’ll be a framework that supports it.
• They offer a uniform experience. Since the core codebase uses standards based web technologies, your app will look and behave the same on different devices.
• They can function even without an internet connection. Native apps also support this functionality, but regular web apps do not. Admittedly some features might not be available offline, but this will differ from app to app, and isn’t too much of a negative point.

Choosing the Right Framework

The Sworkit fitness program app, developed using PhoneGap

Frameworks make app development easier, whether you are building a web app, or a hybrid app. And just as there are a number of frameworks you can use when developing a web app, there are now several powerful frameworks that make hybrid app development even better.

PhoneGap is one of the oldest mobile app frameworks, dating back to 2009. Adobe donated the PhoneGap codebase to the Apache Software Foundation in 2011, where it has been developed as open-source software under the name Apache Cordova. The PhoneGap brand lives on at Adobe, and additional tools have been added to Cordova to make the framework more robust. These tools include a desktop and developer app, and the freemium PhoneGap Build tool which takes care of packaging your HTML, CSS, and JavaScript into an Android, iOS, or Windows mobile app.

Ionic, like PhoneGap, is built on top of Cordova, and again combines various tools to simplify your hybrid app development. While the core framework is open-source, accessing features such as live testing, a drag-and-drop app builder, and a native app packager requires signing up for a pro plan.

Although both PhoneGap and Ionic include support for Cordova’s core plugins – which give you access to various device system features and functions – Ionic includes support for many more plugins. Deciding between using PhoneGap or Ionic is less about which of the two you prefer, and more about which native or device functions your app needs to access. PhoneGap, like Ionic, is largely open-source, so extending functionality through the use of 3rd-party plugins is possible, but it is worth remembering that this could influence development time.

The Workpose app, developed using Framework 7

Another consideration is that newer releases of Ionic now make use of Angular.js and TypeScript, so if you have limited knowledge of either of these, you may want to start with PhoneGap, or even Framework 7 or  Onsen UI. Both Framework 7 and Onsen UI are JavaScript library and framework agnostic, but they don’t include their own app packager, so you would still need to use Cordova to package your app for Android or iOS.

Hybrid apps are easier – and cheaper – to develop than native apps, and while the user-experience might not have been as smooth as with native apps just four or five years ago, powerful new hybrid app frameworks, and hardware, are changing that. Developing a native app is sometimes unavoidable, but for small and medium businesses who don’t need complex apps, going the hybrid route won’t lead to regret.

Ian Naylor, Founder and CEO of AppInstitute

About the Author
Ian Naylor is the founder and CEO of AppInstitute, one of the world’s leading DIY App Builders (over 70,000 apps built).

Naylor has founded, grown and sold 4 successful internet and technology companies during the past 18 years around the world. He gives seminars as an expert authority on startup mobile app trends, development, and online marketing and has spoken at numerous industry events including The Great British Business Show, Venturefest, the National Achievers Congress and numerous industry exhibitions around the UK.

AppInstitute regularly provides leading publications with app analytics, business data, case studies, white papers and statistics for established publishers across the world. They were named in the top 50 creative companies in England by Creative England.