Xamarin vs Ionic: Ending the application frameworks debate

Mobility Product Engineering

Xamarin vs Ionic: Ending the application frameworks debate

In this article, we are taking Xamarin vs Ionic for a spin to figure out which framework should be used when it comes to choosing a right application development framework. Ionic — being a hybrid application development framework — has been gaining popularity for a long time due to its simplicity. On the other hand, Xamarin — which is backed by a strong team at Microsoft — is strongly hailed by small to mid-sized enterprises from time to time. But before we starts with Xamarin vs Ionic comparison, let’s have a look at the points by which we will compare Xamarin and Ionic for cross-platform development.

Table of Contents

Xamarin vs Ionic development in Numbers – popularity, no. of developers etc.

xamarin vs ionic popularity

As you can see, the worldwide searches of Ionic is more than the worldwide searches of Xamarin.

Moreover, according to the latest developer survey done by StackOverflow, the popularity comparison between Xamarin and Ionic showed these staggering results:

  • C# lags 8.5% behind javascript when it comes to market demand.
  • Angular.Js and Cordova developers are available in abundance when you compare it with the total number of Xamarin developers.
  • A simple search on Github shows 28K repositories for Xamarin, and staggering 75K repositories for Ionic.

Xamarin vs Ionic General Information – Definition, Types etc.

“What is Ionic : Is it “cross-platform” framework or “hybrid”?”

According to the official definition of Ionic framework: “It is a front-end framework for developing hybrid mobile apps in HTML5.” Note that we are not defining Ionic as a cross-platform framework as it is used to create hybrid html5 apps. The word “hybrid” here refers to the combination of both web and native application development. To elaborate a bit in technical terms, we must remember that Ionic leverages the use of web technologies (JavaScript, HTML, and CSS) to create apps which are displayed to mobile devices in a web view. The framework, however,  “can’t be termed as a cross-platform framework” because it doesn’t make use of native widgets at all.

Being a hybrid application development framework, Ionic gives Mobile application developers liberty to:

  • Generate Icons and splash screens for all devices with a single command: ionic resources which Saves at least a day of image preparing in various sizes.
  • Instantly reflect code changes, even when you are running directly on your device or emulator.
  • Build and test iOS and Android application side-by-side and see changes instantly
  • Share your ionic apps with clients, customers, and testers all around the world without even going through the App/play store
  • Easily access the full native functionality of the device using ng-Cordova.

Prerequisites for developers to getting started with Ionic: Working knowledge of JavaScript (specifically Angular.js) is required.

Major parts of Ionic framework:

  • Powerful HTML5 SDK
  • CSS/Sass
  • AngularJS
  • Ionic CLI
  • Native wrapper like Cordova/Phonegap

To go from the template to mockups, Ionic offers three options: Ionic CLI, Zip file, and Raw HTML. You can choose whatever feels best for your needs.

What is Xamarin?

Xamarin is a cross-platform development framework, which allows you to build iOS, Android and Mac apps using C#. Xamarin aims directly at the .NET developers. It leverages C# language and.NET framework.

Performance could be a major issue when it comes to Non-Native applications, but Xamarin has the ability to leverage hardware acceleration to boost the performance unlike other Hybrid platforms including Ionic. Last year, we ran experiments to measure the computing performance of Native vs cross-platforms applications and found that performance of the cross-platform frameworks are pretty much comparable as Native application development frameworks.

That’s why if performance of an application is concern for you, then it makes sense to go forward with Xamarin. Xamarin apps have a full range of API access to add different functionality to your app. Xamarin apps are built with native interface controls, so their look and feel is very close to Native.

Xamarin Ecosystem includes a set of run-time engines, access to native APIs, Xamarin Test cloud and Xamarin Insights (to track crashes and exceptions) in the codebase.

Types of Xamarin development platforms:

Xamarin supports all the major platforms including Android, iOS and Windows and they offer a Native like development environment to build the applications. These development platforms are:

  1. Xamarin.Android–  Unlike the Native development, here you work in C# instead of Java.  You can define your UI in activities, similar to the Native development.
  1. Xamarin.iOS–  It uses C# instead of Objective-C or Swift to develop the app. The runtime environment is similar to Native iOS development, so developers need to code in C# and Xamarin takes care of the build by using Objective-C wrappers to make the codes compatible with iOS platform.
  1. Xamarin.Forms– With Xamarin forms, you can build true cross-platforms which work with all the platforms .i.e. Android, iOS, and Windows. The codes and business UI can be shared across all the platforms, in an otherwise, you had to create separate UI layers and code base for each platform.

