React Native vs Xamarin vs Ionic

Many businesses seek to develop an app which works both on iOS and Android. This is one of the reasons they choose cross-platform solutions. Multiplatform development can help build the app with a smaller team and release it faster. However, there are many cross-platform frameworks available now that show no significant differences from the architectural perspective. What is better: React Native, Xamarin or Ionic? Read on to find out.

React Native, Xamarin and Ionic have long been butting heads in a bid to become the go-to framework for cross-platform mobile development. We have done a little research to find out which is on top now.

React Native vs Xamarin vs Ionic: Market and Community

React Native

React Native developer community has been growing much faster than Facebook had expected. To date, over 1.6K contributors have committed code to this framework’s codebase. In February 2016, over 50 percent of the commits were contributed by external users.

‘With so many people from the community contributing to React Native, we've seen as many as 266 new pull requests per month (up to 10 pull requests per day). Many of these are high-quality and implement widely used features.’
Martin Konichek, Ex-Software Engineer at Facebook, React Native team

Increasing interest in React Native can be also observed on Google Trends. The number of queries on Google Search about React Native has doubled over the last year.

React Native utilizes JavaScript, currently, one of the most dynamic programming languages. The number of developers working with JavaScript is over 66 percent according to the Stack Overflow survey 2017 results. Thus, it’s relatively easy to hire a professional developer for your app.

Airbnb, Walmart, Skype, and Tesla are among the top users of React Native. Furthermore, the Facebook’s Showcase lists over 100 apps developed with this framework. We have also described some case studies of migrating to React Native in our blog.

React Native has new releases every two weeks, which means the developers get the latest features quickly. The project has over 61K stars, which makes it one of the most starred repos on GitHub.

Xamarin

Xamarin is one of the oldest cross-platform frameworks available. Founded in 2011, Xamarin community has grown to 1.4M developers across 120 countries. The project was acquired by Microsoft in 2016 and became part of its Visual Studio IDE. This is one of the key reasons why large companies such as Slack, Siemens, and Pinterest rely on Xamarin development services

The technology is mainly used in enterprise environments and has gained many positive reviews over the years. Xamarin is used by over 15.000 companies in fields like energy, transport, healthcare and others.

There is also a rising supply of Xamarin developers. According to the Indeed stats, there is an increasing number of them, whereas the React Native developers are not as numerous.

Ionic

The original Ionic version was released in 2013 by Drifty Co. The framework was built on AngularJS and Apache Cordova. Ionic uses web technologies like CSS and HTML5 to develop hybrid mobile apps. It requires PhoneGap/Cordova bridges to reproduce native behaviors and provide better user experience.

‘When we started, we just wanted to create a better way for web developers to use their existing skillsets to build apps for the app stores.’
Max Lynch, CEO and Co-Founder of Ionic

The technology follows the motto “Write once, run everywhere”. Therefore, the same code can be developed on a PC and is expected to run on any device. This practice allows software developers to save efforts by creating a single version of the software for all the platforms they intend to deploy on.

‘But we aren't satisfied with Ionic yet. […] With Ionic 2, we've gone back to square one and completely rethought how a mobile toolkit should work.’
Lynch

The company first announced the Ionic v2 at London Angular Connect in 2015, its stable version was introduced within two years. The framework was built on Angular which came with massive improvements over AngularJS. Although the set of Ionic 2 components is similar to its previous version’s, it offers performance improvement and better native experience.

On April 2017, Ionic announced the release of version 3. Thus, Ionic 3 is compatible with Angular 4 and supports for a more recent version of TypeScript. Ionic engineering also added lazy loading capabilities and new decorators.

By the way, lazy loading speeds up the initial load of the app, reduces memory consumption, and increases performance.

Source: twitter.com/Ionicframework/status/1022138988319129601

Ionic 4 is a radical rewrite with a focus on being independent of any particular framework. Thus, the Ionic team showed their original vision which was to build a UI Framework that could work with any technology a web developer chooses. This concept enables creating new apps with Vue or React using the Ionic web components.

‘And it’s completely framework-agnostic at the core, fulfilling our original mission to be, first and foremost, a UI library for web developers no matter what frontend tools or frameworks they decide to use.’
Adam Bradley, Co-creator and lead developer of Ioniс Framework

However, while Ionic 4 seems very promising, it’s still in beta. So, if you plan to launch a new Ionic-based project, consider using older versions.

NPMTrends statistics show that in 2016 Ionic confidently took the leading position in the number of npm package downloads. However, React Native got ahead last year.

Arguably, Ionic is one of the most popular frameworks available. The technology is well funded (has raised $12.2M in total funding) and actively maintained:

• 34.900+ GitHub stars
• 54.000+ StackOverflow questions
• 136.000+ registered forum users
• 4M Ionic apps built

According to the stats, there are 5M Ionic devs in over 200 countries worldwide. Over 75 percent of them build apps for commercial use. Besides, just over 41 percent are contract specialists writing on behalf of their clients, while 33 percent develop apps for their organization.

Diesel and McDonald’s built their apps with Ionic. Besides, Ionic was chosen to develop Microsoft Flow and The National Museum of African American History and Culture mobile apps.

