Live event: Hybrid app development, redefined

Watch Now

What is Hybrid App Development?

Hybrid apps are a blend, hence the name hybrid, of both native and web solutions. Where the core of the application is written using web technologies. In this article we dive deep into hybrid app technology.

What is Hybrid App Development?

hg0088线上网址When beginning to choose your solution to create a new mobile application, you are often faced with a wide range of options, but are unsure of where to begin. Is building your application solely with native solutions the right choice? Should your team look at only developing with web technologies? What about some of the hybrid solutions out there? These are among the many questions that arise when deliberating which path is best for your business.

hg0088线上网址To start the process, it’s important to remember that picking the right solution for your next application (or first) depends on several factors: Your budget, the timeline, your team’s experience with the technology and, finally, your target audience.

So, with that, let’s explore the three primary genres of mobile application development and discuss some of the benefits and drawbacks of each of these solutions. By the end of the article, you should have a better grasp of the choices and be able to find the right solution to your mobile application development goals. First, let’s define what our genres are.

What is a Native Mobile App?

When people speak of a native mobile application, they are usually referring to an application that has been written using the native development language and tools specific to that platform. For example: A native iOS application would be written in either Swift or Objective-C and compiled using Xcode, while a native Android application would have been developed using Kotlin or Java and compiled using Android Studio.

Since these applications are developed using the platform’s default solutions, developers have full and easier access to the device’s capabilities; like all the device’s sensors, the user’s address book, and whatever the latest and greatest new bit of technology the phone offers. Native applications tend to also be more performant since their code is closer to the ‘metal’. In addition to being faster, you will also have access to all of the native user interface (UI) controls and layouts. While you will probably want to style them to fit your applications’ theme, you will also want them to behave and interact like any other UI element on that platform.

However, any application written for iOS using Swift cannot run on Android, and vice versa. Meaning, you have to develop specifically for each platform, which can lead to a larger budget and team size, assuming that you’d want to release your application for both iOS and Android. In addition, your application is only available through each platform’s app stores, subjecting it to their respective rules and restrictions. This means for every release, whether it is a new feature or a bug fix, the same approval process must occur. This can take anywhere from a day to two weeks for the Apple App Store.

What is a Web Application?

For some, this uncertainty about having your application approved by faceless app-store gatekeepers is too risky. There are also stories of top-tier applications running afoul of regulation and being removed from the app store, which can cause a loss of revenue. Because of this, some developers have turned to building a web-only application, which gives them the freedom to exist outside the app-stores and offer their application to other mobile and desktop users. These are just traditional web applications written in HTML, CSS, and JavaScript for which you can leverage a wide range of frameworks and libraries, such as Angular, React, Vue, or even plain-vanilla JavaScript.

However, when taking this approach to development, your mobile application is restricted to the capabilities of the user’s mobile browser (and its quirks). This means it will not have full access to the user device for things like their address book and more. While this has improved over the years with access to features like GPS and the camera, depending on the features needed for your application this could also become an issue.

hg0088线上网址One of the larger challenges for developing applications using web technologies is that many of the common application UI controls, e.g. tab navigator, do not natively exist and have to be recreated, which might lead to your application not working quite right. That said, many of the UI libraries have taken great care in replicating most of the common UI components necessary for your app, so this risk is reduced.

In 2017, Google introduced the concept of Progressive Web Applicationshg0088线上网址 (PWAs), which allow these types of applications to adopt more app-like features such as standard app icons, push notifications, offline capabilities, and more. Microsoft also adopted this solution recently, making these types of applications first-class citizens in their app store.

For some development teams, this solution is appealing given that they can easily create an application from a single codebase, which can then be used on a variety of platforms and quickly updated with a new feature or bug fix by simply deploying to your server.

What is a Hybrid Mobile App?

hg0088线上网址This solution is a blend, hence the name hybrid, of both native and web solutions. Where the core of the application is written using web technologies (HTML, CSS, and JavaScript), which are then encapsulated within a native application. Through the use of plugins, these applications can have full access to the mobile device’s features. To better understand this approach, let’s break down how it all fits together.

hg0088线上网址The heart of a hybrid-mobile application is still just an application that is written with HTML, CSS, and JavaScript. However, instead of the app being shown within the user’s browser, it is run from within a native application and its own embedded browser, which is essentially invisible to the user. For example, an iOS application would use the WKWebView to display our application, while on Android it would use the WebView element to do the same function.

This code is then embedded into a native application wrapper using a solution like Apache Cordova (also known as PhoneGap) or Ionic’s Capacitorhg0088线上网址. These solutions create a native shell application that is just the platform’s webview component in which it will load your web application. This gives you the ability to create and publish true native applications that can be submitted to each of the platform’s app stores for sale.

Additionally, both Cordova and Capacitor have a plugin system that allows you to extend beyond the limitations of the ‘browser’ and access the full suite of capabilities of a user’s mobile device. So, if you wanted to use TouchID on an iOS device as a login option, or wanted to connect to a Bluetooth device, this can be easily done by installing a plugin. These plugins are created by a wide range of developers and many are actively supported. Ionic even offers a complete ecosystem of supported plugins as part of its Enterprisehg0088线上网址 solution. So, the limitations of a web-only application are easily overcome, allowing your application to have parity with native applications in their features.

hg0088线上网址However, there are some drawbacks with this option. Similarly to the web-only application solution, the UI library has to be recreated. Here is where solutions like Ionic, NativeScript, Xamarin, React Native, and others step in. These options all provide robust UI components that look and feel like their native counterparts, giving you a full suite of building blocks for your application.

hg0088线上网址The only other consideration to take into account is if your application is still running within the device’s native browser. If so, you may encounter performance issues or other quirks specific to each platform or operating version.

Key Features: Native, Web, & Hybrid

Feature Native Web-only Hybrid
Device Access Full Limited Full (with plugins)
Performance High Medium to High Medium to High
Development Language Platform Specific HTML, CSS, Javascript HTML, CSS, Javascript
Cross-Platform Support No Yes Yes
User Experience High Medium to High Medium to High
Code Reuse No Yes Yes

Final Thoughts

So, what is the right choice for your application? Unless you are creating a highly performant game or other similar application, hybrid application development might be the right choice because it offers an easier development approach, cost savings, and compatibility across a variety of platforms. While they do require a bit more understanding to mesh the solution together, as well as the use of a UI library to assist in the proper presentation of your user interface, those challenges are known and can be easily solved with the right framework, like Ionic.

To learn more about the essential elements of hybrid app development, check out Ionic’s Hybrid vs. Native ebook.

You’re in good company. Ionic powers millions of apps at some of the smartest companies in the world.

See all Customers