Xamarin vs Ionic Tech Stack comparison

xamarin tech stack

Attached above is the Image representing Xamarin Tech stack whereas attached below is the image representing Ionic Tech stack:

Ionic tech stack

Responsive UI/ UX design in Ionic vs Xamarin

Image Sliders

In Ionic,  if you setup simple image sliders, the sliders initially aren’t responsive, until the pane containing application is manually nudged.  But, In Xamarin (Xamarin native and Xamarin.Forms) it is easy to create responsive designs.

Animations

Secondly, Implementing animations and transitions in Ionic is not as smooth as it should be,  Xamarin on the other hand offers smooth much better working animations and transitions. Moreover they also support custom animations.

When it come to Animations, Ionic won’t be an ideal choice for building games or Graphically complex applications. There aren’t much tools available to support high intensive graphics or highly interactive transitions. But, by Using material design components, you can build custom or strange animations in Xamarin applications.

OS version support & compatibility for Xamarin and Ionic

Ionic Currently supports:

  • iOS7+
  • Android 4.1+
  • Progressive web apps

Although Ionic reports 4.1+ supported, but there has been some cases of a broken experiences for 4.2 and other versions below 4.4.

Ionic 2 specifically supports Android 4.4 and up, no support for any versions below that.

Xamarin on the other hand supports:

  • Everything from Android 1.0+(Base) to Android 7.1(Nougat)
  • With Xamarin.Forms, Xamarin only provides support for OS versions greater than Android 4.0.3; iOS 6.1 or newer
  • Xamarin.iOS provides same day support for iOS. Any updates that are reflected in new iOS release are updated on the same day when it comes to Xamarin.iOS
  • There are couple of iOS 9 compatibility issues: Apps developed for iOS 8 or earlier show some issues as they sometimes don’t launch properly on 32-bit devices.

Mobile device Management for Enterprises: Xamarin vs Ionic

Xamarin has a better mobile device management suite for enterprises than Ionic. Xamarin apps can be easily integrated with Microsoft Intune services for organizations dealing with BYOD devices.

For Ionic, Microsoft had launched a Cordova plugin, which can be use with Ionic apps to manage enterprise devices remotely.

Xamarin and Ionic mobile database support

Realm for Xamarin vs Ionic

For the developers, who are more serious about the performance of the applications, use a custom and single API to compose advance queries and modeling complex data. Realm is one such tool to do so.

Ionic has no official support by Realm, but they have built a Realm database with an API support, which can be used by Xamarin apps.

Firebase for Xamarin vs Ionic

Firebase has a really nice support for Ionic apps, but for Xamarin there are a couple of wrappers available in Objective-C but no real support. Apart from Firebase, there are some MBaaS vendors like Microsoft Azure, IBM Bluemix and Kinvey, who provides support for Xamarin platform to build highly available and scalable apps in cloud.

Integration with existing Enterprise architecture: Xamarin vs Ionic difference

Xamarin can be leveraged to use the existing .NET libraries to interact with the web and other data services while sharing the C# code and business logic across both client and server.

But, Ionic can only be integrated with existing back-end technologies like Node.Js, Express.Js or Ruby on Rails . If there are any subtle difference in the overall architecture, things can get messy as there won’t be any shared code-base. Nonetheless, familiarity with Angular.Js would drastically impact the rapid development and integration.

Angular supports all the possible architecture .i.e. MVC, MVVM, MVW etc, so you can expect a smoother integration but be prepared to spend huge time.

Third party SDKs and library support for Xamarin vs Ionic

Here’s a chart representing Ionic and Xamarin comparison when it comes to availability and integration with third party libraries and SDKs:

SDKs

Code Reusability and Technology Limitations: Xamarin and Ionic

Code Reusability - Xamarin vs IonicOn the limitations part, Xamarin.iOS doesn’t complies ahead of time, so the developers don’t have the same level of control over the code that executes on iOS.

Also, when you use Xamarin, you lose the ability to share the code with your HTML5 app team. On the limitations part, Xamarin.iOS doesn’t comply ahead of time, so the developers don’t have the same level of control over the code that executes on iOS.

Ionic on the other hand is extremely compatible with code sharing with other HTML5 platforms.

For someone who utilized .NET APIs to increase the functionality, the chances are that not everything is available for the Xamarin.iOS.

Mobile Application size comparison for Ionic and Xamarin