let’s talk about your app

Hi, I am Alex. Do you have any questions?

Don’t hesitate to contact me:

LinkedIn E-mail

estimate project

React Native vs Xamarin vs Ionic: Supported Platforms

Looking for professional mobile app developers? Hire our dedicated team!

React Native vs Xamarin vs Ionic: Performance Comparison

To begin with, the most fundamental difference between React Native/Xamarin and Ionic is the type of app being created. Ionic performs hybrid development: you create a website using CSS/HTML and then integrate it with a mobile app. Its appearance is no different from programs’ you can find on Google Play or AppStore. Thus, it can be downloaded and installed providing the similar user interaction as native. Actually, most users hardly understand the difference between native and hybrid apps.

Ionic is a reasonable solution for prototyping and rapid development, or for building a multi-functional app with minimum changes in the code base. Therefore, you can cover several platforms out of the same code base in a short amount of time. The created software is displayed identically regardless of the OS you have selected. It is possible to get access to specific mobile functionality (for example, camera, list of contacts or GPS sensors) with the help of PhoneGap or Cordova.

As for React Native and Xamarin, apps are developed to be compatible with any selected mobile platform. The native components built into the frameworks allow them to essentially “feel” native. Thus, everything a user can see in the React Native/Xamarin-based app will be displayed in a manner as close as possible to the native one depending on the specific requirements of each mobile platform. In most cases, exactly this style of development provides higher performance and responsiveness in comparison with hybrid apps.

An Ionic Survey 2017 demonstrates the hybrid approach to building mobile apps is overtaking native development. Two years ago, 20 percent of developers surveyed were building exclusively with native tools. To date, the results have decreased to 2,9 percent. Similarly, just over 32 percent of developers surveyed rely on hybrid-built apps instead of native.

What are the noticeable differences of cross-platform and native app performance?

React Native (JavaScript) vs Native (Swift)

John Calderaio, Full-Stack Software Engineer, developed two iOS apps to compare the performance of native iOS (Swift) and React Native. In the research, he shows how the basic elements of the same app are implemented using hybrid and iOS native development. He further measures and compares CPU, GPU, and memory usage of eaсh app to see which one performs better:

The mobile apps John built with React Native and Swift have almost identical physical appearance. As far as performance benchmarks are concerned, the React Native version used CPU less effectively (by over 10%), but benefited from GPU usage and occupied less memory than Swift.

