- Traditional Native Apps
- Hybrid Apps
- React Native Apps
These will all produce a mobile app in the end – one that users will be able to download from the App Store (or Google Play in the case of Android). But there are some important differences. Let’s look at each one in a bit more details.
Traditional Native Apps
Not really “traditional” but let’s call them that for now to differentiate from all the other newer alternatives. What we mean here are good old native apps build for a specific mobile platform such as iOS or Android using the programming language and other tooling provided by the vendor. For the iOS platform this means Swift (or more rarely nowadays Objective C). And for Android it’s Java or Kotlin.Developing a mobile app this way has some clear advantages. While using the app you can feel it for sure – the application is running fast and smoothly, everything feels intuitive. This is possible because in the first place, you can create the best UI & UX that really looks and feels native. Secondly, in case you’re building an app where performance might be a challenge, you’re usually in a much better position to address and fix those issues with a native app. Of course, this doesn’t apply to a lot of apps nowadays, but it’s something to keep in mind. Another thing is frictionless use of all the smartphone’s APIs – it’s just something that’s never an issue with a native app.
There are also some disadvantages you will be facing with this approach. Actually, it’s generally one disadvantage, but it’s a big one – building a native app means you’re essentially developing the same app twice. You build one app for iOS and a separate one for Android. This means you need to find, manage and – of course – pay for two app development teams instead of one. And the extra cost and overhead doesn’t end with the release, because you will have to support both apps.
Speaking of support, native apps are usually updated through the App Store. And what’s the meaning of this you may ask? Well, in the most common case there will be some lead time and approval process, before updates can be deployed to end users. With native apps you should definitely consider the issues your app might have with delayed updates and bug fixing. Moreover, not all users actually update their apps if you think about it. So this might also interfere with releasing bug fixes.
Hybrid Apps
These came along in an effort to solve the problem of building the same app twice. They are based on web technologies such as HTML and JavaScript along with some framework. Some notable examples (among many others) are Ionic and Cordova, but we are not going to focus on them today.In terms of pros and cons the situation is pretty much the opposite of the previous one. You get what is essentially a web app embedded in a mobile app. The advantages are immediately clear – one code base, one app team, reduced development and maintenance costs. On top of that you can update some parts of the app without going through the whole app store approval process every time.
That’s cool but what’s the disadvantage? Well, it’s not really a native app and you can tell. It’s basically a web app inside a mobile app frame and it looks exactly like that – no native components or animations. And while there are ways to use the phone’s native APIs this is not always easy or effortless.
You might experience performance issues as well. Hybrid apps load in a browser-like component called webview. The webview is responsible for displaying the UI and for running the code. Then your hybrid app will get as good as the webview. Through the years, webview has tremendously improved, but still hasn’t reached native performance yet.
React Native
So, what’s the solution then? You guessed it – React Native! It turns out you can have your pie and eat it too. You can build a true native app with a shared code base using JavaScript. Too good to be true? Not really. Read on.First, to make one thing clear that’s confusing a lot of people. Although React Native apps are written in JavaScript, the UI is displayed as native components so all components, animations and transitions between screens are truly native. The business logic is still written in JavaScript which means it can easily be reused for a web application for example. That’s one key difference from the previous category. Hence the name – React Native.
Second, let’s be completely honest here – React Native is not the only technology out there that fits this category. There are others cross-platform native mobile app frameworks – e.g. Flutter or Xamarin to give you just two examples. But it is one of the most popular ones and frankly our personal favorite.
So now on to the advantages of using React Native over the previous two approaches:
- You save money and time! Like with the Hybrid apps with React Native you get one code base instead of two. You get all the immediate benefits of that – one team, less effort, reduced overhead and less costs. Like mentioned previously this also extends into the maintenance. Support of one code base instead of two will save you also in the long run. Now, to be completely honest here – don’t expect to cut your development budget in half. You’re still building two apps for two platforms just sharing one code base. Some things will still be platform-specific and will have to be developed separately. Everything has to be tested for both platforms. There will be weird bugs that appear only on old Android phones. It’s no silver bullet but you can expect savings of about 30-35% depending on your use case without any UI/UX compromises compared to native apps. This is still pretty remarkable.
- You do get an actual native app in the end! Two native apps really – one for each platform. Unlike the Hybrid ones these native apps look and feel like true native apps. And even if part of your app is really complicated and can’t be developed with React Native, you can build only this part as Native. Using React Native where possible will still save you time.
- You will rock it, if you have a web version of the app! You should be able to share all business logic between the mobile and web version (if you do have a web version of the app or decide to have one in the future). The UI components might be different but you'll still save some additional time and effort.
- You’re flexible and fast with further app updates! The icing on the cake: CodePush. CodePush is a technology provided by Microsoft’s App Center and available for React Native and other platforms that helps to instantly deliver app updates and improvements to the end users. This applies only to the JavaScript part of the app, but it’s still a huge advantage. Every time the user opens the app the CodePush server is checked for new updates. So, your React Native app won’t have to wait for App Store or Google Play reviews and approvals to have its urgent bugs fixed or to receive the available updates. Appealing, huh? In addition, with CodePush you can distribute updates partially to your audience (e.g. 20%, 30% or 50%) and get their feedback before delivering to everyone else.
- You’re in good company! The idea of creating applications with React Native, thus using only one paradigm for all platforms, has appealed to many famous companies. According to https://reactnative.dev/showcase these are: Facebook, Instagram, Skype, Tesla, Bloomberg, Pinterest, Uber Eats, Salesforce among many others.
Okay, so with all the advantages you must be thinking “What’s the catch?” There’s no catch really but there are few things to consider when planning your project. With React Native you can get pretty close to what you can do with a native app in terms of performance but there are cases where this might not cut it. Although, it’s not likely it’s important to consider this in the beginning of the project.
Another thing is the use of native APIs. React Native has plugins that act as native wrappers for most of these native APIs so in 90% of the cases you’re good. However, there are cases when something might be missing or not working quite as intended. It's not something that you’d run into often and you can always write your own native extension but again – something to keep in mind and plan in the beginning rather than fire-fight in the end.
Bonus Point: Progressive Web Apps
PWAs or Progressive Web Apps are a new addition to the toolbox of mobile app development. They’re essentially web applications that users can save on their smartphone’s home screen. While technically behaving like a mobile app it’s in reality just a saved web app. This is also what makes them different to all other kinds of mobile apps described here – you can’t add them to the App Store yet. Whether that’s a big issue or not depends really on your business case. And these apps do have some advantages of their own so stay tuned for our next articles!There are usually multiple directions for your app and compromises you have to make. Though we should keep in mind that technologies evolve with rapid pace, we believe that
React Native provides the best of both worlds nowadays. One thing is clear – the best technical approach to your app development is the one that fits best to your needs and resources. We will be happy to provide IT consulting and support for your next mobile app. Get in touch! We’d love to hear from you!