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
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!
React Native
Facebook announced React Native three years ago, and it has been gaining traction since then. Although version 1 hasn’t been released yet, many companies and developers are already using it in production. In React Native, Javascript is the main supported language and React is the framework. Unlike in React.js, there are no HTML components, except some pre-built components that will be compiled to Native by the React Native toolchain. One of the main features of RN that appeals to huge communities is the Hot Reload feature – instead of compiling your project every time you make changes and starting from the first page again, Hot Reload allows you to press Save and reload the app right where you left off!
Xamarin
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:
Xamarin.Android
txtTitle.setText("Hello World!");
Xamarin.iOS
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
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.
Ionic
While the other cross-platform technologies use their own DSL, Ionic uses HTML, CSS, and JS to build a mobile app. When using Ionic, a web app is created in the end. This web app will be run on top of web view which is hosted inside a Native app. From the first Ionic version until Ionic 3, Ionic used Angular as the building framework but beginning with Ionic 4 you can use any framework or no framework at all. Just like any web app, the main supported language for the logic part is Javascript.
Comparison
Reusability
????? Ionic
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.
????? Xamarin
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
By using React Native, you can use single codebase in Javascript and deploy them to Android and iOS. Even though there’s no official support to reuse React Native codebase for your web app, the underlying framework (ReactJS) made it easy to transfer the knowledge from mobile development to web development and vice versa.
????? Flutter
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.
????? Native
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.
Performance
????? Native
On every platform and every OS, an app that was built in Native will always win in a performance battle.
????? Flutter
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
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.
????? Ionic
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
Native development is older than all the other cross-platform frameworks. Therefore there are plenty of third-party libraries to help with development.
????? Ionic
Ionic works just like a regular web app, so you can use any javascript library out there. Though you need to be careful about performance, because not every js library is developed with mobile web performance as a priority.
????? React Native, Xamarin
Even though React Native was written in Javascript, you can’t use a regular JS library – especially libraries that rely on browser features. Make sure to always check that a library is compatible with React Native. The same is true for Xamarin – C# and .NET libraries are plentiful but not all of them are compatible with Xamarin.
????? Flutter
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.
Note :
- 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.
App Size
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.
????? Native
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.
????? Flutter
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
????? Ionic
A default Ionic app has 8.5 MB in size.
????? Xamarin
Without any code inside a default Xamarin app, it has a size of 10 MB
Note :
- 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.
Conclusion
When choosing a technology for building mobile apps consider requirements, resources and your developer’s expertise. If after analyzing the requirements you think that React Native is good enough and your developers also have strong JavaScript knowledge, then go with React Native. If almost all the developers have a vast experience of C# and .NET and your company wants to create a mobile app exclusively for a client, then go with Xamarin. If you already have a team of iOS and Android developers that can develop the project simultaneously, then go with Native. If you just need to convert an existing web app that was built in Angular into a mobile app, then go with Ionic.
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.