Xamarin based mobile applications are extremely large when it comes to app size. For enterprise dedicated mobile devices, it may be extremely easy to incorporate these applications, but when it comes to BYOD, especially with users having limited space on their mobile, a large sized app may create performance issues.

Ionic apps on the other hand are extremely lightweight.  Even though, some people confuse the folder size with App size(like this guy), so keep in mind that when you actually compile the app, it boils down to few Mbs.  If it doesn’t, then you can do the following:

  • Compress the images using tinypng or something similar.
  • Reduce the server side dependencies like Database and server request etc.
  • Minimize the CSS file along with updating the index file.

IoT Integration in Xamarin & Ionic

Xamarin can be integrated with Azure IoT easily, as Xamarin uses Microsoft’s IoT and Cloud capabilities. On the other hand, there is no Integration of nRF’s hardware development kit with Ionic.

But, Ionic apps can be integrated with wireless sensors, ibeacons or bluetooth devices for simple use-cases. Femto CTO, Alex  Albino used Ionic along with Cordova plugins to create an interface for hardwares over Bluetooth smart. You can check their codes on Github.

While we agree that these are tiny glimpse, but there are endless possibilities on what could be built on Ionic’s speed to market capabilities.

Xamarin vs Ionic performance comparison

Xamarin Performance is considered close to native as it’s cross-platform development capabilities is based on reusing the business logic rather sharing the same codebase between the two kinds of app. Developers can easily develop high performing applications with Xamarin using Xamarin.Android and Xamarin.iOS.

On the other hand, Ionic performance is not close to native application performance as it utilizes a webview to wrap application. That said, a user can can easily distinguish the difference between Xamarin vs Ionic performance by using the application.

Hey! I am first heading line feel free to change me

Related read: React Performance – Major Issues and How to Optimize them

Code Maintainability: Ionic vs Xamarin difference

Since Xamarin is backed by Microsoft and depends on .net framework, there are chances or you can say predictions that say Xamarin apps can be discontinued in future. However, Xamarin development team doesn’t think so, hence future will tell.

On the other hand, Ionic utilizes Angular language to develop mobile applications which is supported by Google. Hence, chances are less for Google to discontinue the use of Angular for developing mobile apps.

Battery life, best practices guidelines

Xamarin has nice guidelines on how to improve performance and decrease battery consumption by a mobile application. Ionic on the other hand makes it very difficult for us to optimize battery consumption.

Tools for Testing & Debugging : Xamarin vs Ionic difference

Debugging in Xamarin

Xamarin Studio and Xamarin’s Visual Studio extensions include advanced debugging tools that work across the full spectrum of supported platforms and environments. Developers can perform interactive debugging on an app that is running in the Android emulator, the iOS simulator, or even directly on hardware.

Xamarin’s debugger supports breakpoints, catchpoints, watch expressions, stepping, and inspecting threads and local variables. It also supports advanced debugging features, such as conditional breakpoints and an interactive REPL

Testing in Xamarin

In contrast to manual testing and simulator-only testing, Xamarin Test Cloud lets teams test every feature on more than a thousand devices and on every commit. Catching bugs before released shortens development cycles and allows more time for innovation.

Xamarin test cloud has –

  • Access to 2,000+ real devices
  • Write automated testing scripts using C# or Ruby
  • Detailed reports are available: Track results, Trend analysis
  • Integrate Xamarin with Hockey app to leverage in house app store for beta testers. Crash reports are also available for Android, iOS, Mac and Windows apps. Report provides meaningful stack traces with friendly class names, methods, and accurate line numbers.

Xamarin’s model for mobile quality:

  • Complete test coverage
  • Comprehensive device testing
  • Fast troubleshooting – screenshots and graphical reports
  • Accelerated cycles with Continuous integration
  • Comprehensive support for all native and hybrid apps

Test automation with Xamarin

Xamarin’s UITest and Calabash frameworks enable powerful automated UI testing. Developers write tests that behaves as user do, performing taps, swipes, rotations, and waiting for UI elements to appear. These test results are available within minutes, and they include everything from feature testing to comprehensive regression tests for complete coverage and a fault free application deployment.

Scripts written are flexible to any UI change that may happen in design and development, as opposed to other available OCR solutions that frequently break when UI changes are introduced.

These scripts/tests are written in C# in Xamarin Studio or VS, or in Ruby using Calabash, the industry’s most powerful framework for automated testing of native and hybrid apps.

Xamarin’s test cloud has one of the world’s largest collection of iOS and Android devices(2000 real devices) and allows you to select testing devices by market share, OEM, form factor and even the OS version

