Cross-platform mobile development has long been a viable alternative to fully native engineering. Following the classic native approach, you produce two different applications: one written in Java for Android and the other in Swift or Objective-C for iOS. This path is pretty time-consuming and expensive because the same code must be written twice. On the other hand, it ensures the highest code consistency with the original app look and feel.
Cross-platform development, in contrast, allows engineers to write the code once and apply some parts of it across all platforms. Usually, this happens at the cost of performance and application behavior. Cross-platform engineering communities strive to mitigate these disadvantages by continuously introducing new approaches and tools.
Today we’ll look at using Xamarin, React Native, and Ionic cross-platform frameworks to build mobile applications. And we’ll consider the following comparison characteristics:
- The language stack
- Running code and performance
- Graphical user interface
- Community recognition
- Pricing
Benefits of cross-platform mobile development
Before we look closer at the differences between React, Xamarin, and Ionic frameworks, let’s briefly discuss the core value of cross-platform development.
According to the Markets And Markets research, the popularity of the cross-platform app market is rapidly growing and is estimated to increase from $25.19 Billion in 2015 to $80.45 Billion in 2020.
Cross-platform development is an approach that allows a single codebase to be developed for multiple platforms or software environments.
So, the main advantages of cross-platform development are:
- Cost-effectiveness. It enables investing just once and in a single team.
- One technology stack. Developers can use a single technology stack for a broad variety of engineering tasks.
- Reusable code. Up to 90 percent of codebase can be reused from one platform to the other, instead of designing the same functionality in another language.
- Easy maintainability. It’s easier to maintain and deploy changes because there is no need to maintain applications on each platform separately.
If you have already decided to develop a cross-platform app, the next challenge is to decide which tool to choose. Each framework has its pros and cons. We’ll consider the basic selection criteria for Xamarin, React Native, and Ionic frameworks to help you make the right decision.
- Xamarin is a Microsoft-supported framework for cross-platform mobile app development that uses C# and native libraries wrapped in the .NET layer. You can find more detailed information about Xamarin in our article The Good and The Bad of Xamarin Mobile Development.
- React Native is the framework that allows for building close-to-native mobile apps (not “HTML5 apps” or “hybrid apps”) using JavaScript and React.JS. Read more about React Native development in The Good and the Bad of ReactJS and React Native.
- Ionic — is the framework that aims at developing hybrid apps using HTML5 and AngularJS.
The language stack
Xamarin: C# in the core of .NET environment
Xamarin uses C#, a statically typed language and the .NET framework for all mobile platforms. Anything that can be achieved with Objective-C, Swift, or Java, a developer can do in C# using Xamarin.
Developers can’t use native open-source libraries available for iOS and Android with Xamarin, but there is a variety of .NET libraries available. A lot of existing open source and in-house source code projects can be reused in Xamarin.iOS or Xamarin.Android projects thanks to the C# and .NET framework combination.
React Native: engineer with JavaScript and React.JS
React Native uses JavaScript, currently, one of the most popular high-level, dynamic programming languages. The number of developers using JavaScript in their work is 66.7 percent according to the latest Stack Overflow survey. This means that finding a developer for your application will be easy enough.
React Native combines the benefits of JavaScript and React.JS, a web framework, and is backed by Facebook. The strong side of React Native is that it allows for writing modules in Objective-C, Swift, or Java languages when developers need them. Using native modules and libraries in React Native apps, you can handle computationally heavy operations like image editing or video processing.
Ionic: developing with a superset of JavaScript — TypeScript
The Ionic framework uses web technologies like HTML5, CSS, and JavaScript to write and run applications, and requires Cordova wrapper to access native platform controllers. The Ionic core is written with Sass and is based on a popular JavaScript framework — AngularJS.
The Ionic main programming language is TypeScript, which is generally a superset of JavaScript that compiles to plain JavaScript. TypeScript increases the quality of the code because it helps to spot and eliminate mistakes during code typing. Using TypeScript is optional, and the application can be written in simple JavaScript.
Running code and performance
Xamarin.Forms and Xamarin.Android/iOS — two approaches to building apps
Generally, Xamarin performance is considered being close to native. But Xamarin suggests two approaches to build mobile apps:
- Xamarin.Android and Xamarin.iOS
- Xamarin.Forms
Xamarin.Android and Xamarin.iOS. Xamarin.Android/iOS apps behave like native because their cross-platform capabilities are focused mainly on sharing business logic rather than codebase. They use native user interface controls and leverage platform-specific hardware acceleration. It helps achieve the close-to-native performance that can’t be done with solutions that interpret code at runtime. Xamarin compiles C# into machine code, but more on that below.
Xamarin.Forms. Contrary to Xamarin.Android/iOS, Xamarin.Forms is focused on broad code sharing with less platform-specific behavior. Ninety-six percent of source code could be reused with Xamarin.Forms. According to the measurements in our Xamarin performance research, this significantly reduces code performance in many operations compared to both Xamarin.Native and pure native development.
As for code compilation, C# is compiled into native low-level languages in different ways on each platform.
AOT for iOS. Ahead-of-time compilation (AOT) is used for iOS. AOT means that source code compilation into native code happens before the application launch.
JIT for Android. Just-in-time (JIT) compilation is commonly used for Android. JIT means that the code is compiled in native at runtime.
JIT compilation isn’t applied for iOS at all. But both AOT and JIT can be used on Android.
React Native: rendering to the native APIs
React Native performance is close to native because it renders code components directly to the native APIs. React also allows for using native iOS and Android modules written in Objective-C and Java. They can’t be reused across two platforms and their main purpose is higher performance in complicated operations like image editing or video playback. The rest of the codebase can be shared across platforms. Generally, React Native applications can share from 80–90 percent of JS code. Using native libraries also optimizes app performance.
React Native uses JIT compilation for Android but it doesn’t provide AOT for iOS. In case of iOS, it doesn’t compile but interprets the JavaScript code.
Quick note. The difference between compilation and interpretation is that compilation transforms source code into the lower-level language while interpretation directly executes an instruction in a programming language translating it on the go. Interpretation takes more time on overall execution but less time to analyze the source code. Contrasted to that, a compiler needs more time to analyze the source code but overall execution time is shorter.
Ionic: using web technologies for rendering
Ionic performance isn’t as close to native as Xamarin or React Native because it uses web technologies to render an application. This approach greatly reduces the speed. Also, Ionic doesn’t use native components, and tries to recreate native behavior using web technologies. To connect the app with native APIs, Ionic uses native wrapper Cordova and adapts app behavior to the underlying platform.
The strong side of Ionic its very fast testing process. It can be run instantly in a browser. The framework also comes with a lot of pre-made and pre-styled components that streamline the development cycle.
To run the code, Ionic uses JIT compilation for Android and WKWebView, a platform browser, as the default for iOS. As we mentioned, it’s generally impossible to run JIT compilation on iOS, but there’s one exception. WKWebView on iOS supports JIT. As a result, WKWebView object is used to embed web content in the app. The WKWebView provides JIT conversion of JS code down to machine code, improving rendering performance.
However, Ionic can’t achieve performance results comparable to React Native and Xamarin on complex and rich applications.
Graphical User Interface
Xamarin: native look with Xamarin.Android/iOS and automated UI mapping in Xamarin.Forms
Xamarin allows you to create the user interface in two ways: using Xamarin.Android/iOS or Xamarin.Forms.
Xamarin.Android/iOS. The first approach entails working the native platform-specific UI: Engineers can create a user interface with native UI controls and layouts. This approach consumes much time, but such division ensures native look and feel to a mobile app.
Xamarin.Forms. The second way is to use Xamarin.Forms that automatically maps each page and its controls to platform-specific interface elements at runtime. With Xamarin.Forms you can make the development process much faster and save a lot of resources at the cost of native look and feel. However, Xamarin.Forms can be a good solution for corporate and internal projects, where the UI part isn’t as critical as in public applications.
React Native: interaction with native iOS/Android controllers and the use of ReactJS libraries
React Native modules interact with native iOS and Android UI controllers, which enables user experience close to native apps. It also uses the ReactJS library with extensive UI components, which can streamline the UI development. As a result, React Native has many UI components out-of-the-box like buttons, modules, and sliders that make developer work faster.
Ionic: use Cordova to recreate native behavior
Ionic UI doesn’t use native components at all and renders everything in HTML and CSS. Then it applies Cordova to recreate native mobile behavior. AngularJS components that come with the framework also help Ionic look like the native.
Currently, Ionic comes with new native-styled UI elements and layouts that didn’t exist on the web, before and were available only with native SDKs on iOS and Android.
Community recognition
The Github statistics show that the most starred framework among these three is React Native with 59.8 thousand stars, Ionic is in second place with 33.3 thousand, and Xamarin takes places lat with only 3.6 thousand. Such a low Xamarin result can be explained by the fact that it has only recently become an open source product and still requires proprietary Visual Studio IDE to be used.
Xamarin
According to the latest Stack Overflow technology overview of the most popular frameworks, React is also the most used among cross-platform instruments and takes 19.5 percent of responses. Xamarin is used by 8.3 percent of engineers. Although Ionic didn’t make this list, it uses Cordova in its core.
Source: Stack Overflow
It’s worth mentioning that Microsoft invests a lot of effort into educating and growing the Xamarin community. Developers who work within the Microsoft ecosystem can easily start working with the technology due to its active support. And there’s also Xamarin University for newcomers. It’s an e-learning portal which includes classes from beginner to advanced levels.
Slack, Pinterest, and Siemens use Xamarin. Check more Xamarin use cases in our dedicated article.
React Native
The React Native developer community is rapidly growing and already has many experienced engineers. This makes it easier to jumpstart a React project: 1) a developer can easily get answers to ordinary questions, 2) the large community has already created a number of third-party libraries.
The React Native statistics on the Git Hub repository are impressive and it’s the 13th most starred repository on GitHub.
According to the StackOverflow technology overview, React Native framework isn’t only the most used cross-platform tool but also the most loved one among developers in general.
Source: Stack Overflow
On the diagram above we can see that React is highly recognized by 66.9 percent of respondents while the number of Xamarin lovers is only 48.7 percent of all surveyed engineers. And again, Ionic didn’t make it to the list of the most loved frameworks but it uses Cordova, which is highly recognized by 38.8 percent of engineers.
Facebook, Instagram, and Airbnb use React Native.
Ionic
The success of every platform depends on its community. The Ionic community grows continuously and according to the 2017 Ionic Developer Survey, about 80 percent of engineers consider themselves experienced. There is a special Q&A Ionic Forum, where developers can ask questions and receive answers or advice. Ionic offers its Slack channel with a Slack community where developers can collaborate with other Ionic engineers around the world. Ionic has more questions on StackOverflow than React Native but fewer than Xamarin.
The Ionic ecosystem is also growing and gains new partners among professional IT service companies such as Webjunto, Spatial Vision, and keensoft.
CAT, Diesel, and Target use Ionic.
Pricing
Xamarin
Xamarin has become an open source product under the MIT license. Although it’s free to work with, you still must install Visual Studio IDE, which is proprietary and distributed on a subscription basis. It’s available free for non-enterprise projects with up to 5 users. But certain features are locked behind Professional and Enterprise licenses. The annual subscription price per user is $2,999 for the Enterprise license and $539 for the Professional one.
React Native
React Native is a completely open source project. You can use it and its libraries for free.
Ionic
Ionic is also an open source framework at signup and during development. But there’s a companion platform called Ionic Pro which comes in three packages: Developer, Team, and Business. Subscription cost varies from $29 to $199 per month and offers additional features like more days of error history tracking and collaboration tools that allow managing Ionic work on larger teams.
The final piece of advice
React Native. React Native is a universal framework thanks to its open source distribution and JavaScript language. If you just start a mobile development initiative without prior mobile experience, we recommend considering this framework first. It will be much easier to hire a React Native team of developers. While code reuse is possible with React Native (up to 90 percent of shared codebase in some apps), the idea behind the framework is to use the single technology and adjust the source code to the end platform specifics.
Xamarin. Xamarin is a good choice if you already have the .NET team, used the Microsoft products, cloud solution, or Visual Studio for the other tasks. This will also be a good option if you need high performance, reliability, and support. On the other hand, Xamarin.Forms allows you to develop enterprise applications where the UI isn’t as important as functionality but streamlined development with code sharing is critical.
Ionic. Ionic is the most budget-friendly framework among the three described. Thanks to web nature, you don’t even need a dedicated mobile team. We recommend using it to develop apps with moderate traffic in mind, enterprise solutions, or simple temporary apps for specific events or tasks.
However, it doesn’t mean that you can’t use Ionic for full-scale public apps. Ionic Pro provides a good opportunity for engineering advanced app infrastructures, and as the framework continuously develops, it’s likely to become even better in the future.
Liked the story? Clap us so more people can find it! 👏Originally published at AltexSoft’s blog: “Xamarin vs React Native vs Ionic: Cross-platform Mobile Frameworks Comparison”