Today, there are many OS options to use when building a modern mobile app.
In this post, we’ll examine some popular technologies used to build modern mobile apps. Before we get started, let’s look into each of the technologies that we’re going to compare:
Native technologies are created and officially supported by the creator of the Mobile OS. In Android, to code in Native you need to use Java or Kotlin, and for iOS, Apple requires you to code in Swift or Objective-C. A well-written Native app is guaranteed to run on the highest performance device, and run smoothly on the newest OS and will still also be backward compatible!
Xamarin is a cross-platform technology which was purchased by Microsoft in 2016, based on the Mono framework. The Mono framework itself is based on the .NET framework, so to use Xamarin, C# is used as the primary coding language (and also more recently F#). Xamarin itself is not cross-platform by default: it uses Xamarin.Android and Xamarin.iOS, which have different code styles in both the UI and the logic. In Android, the UI is still coded in XML and in iOS it is coded in storyboards. For the logic part, even though you’ll use C# for both, the style is different. For example:
txtTitle.text = "Hello World!";
But in 2014, Xamarin introduced Xamarin.Forms, which is a cross-platform solution to build Xamarin apps for both Android & iOS with a single codebase. You’ll use XAML to build the UI and a single C# style for logic.
Flutter is a cross-platform development framework created by Google. In addition to iOS and Android, Flutter will be used as the primary method for developing an application on Fuchsia, a new OS that’s being developed by Google. Flutter uses Dart as its development language and the Flutter app runs on top of SKIA, a graphics engine that’s also developed by Google. UI components in Flutter are called Widgets and because Flutter runs on a graphics engine, the widgets are custom made but also conform to OS-specific design language: Material Widgets which implement Google Material Design and Cupertino Widgets which imitate iOS design language.
In Ionic, you can just copy/paste codes from existing web apps (especially if you’re using AngularJS) and then you have a mobile app which runs on top of Ionic. By developing a mobile app using Ionic you only need a single codebase for three platforms: Android, iOS, and Web.
Even though you can’t use your Xamarin.Forms codebase in C# to build a web app but it allows you to publish your app not only to Android and iOS but also on Windows desktop (UWP).
????? React Native
Flutter allows you to build both your Android and iOS apps using a single codebase written in Dart. For now, this benefit is only for building mobile apps, but it may change in the future when Google releases Fuchsia. Coding in Dart may not have the same benefits as React Native with ReactJS, but you can use the same language for the AngularDart web framework.
Coding in Native almost has no reusability, because you need to code in Java or Kotlin for Android and Swift or Objective-C for iOS. Kotlin and Swift do have some similarities but they’re still different languages, however, switching between them is much easier than using Java and Swift or Kotlin and Obj-C.
On every platform and every OS, an app that was built in Native will always win in a performance battle.
Flutter has slightly better performance than the other cross-platform technologies because it runs on the graphics engine, which allows it to have similar performance to a game run on your device. Flutter also has the shortest cold start time (the first time the app is opened).
????? React Native
Every component in React Native will be compiled to the Native counterpart that helps very much in performance. React Native runs on JSCore in iOS and V8 Engine in Android – they both demonstrate excellent performance. However, The relatively long cold start time is an issue that still needs to be addressed.
Xamarin apps run on top of the Mono platform to translate the components to the Native counterpart. Like React Native, Xamarin has a problem with cold start time, because it needs to start the platform at the beginning. Be careful when you add more features, as these may worsen the performance of your Xamarin app because it doesn’t run on the official platform/engine. By default, Xamarin itself is as fast as React Native.
Opening an Ionic app is like opening a webpage because it runs on a webview. This is both good news and bad news because writing a web app can sacrifice performance in order to look good. However, if you write the app with performance as the priority, then Ionic will perform well for you.
Third Party Library
Native development is older than all the other cross-platform frameworks. Therefore there are plenty of third-party libraries to help with development.
????? React Native, Xamarin
Flutter is still young and written in Dart. Therefore there are only a few libraries out there for Flutter compared to other cross-platform frameworks. This may change in the future because Flutter is gaining popularity and Google is currently pushing it as an alternative for mobile app development.
- For React Native, Xamarin and Flutter, some the most searched libraries are those that wrap any Native functionalities so it can be used inside those frameworks.
Comparing App Size is important, especially if your target users live in countries that don’t have good internet speed or where internet data usage is expensive.
A Native app has the smallest size because it doesn’t have to embed anything to compile or translate bundled code into Native. All components and functionalities are already embedded into the OS, a Native app just needs to call it without requiring any third-party libraries.
Recently, the Flutter team has succeeded in reducing a default app size from 7 MB to 4.7 MB.
????? React Native
React Native app without any code inside it has a size of 7 MB
A default Ionic app has 8.5 MB in size.
Without any code inside a default Xamarin app, it has a size of 10 MB
- The cross-platform library always embeds the engine to run bundled code which is why the size is always bigger than a regular native app.
- Always be careful when adding libraries inside your app as they will increase the size of your app.
When developing a software solution, the two most important elements are the architecture and design, and if you’re not careful enough in the beginning when choosing your technology, the app may require many Native functionalities, or encounter a performance roadblock that can only be solved in Native, and in the end you may need three codebases: Native iOS, Native Android & cross-platform codebase.