Ionic – Testing and quality approaches

Ionic is missing code quality options and various workflows that are needed by enterprises when building an app in a CI/CD environment. For Deploying the apps to the app store, Ionic supports tools like Fastlane.

Ionic doesn’t offer any cloud testing offerings. You can test your app in simulators, mobile browsers or by using Apple’s testing services through Apple developer account.

Xamarin vs Ionic – The Comparison Chart

Xamarin vs ionic difference

Xamarin vs Ionic : Which Framework to use?

If you’re comparing Xamarin vs Ionic for a specific mobile-app development project, your choice will be determined by the characteristics of each framework.

For example, if you’re planning a complex business app that will be integrated with existing enterprise applications and architecture, Ionic probably won’t be your best option. Xamarin fares much better in this regard because it uses C#, enabling code and business logic to be shared between the client and the server.

Xamarin is also the most suitable framework for building apps that take advantage of native device features, as Ionic’s support for native APIs is limited. A further issue with Ionic is its tendency to make life difficult for developers when creating complex apps with many lines of code.

On the other hand, if your project requires development of relatively simple apps, without a great deal of customization and with a somewhat native appearance, Ionic is a good option, especially if your development team is skilled in the use of web technology.

Which framework between Ionic and Xamarin do you prefer for mobile application development? If there is a specific reason then let us know in the comments.

A thought leader, Jignesh leads Simform's Product Engineering team by DevOps Institutionalization, end-to-end product development and consulting led transformation programs.

  1. Ilia Malchenko

    A very comprehensive overview, thank you! I'm wondering if you have any thoughts about React Native and how it stacks up against the two.

    • Jignesh Solanki

      Hey @iliamalchenko:disqus, I am shortly going to release a blog post on React Native vs other frameworks and compare it to native as well. Glad you asked about it. I will share it with you once I publish it. Anything in specific that you wish to see in the blog post? Also, do you have an email where I can send it over?

      • Ilia Malchenko

        Hi @jignesh_simform:disqus! My basic understanding is that Xamarin compiles down from C# into native code, as does React Native, just from JavaScript. I think that's what separates these two from Ionic, in that even though you code in a non-native language, the frameworks essentially "translate" your code into native code base, which makes the apps work smoother and have a native feel to them. I was very surprised to read that Xamarin apps are much larger in size - do you see the same with React Native apps compared to Ionic? And is that a fair comparison, since Ionic is a web application(I think) wrapped up in a native "app"? Both Xamarin and RN claim that quite a bit of code is "reusable" between Android and iOS. I'm wondering to what degree this is true. Also, what are the disadvantages of using Xamarin.Forms vs Xamarin.iOS and Xamarin.Android? In other words, why would you write the application twice in Xamarin.iOS and Xamarin.Android, if you can kill two birds with one stone by writing with Xamarin.Forms? My impression is that the whole idea behind these frameworks is to "write the application once" and distribute it across iOS and Android, rather than writing 2 applications, one for each platform. Thank you!

        • Jignesh Solanki

          Hey Ilia, Let's take these questions one step at a time. 1. Xamarin Forms vs others: Xamarin Forms have a sloppy performance as opposed to Xamarin.Android and iOS. 2. Xamarin has a much larger size than React Native. Mainly because React native can be integrated to an existing native app in a hybrid manner, adding very small part of cross platform code, and not bloating the size as Xamarin would. 3. Comparing Xamarin to Ionic, people often compare the two, some often end up making the wrong choice and that's why I shared my thoughts. I hope I was able to address your concerns. Regards, Jignesh

  2. 1antares1

    Wow! Impressive the level of detail you have had to go deeper. However, I expected you to compare with the current version of Ionic 3: / Can I be alert to wait for him? Thank you for your effort, dear Jignesh.

    • Jignesh Solanki

      Hey @koaltares:disqus I am glad that you liked my article. I will soon include an article update covering Ionic 3. If you wish to be notified of the blog update or more awesome mobility articles, feel free to subscribe!

Your email address will not be published. Required fields are marked *

Simform blog

Join 1,000+ Industry practitioners who get mobile engineering insights from us!

Get our latest mobile application engineering insights and reports delivered directly to your inbox

You have Successfully Subscribed!

Simform blog

Join 1,000+ Industry practitioners who get mobile engineering insights from us!

Get our latest mobile application engineering insights and reports delivered directly to your inbox

You have Successfully Subscribed!