Hybrid vs Native Apps. When to use what?

Nowadays everybody wants an app for their business and so many companies and freelancers are willing to build them. However if you ever tried to get an app done, you’d notice there’s a huge price difference in certain options. Also you’d have probably herd confusing terms like “native”, “hybrid”, “PWA”. Let me walk you through these concepts so you’d know what to get next time.

Let’s Dive In

There are 2 main app variants,

1. Native Apps:

Both iOS & Android has a separate app building system. Apps built primarily utilising these systems are called native apps. Don’t get confused, every app is in the end built using these tools, but native apps purely rely on these technologies to build the app. In term of programming languages for, android it java & kotlin. For iOS it’s objective-c and swift. Anything else is not pure native.

2. Hybrid Apps

These apps uses a simple concept. Since every platform (android, iOS, blackberry, windows) can display a HTML5 website properly and HTML5 has grown to be a feature rich eco system (with even access to sensors like GPS), you can build a good app like experience inside the browser as well. Hybrid app platforms takes this bit further by providing custom build web page container native app (cordova, capacitor) which can be used to package HTML5 website as a mobile app. This combined with single page applications (SPA) we can build a pretty good native like mobile apps. You just need to code once and use it to package both iOS & Android (even other platforms) as against native apps. But this flexibility comes at the cost of performance and certain limitations. Ionic & Cordova are the leading frameworks of this category.

What about Flutter, ReactNative & NativeScript

There’s an another variant. Which is between these two worlds. It’s neither native or purely hybrid. Flutter/ ReactNative/ NativeScript apps falls under this category. All these aims to provide one major thing, that’s code once and deploy everywhere (at least to all mobile platforms). Why I say it’s in between is they partially converts your code into native code rather than just embedding.

If you are familiar with tech trends you’d know how amazing javascript has been performing over last few years. ReactNative is build upon this. ReactNative does not give you 100% portable codebase. What it does is, it uses a javascript engine to run all the application logic and converts UI code in to respective native version. The native UI communicates with javascript code (logic) via WebSockets.

Flutter takes a different approach. Rather than using javascript it uses dart, which finally converts in to native code.Which is amazing and very promising. It also uses a graphic engine(skia) to render the UI. Which makes sure app looks similar on all platforms. Flutter has another added advantage, which is it can build web application from the same code base, however this is still in beta.

Flutter Architecture : https://flutter.dev/docs/resources/architectural-overview

PWA

PWA is the new kid, which isn’t really an app. PWA is a web application which you can add to your home screen. It’s again a web application built using HTML/ Javascript and CSS with a small different of service worker. This service worker caches required assets locally and serves as needed to render the page. This ability let the web page render even without connectivity, essentially similar to mobile app, but much simpler to build and truly cross platform, it even works on desktops and laptops. But this is relatively new and people are still getting used to it. Most websites already supports this feature like Starbucks, Spotify, Pinterest, Outlook, Twitter. So we can safely assume this tech is here to stay.

Now to the tricky part,

What should I use?

I’ll tell you how I decide. I ask myself few questions.

1. Is this a very early stage of the product, which is done to see market response or to act as a prototype? If Yes, Hybrid(HTML5) is the best bet since it comes with the lowest cost and fastest shipping time.
2. Is it a very mature product (/concept), with enough funding and you are more concerned about making sure it loads even 1 second faster then pick native
3. If your app contains complex and lengthly computations pick native as it’s easy to optimize and provides best performance.
4. If your app is an audio/video related solution DO NOT USE hybrid(HTML5). It poses lots of restrictions. As an example you wouldn’t be able to do a simple auto play with audio or proper video fullscreen in certain situations. Best to do a proper study of native features you would need before start using hybrid tech.
5. If your app does lot of background processing and iOS is a main target, again DO NOT USE hybrid(HTML5), but you can use ReactNative/Flutter.
6. If you plan on using BLE/ NFC better use native.

When to use Flutter, ReactNative & NativeScript?

So you are already wondering, when should I use react native or flutter. Since there’s a huge buzz about them also. Well they suites all above scenarios, specially for cases I recommended native. They come with really good performance and can utilize almost all native functionalities. But there’s a catch, well two,

Limited dev experience: I’ve seen relatively less no of experienced react native and flutter devs out there. Also these two does let dev to pick and structure how the app is build. Which is good if the dev team is really good. If not it can lead to messy, buggy code easily compared to other techs. Also lack of devs with experience itself might increase the cost in the long run. I’d recommend this for early-mid stages of a product (to minimize cost) of if you have a good in house team to take care of the product. If outsourcing make sure they know what they are doing.

Don’t misunderstand what I’m saying. Both ReactNative and Flutter is stable enough for production. Instagram & FB Ad Manager uses ReactNative, Google Ad Manager uses Flutter.

Cost

Native > Native-Hybrid -> Hybrid

If we set the backend/api cost aside, cost for hybrid version should be less than half of the native price. Native-Hybrid will come in between but much less than native price for a normal product.

This article isn’t meant for devs, or it’s not there to explain and compare these techs in depth. It’s mainly focused on providing basic idea of these platforms to non-dev users who’s looking to get apps developed.