Blog

Native App vs Hybrid App Development

Choosing between mobile and hybrid development depends on your requirements and needs. In order to help you make an informed decision, we will explain what’s the difference between these two.

Hybrid app

When you are developing a hybrid application, you are using HTML, CSS, and JavaScript and there is only one codebase for all platforms.

The hybrid application runs inside a WebView. It uses Cordova/PhoneGap so that the users can install the app on their devices.

Only one code is written that is being compiled to all platforms for the hybrid application. The app can run on iOS, Android, Windows, and Web. When it comes to mobile devices if you need some native functionality, like communication with other apps (Facebook, Twitter, Calendar) you can use a plugin, which will allow you to get that functionality.

You can use frameworks like Ionic, which is written in Angular, or OnsenUI, which is written in VueJS to develop the app.

For example, even Microsoft decided to use Ionic — their application Microsoft Flow is built with it. Other famous apps built with Ionic are SworkitUntappdPacifica, etc.

react native

React Native

There is also another approach to app development — React Native. This approach allows you to also write for multiple platforms while achieving native performance.

React Native is a popular framework used by FacebookAirbnbInstagramWalmart. Its advantage is performance, which is significantly better when compared to the other hybrid frameworks.

React Native is working with two threads:

  1. Main Thread — this thread is handling display of components and user gestures
  2. JavaScript thread — this thread is executing JavaScript in separate JavaScript engine

But these two threads never communicate directly with each other, they are communicating through a bridge, which is a core of a React Native.

Native app

When you are developing a native application, you use Java or Kotlin for Android and Swift or Objective-C for iOS. So essentially, you are developing separate applications for separate operating systems. Because of that, native apps need to be written two times or more because each platform uses a different programming language and design controls.

Performance

When it comes to performance, native apps score a win, because they have better rendering and animations. Hybrid apps are running inside WebView, and when you are rendering complex stuff, it can become slow. Due to touch events that can have a delay of 300ms, hybrid apps can result in having a bad user experience. With React Native, performance is a lot better because you are writing code that can be executed on multiple platforms. Performance is improved since React Native is using native components and there is no WebView. React Native doesn’t have problems that other hybrid frameworks can have.

Despite the above-mentioned issues, hybrid apps today can have a decent performance. This is not only because our phones today have a much better hardware, but also because the technology itself has changed.

For example, on iOS, there is WKWebView now which is a lot better than UIWebView since using the application became much smoother.

Now, let’s see how the Ionic works. In the past, when there was only Ionic 1, there were a lot of problems. When Ionic 2 came out, it was on Angular 2 which made it better instantly. There was a new change detection and Angular 2 was faster — all of that affected Ionic as well.

Ionic apps now run on WKWebView by default. This is a major thing for a hybrid applications because they will have a better rendering and scroll.

Since Ionic 2 came on the scene, there was no more JavaScript scrolling. Ionic scrolls on 60FPS both on Android and iOS. And there is also a virtual scroll which enables you to scroll through the large list of data without it having a big impact on performance.

In addition to this, Ionic Team promises that they will have even better performance in the future with StencilJS. Ionic 4 will be built with StencilJS and it will use Web Components. This means that you will not depend on one framework and that Ionic will be able to support any framework.

Time and Costs

It’s much faster to build a hybrid app than a native one. That’s perfectly fine because when you are building a native app, you need to build that application several times, depending on how many platforms you want to support. With the hybrid app, you build that app only once and then you can run it on Android, iOS and Windows.

Native applications cost more because you have several teams which work using different technologies. Due to native controls, you will need a different design for each platform as well. This might become a problem since there will be several teams. Keeping these teams synchronized can become an issue, especially if the teams are not small ones.

In addition to this, it’s easier to code in web technologies since there are more developers doing web developing and the community is bigger. When you are having such a big community, the price on a market is lower.

Because of that, costs of developing a native app is greater since it will take more time to write the necessary code.

Progressive Web Apps

This approach is not available with the native apps. You can build a web or mobile site, and then make that site to work as PWA. When users visit your site using a mobile device, you can ask them to install the application on their device, and they can do that with one click.

Device access

With the native application, you can have better accessibility when compared to the hybrid application. But, Cordova (that is used by the most of the frameworks in the hybrid approach) has a lot of plugins which will give you that option to communicate with the device through Cordova.

Maintenance

It’s easier to maintain a hybrid application because you have only one codebase, instead of multiple codebases which you have with the native app — one for Android and one for iOS. When you have one codebase, you can change code once, and it will be implemented on all platforms.

Conclusion

There is always a right tool for work — but it highly depends on what you want to do with your app.

Popular applications that are written using the hybrid framework like Ionic are Sworkit, Untappd, Pacifica, and there is also Microsoft Flow.

Using the React Native approach, there are applications like Facebook, Messenger, Instagram, Airbnb, Walmart, Tesla, Skype, etc. Bear in mind that these applications are a lot bigger than the ones that are written with Ionic.

To sum up:

  • If you are not sure whether people will like your application, you can build the MVP with the hybrid app because it’s faster. Later on, you can decide whether you should go with the native app.
  • If you want excellent performance, animations, rendering time then a native application is for you. Keep in mind that you can probably achieve the same with React Native
  • If the app is simple, does not have large animations, does not require lots of native user interactions then a hybrid is the right choice.
  • If you want a good application that scales on more platforms, you should choose a hybrid app.