Xamarin (C#) vs Native (Objective-C and Java)

Kevin E. Ford, mobile developer, decided to compare platform performance while building with Native, Cordova, Classic Xamarin, and Xamarin.Forms frameworks. He created test apps with different frameworks for both iOS and Android platforms and share the results on his blog (2014, 2015).

The size of the app has an impact on how much bandwidth it takes to deploy and affects the load time. According to Kevin, Xamarin shows the extra size involved into in the overhead of the .Net framework.

As a result, native technologies showed the fastest load times. However, apps built with Classic Xamarin loaded nearly as fast as with native languages.

‘I wanted to see how long it took the application to load into memory. While the initial load time is important, many mobile applications tend to stay in memory so it tends to have a limited impact. For this test I made sure to close all applications before each timing.’
Kevin Ford

In this test, Kevin loaded 1000 records from Azure Mobile Services to measure how fast data loaded from an external service. He was stunned to see Xamarin demonstrate the best results.

The final test measured a CPU intensive operation. It was surprising that Xamarin performed better than native languages: Objective-C lost significantly; Java was within 0.2-second margin behind.

Ionic 2 vs React Native

In order to compare Ionic 2 and React Native performance benchmarks several corporate apps for iOS and Android platforms were created. The developer tested CPU and memory usage on both platforms and provides the following results:

As a result, Ionic 2 provided significantly poorer results in all testings except for memory usage on Android.

‘Ionic 2 and React Native both are meant for the same purpose but different project requirements. If you are looking for performance, responsiveness and want a natively rendering app, there’s no doubt React Native is the one for you. On the other hand, if you are low on time, budget and looking for support of Native Browser apps and fine with compromising performance, then go with Ionic 2.’
Amit Ashwini, Director, Marketing at CognitiveClouds

React Native vs Xamarin vs Ionic: Developer Experience

Taylor Milliman, software engineer, build his first mobile app for a food blog with React Native and was pleased with it. The app allows accessing a database of over 1.000 recipes with necessary ingredients, bookmarking and sharing them with other customers.

The developer found React Native to be a powerful tool and the future of mobile development. Taylor used the Udemy course and Facebook’s tutorials to get started. He was not particularly comfortable with some components like CSS flexbox used for styling in React Native. However, after diving into some learning resources and working with the framework for a few weeks, Tyler now understands the issue and has best practices to apply to his next web project.

Besides, he noted the ability to share code between Android and iOS apps and to reload immediately. Taylor admitted that he used Android Studio before and had to deal with 30-60 second build times as usual. Hot Reloading saves development time and makes easier to get into the flow state avoiding time-wasting interruptions.

‘React Native is a perfect example of what can happen when we apply ideas that have proven successful in one area of software (web), to a seemingly separate area (mobile).’
Taylor Milliman

Xamarin

Nicu Maxian, .NET Developer, decided to share his 6 months experience in Xamarin usage having background in Android native development. He had to create an Android app with Xamarin by reusing Data and Domain layers belonging to the existed iOS app.

First of all, Nicu was quite disappointed with updating Xamarin: every update resulted in “broken” environment, so the team had to spend hours to find the solution. Secondly, they ran behind schedule because they tried to adapt to working in a new IDE. Thirdly, Nicu spent days on (sometimes unsuccessful) porting of native libraries. Finally, Xamarin community was disappointingly small compared to that of native developers.

However, Nicu pointed out the possibility to develop a cross-platform solution and have a common code for both platforms.

‘I still don’t believe in Cross Platforms and I would probably stick to native development. I would say that the price for developing Xamarin app is bigger than native application. So, it’s not worthy!’
Nicu Maxian

Ionic 2

Stepan Hilbert, Full Stack Web Developer, helped to deliver a project built with Ionic 2. The framework showed solid results and met all client’s requirements. The team noted that Ionic 2 components worked well, all connected problems were configurable. Angular seemed simpler and more powerful than previous AngularJS. TypeScript felt convenient to Java, C# and Flex developers enabling them to adhere to good coding standards.

‘So, should you consider jumping onboard Ionic 2 now? Absolutely. Think about what your most complex user interface should look like and see if Ionic has an out-of-the-box solution for you.’
Stepan Hilbert

Ionic 3

Devlin Duldulao tested Ionic 3 for building a simple mobile app. In his post, Duldulao showed the steps for getting started with Ionic 3, creating UI and debugging the product. Ionic 3 impressed with “some cool UI development tools”, like icons, material design, hot module replacement, etc. that can be used out of the box.

‘I just scratch the surface of Ionic development, but I’m already impressed with its fast mobile development. [...] It fits a use case where you need to showcase prototype to your clients or boss within a few days. And lastly, if your team is a TypeScript and Angular developers, this might be the right tool for you’
Devlin Duldulao

React Native vs Xamarin vs Ionic: Code Sharing

One of the biggest advantages of cross-platform development is the possibility to share most of the code between both iOS and Android apps. The code is written in JavaScript (React Native) or C# (Xamarin) which means developers no longer have to learn Swift, Objective-C or Java in depth. Besides, developers have no need to write the code for the same feature twice.

React Native

The framework utilizes native components written in Objective-C, Swift or Java. Thus, developers can easily use native code if they need to optimize an app and enhance its performance in high-load operations like image editing or video playback. However, the above-mentioned native modules can’t be reused across different platforms.

In contrast to these native components, the rest of the codebase (approximately 90%) can be shared across platforms.

Xamarin

In this case, developers used C# complemented with .Net framework to build apps for different mobile platforms. Xamarin does not require switching between the development environments: all Xamarin apps are built in Visual Studio.

Generally, up to  96 percent of source code can be reused with Xamarin.Forms speeding up the engineering cycle.

Ionic

An integral part of the apps created in Ionic is their universality. Whatever the OS selected, they will operate equally well on each of them. However, some UI elements need to adapt to the rules dictated by a particular platform, which will require additional efforts.

React Native vs Xamarin vs Ionic: Licensing

Businesses who have decided to develop an app for commercial purposes, have to be careful about using open-source code. Even though it offers a lower total cost of ownership than proprietary libraries, there is no 100% guarantee for code protection.

React Native (as of February 2018), Xamarin (as a part of Microsoft acquisition), and Ionic operate under the MIT license. This is one of the most popular and permissive certifications that offers legal protection for the software developer.

The key features of MIT licensing are:

• no need to make the source code public when distributing the software;
• the possibility to add modifications under any license;
• no need to document the changes added to the source code;
• no explicit position on patent usage.

React Native vs Xamarin vs Ionic: Cost

React Native

React Native is a completely open source project. Developers can use this framework and its libraries for free.

Xamarin

As a member of the Visual Studio family, Xamarin requires users to install IDE, which is distributed on a subscription basis. It offers a free edition for students and non-enterprise projects with up to 5 users. Additional features are available with Professional and Enterprise licenses. The annual subscription costs $539/user for the Professional license and $2.999/user for the Enterprise one.

Ionic

Ionic is a free open source tool for developing hybrid mobile apps. Nevertheless, the company offers paid Ionic Pro, a cloud platform for teams ($49/month per team member) and businesses ($199/month per team member). The company claims that Ionic Pro speeds up development providing additional options, like private sharing, live onboarding, and long-term error history.

Conclusion

React Native, Ionic and Xamarin have gained credibility among enterprises aiming to reduce the time and costs of software development. All three frameworks can be successful, depending on your business needs and priorities.

Other articles you might be interested in:

• Top Healthcare Mobile Apps using React Native
• Migrating to React Native: Top Case Studies from Well-Known Companies
• Built with React Native: Mobile App for Golfers

Have a brilliant idea for your startup? Contact us and we will help you bring it to life!