Comparing: Flutter vs. React Native vs. Xamarin

Software development teams are always searching for tools to help them become more efficient — and deliver better experiences for their users. That’s especially true today when it comes to creating apps. As our industry matures, the applications we build are used in more places and on more types of connected devices than ever before.

With that complexity, tools that can help developers build cross-platform experiences — and reuse code, features, and designs — can be incredibly valuable. Cross-platform tools can reduce development costs — and more importantly, time. The more code you can share across platforms, the faster you can bring your app idea to market. And this time and money savings isn’t a one-time thing. In our experience, using cross-platform tools also simplifies support and maintenance, and leads to continuous acceleration of your product roadmap.

Today, there are three leading development tools to consider for cross-platform app projects:

At Acveti we have had success with all of them. And if you’re considering which to choose for your cross-platform app project, there is no right or wrong answer. You should ultimately make your decision based on a combination of your company’s existing tech stack, your team’s expertise, and the type of app you want to build.

In this article, we provide a detailed overview of Flutter, React Native, and Xamarin — and a roundup of some of the other lesser-known cross-platform technologies. Most importantly, we explain why developers and engineering leaders would most likely choose one over another.

Flutter

Why Flutter?

As a developer or engineering manager, you might choose Flutter because:

• Speed and performance are very important.
• You want to use the newest, most modern development tools and language (Dart).

Flutter pros and cons

Pros:

• The entire toolset is open source.
• See the results of your changes almost instantaneously with Hot Reload.
• Deliver a high-performance native app experience with up to 60 frames per second animations/video.
• Build UI components with the same features as native apps, but with more options to customize and create new behaviors.
• Easily create animations and apply them to any UI components.
• Get direct access to native code, so you can import libraries and use native APIs.
• Reuse the codebase across mobile, and (soon) the web and IoT.

Cons:

• Less mature than Xamarin and React Native.
• Not many plugins are available.
• Very few continuous integration tools include direct integration with Flutter.

Flutter background

Previously named “Sky Project,” Flutter is the newest cross-platform app tools — and one of the hottest topics among developers. The reference to the sky is no accident: The idea behind Flutter is a universal framework, not only to build mobile apps but also to reach the web, desktop, and IoT products.

The Flutter project was born inside of Google in 2014, although the first stable version wasn’t released until 2018. That’s because the Flutter team invested a lot of time researching and choosing the right layers to build the technology, as well as making sure that Flutter supported everything required from a modern software framework.

And it was worth the wait. With features like Hot Reload, native-like performance, and custom UI, Flutter has become a huge hit with developers (and designers). Flutter is now the fastest-growing skill among software engineers, according to LinkedIn data. And we recently wrote about how Acveti is now using Flutter for commercial app development.

Flutter key benefits

One of the reasons Flutter has risen so quickly among the best cross-platform solutions is because of its performance. Developers can create sophisticated UI designs with rich transitions and animations, without any performance impact.

One of Flutter’s strengths is Dart, a new programming language that offers the best of both worlds:

• An ultrafast code “Hot Reload,” so you can experiment and see the results almost instantaneously.
• A native compiler to optimize your application once it’s ready for production.

An important characteristic of Flutter is that you don’t need to wait for Google to support a new OS feature or wait for a bug fix in middleware — because Flutter doesn’t wrap the native code. Instead, it works alongside the native framework and developers have direct access to all of the native features.

Developers can do nearly everything they would do in a native framework with the bonus of having code-reuse not only for iOS and Android — but also for the web, desktop, and embedded devices. However, integration with desktop and embedded devices is still in development. We wouldn’t recommend using it in production yet.

Flutter UI

The Flutter team explicitly chose not to use the default UI components from the native platforms. Instead, the team implemented its own UI, based on a component called Widget. In Flutter, everything is a Widget, and developers can easily build their own UI by putting small blocks together. This helps developers build custom designs, but also follow all the native platform conventions.

Flutter offers an enormous library of ready-made components within the framework, so developers can have the same UI components as they would if they were developing the app within iOS or Android. Even though these look and feel like native components, behind the scenes Flutter is managing everything using the Skia Graphics Library. For example, the default transition between screens is different when the app is running on Android or iOS, without the developer needing to specify the adaptation.

Flutter native APIs and 3rd-party integration

Both native APIs and third-party libraries are handled the same way in Flutter: Developers can import and use them just as they would in the native framework. However, developers need to implement an additional Dart layer to communicate with the native code.

To understand why that’s needed, we need to take a look at the Flutter framework architecture. Flutter was designed with isolated layers that enable the framework to run in any platform with only a native shell, which hosts the Flutter engine and everything around it. Inside of any Flutter project, there’s a small native project, where the Flutter toolkit is loaded and called. That’s also the place where the developer can and should write the native APIs or libraries. However, developers still need to invoke the specific native code from Flutter. To do that, they need to use Platform Channels on both sides, either to call methods in the native code or to share data.

A channel works like a very simple binary messaging system, where developers can send a message from the app to the shells and vice-versa. This communication system is asynchronous and has an optional result answer, where developers can return some data from the code that’s called. Flutter has built-in support for some data structures, but the developer can serialize any data type to binary and recover on the other side, providing a codec or any other encode/decode solution (e.g. Protobuf). The purpose of this system is to allow developers to be in control of what’s happening between the Flutter app and the native shell, easing any custom implementation. However, if the developer wants to speed things up, they can use Plugins, Flutter packages made by Google and the community.

Flutter project architecture

Even though the Flutter framework is growing in popularity, Google’s team hasn’t yet provided a recommended design pattern. In addition, there are developers coming to Flutter from multiple backgrounds, especially due to Dart’s similarity with modern languages like JavaScript, Kotlin, and Swift. These developers use successful patterns they are already accustomed to from other platforms. As a result, a variety of architectures are being implemented across Flutter projects, including BLoC, Provider, Scoped Model, Redux, MVP, MVVM, and many others.

The Flutter team has stated publicly that it’s using BLoC and Provider for its own projects, but the team hasn’t offered an official recommendation. You can find many of the architectures as part of independently managed packages from the community.

Flutter documentation

The Flutter framework is open-source, and everything is documented and available on the public web. Also, the Flutter website has specific tutorials for developers coming from Android, iOS, web and even other cross-platform solutions. There are cookbooks, code labs, and samples — so developers can learn on the go — and a very active YouTube channel.

React Native

Why React Native?

As a developer or engineering manager, you might choose React Native because:

• You or your team are familiar with web development and JavaScript.
• You are porting an existing web app to iOS and Android.
• You need to hire developers; JavaScript is the most popular programming language in the world.

React Native pros and cons

Pros:

• Easy to start using it.
• Integrate React Native features with existing native code.
• Market adoption is high.
• Good documentation.
• Easy to debug through Chrome Dev Tools or Safari Dev Tools.
• Apply knowledge and tools from web development to mobile.
• Open source and free to use.

Cons:

• Relatively immature compared to Xamarin.
• Sometimes difficult to update apps to new versions of React Native.
• Some features still require additional development on native platforms.

React Native background

Like other cross-platform development frameworks, React Native was created to help streamline app development — but built around well-known web development tools, starting with JavaScript. React Native combines the best parts of native development with React, a JavaScript library for building user interfaces.

In concept, a JavaScript framework that can be applied to cross-platform mobile apps seems incredibly useful — and the similarity with the React JS syntax makes it even more interesting. Using the same language and syntax, it’s possible to develop both native apps and web applications.

React Native was born in 2013 during a Facebook hackathon, and in 2015, it became open source. Facebook continues to invest in the React environment — and market adoption is accelerating. Companies such as Instagram, Tesla, Uber, Walmart, and Pinterest have released apps developed with React Native.

React Native key benefits

You can start using React Native with any existing app development project, and it can co-exist smoothly with native iOS and Android development tools and teams. Native developers can be working in the native frameworks, while React developers work on other features for the same app. React’s UI is able to translate any native code and convert it into cross-platform “native UI components.”

In addition to helping developers save time by leveraging code across platforms, React Native also has a wide variety of available components developers can implement, including many created by the open-source community.

But the single biggest reason why developers use React Native is that they can leverage concepts they learned as a React and JavaScript developer. This is especially helpful if a development team works across apps and the web — with existing projects already in JavaScript/React.

React Native UI

If you have ever written HTML+CSS web pages before then you know how to create a UI with React Native. It relies on JSX, a type of HTML syntax that leverages CSS for alignment, colors, and simple animations, and Flexbox to provide a consistent layout on different screen sizes.

Developers just need to create directives, such as:

• Should the content be displayed as a row or a column?
• Should it be spaced evenly or centered?
• Do you need to change the order of some items?

React Native also has a bunch of alternatives for styling and layout — two of the most well-known are Styled Components and Emotion. Like Flutter’s “Hot Reload,” React now offers a Fast Refresh for developers to reload just the component you are working on — rather than reloading the entire app — to see changes right away.

React Native APIs and 3rd-party integration

There are a lot of modules available to extend React Native. And if developers need a module that isn’t available yet they can write it in JavaScript, or use the native languages for iOS (Swift, Objective-C) or Android (Java, Kotlin).

Before coding a module from scratch, developers should search NPM. It’s likely that you will find the module you want there. The React Native Community also maintains many reliable open-source modules that can be integrated with mobile app development projects without too much effort or updating.

React Native project architecture

When architecting a React Native app, we recommend starting with Expo, a set of tools and services to help develop, build, deploy, and quickly iterate on iOS, Android, and web apps with the same JavaScript codebase. Alternatively, developers can use React Native CLI. Both tools help set up an application for development and establish the project architecture.

React Native documentation

When it comes to documentation, React Native shines. It has an active community that regularly shares information and real use cases on YouTube, Medium, Reddit and more. Also, the React team itself is very committed to keeping the documentation and tutorials current.

Xamarin and Xamarin.Forms

Why Xamarin?

As a developer or engineering manager, you might choose Xamarin because:

• You or your team have extensive Microsoft and C# development experience and/or Microsoft services are at the core of your company’s tech stack.
• It’s the most mature cross-platform development toolset on the market.
• It offers a native app user experience.

Xamarin pros and cons

Pros

• Access 100% of the platform APIs.
• Achieve native performance, look, and feel on each platform.
• Share 90%+ of code with the use of .NET.
• The most mature and complete cross-platform tool (8 years old and used by 1.6 million developers around the world).
• Test UI changes right away with XAML Hot Reload.
• Run the same app on Android, iOS, watchOS, macOS, Windows, Tizen, and WebAssembly.
• Leverage many available libraries on NuGet.

Cons:

• App file sizes larger than apps developed on native platforms.
• Apps with heavy graphics, like games, are not a good fit for Xamarin (although it is possible to make games with Xamarin).
• Cost: Building commercial applications (not open source) with teams larger than five developers requires a paid Visual Studio subscription.

Xamarin background

Founded in 2011 by the creators of Mono (an open-source implementation of Microsoft’s .NET Framework), Xamarin is a mature platform to build modern and high-performance apps for iOS, Android and Windows. In 2016, Xamarin was acquired by Microsoft — and the platform became integrated within Visual Studio. Microsoft has since made Xamarin open source, making it an even more popular choice for mobile developers.

Although it’s possible to develop Xamarin apps using F# (a mature, open-source, cross-platform, functional-first programming language) the primary language used to write Xamarin apps is C#. First developed in 2002, C# version 8 was recently released with great new features.

Xamarin key benefits

Xamarin is a great fit for developers that aim to share code, tests and business logic across platforms. Our Xamarin development team has found approximately 90% of the code and business logic can be reused across iOS and Android apps.

The ability to reuse code is surely one of the greatest advantages of using Xamarin, especially if your apps integrate with a .NET backend environment. That includes Azure, which according to Microsoft is now used by more than 95 percent of Fortune 500 companies. If a development environment is largely comprised of Microsoft technologies, with good code separation, developers can share the business logic and make it front-end agnostic. Then they can plug in the logic to any client, including Xamarin apps, ASP.NET Core API, SignalR, and more. There’s no need to reinvent the wheel nor spend time writing the business rules twice just because you can’t share code that’s been written in one language or another.

And of course, if your development team is already steeped with Microsoft expertise and experience with C#, the learning curve won’t be as steep. (Though as our EVP of Engineering Paulo Michels once wrote, your Microsoft developers still need to develop mobile expertise: “There’s no boot camp your Microsoft developers can take that will instantly transform them into Xamarin mobile development superheroes”).

Xamarin UI

For UI development, Xamarin has robust tools to help developers achieve pixel-perfect apps. XAML separates the UI code from the business rules. Recently, Xamarin released XAML Hot Reload (during Xamarin Developer Summit; read our six takeaways from the event) a long-awaited tool that helps developers complete UI code in less time. Not only that, but Microsoft recently announced that Xamarin Hot Restart is coming soon. These two announcements will allow developers to write and validate UI faster and with more confidence.

Xamarin has some alternatives for styling and layout:

• Xamarin.Forms — Often confused with Xamarin itself, Xamarin.Forms is an open-source cross-platform UI toolkit library that delivers a set of controls that use platform renderers to convert the cross-platform UI elements into native controls. (Related: See this post to help choose between using Xamarin.Forms and Xamarin Native). We’ve also written about how to create beautiful apps with Xamarin.Forms and have used Xamarin.Forms for clients like GUESS, Hawaiian Airlines, and EmployBridge.
• SkiaSharp — SkiaSharp is a port to C# of the Skia Graphics Library, an open-source 2D graphics library managed by Google. Flutter apps use Skia as their graphics engine. The SkiaSharp project is maintained by the Xamarin team and pairs well with Xamarin.Forms. Developers that need to draw 2D vector graphics, bitmaps, or text can make use of SkiaSharp to handle the work.

Xamarin native APIs

With Xamarin, developers have full access to native platform APIs — a huge benefit. For example, developers use platform-specific APIs to enable push notifications, Apple Pay on iOS, and Google Wallet on Android, among many others.The Xamarin team aims to release a stable version of Xamarin.iOS and Xamarin.Android within 24 hours after any official OS release by Apple or Google — though sometimes those releases take place a few days later.

Xamarin 3rd-party integration

Developers can build integrations with third-party libraries on Xamarin applications in two different ways: using the NuGet package manager, or by creating binding libraries of native iOS/Android packages.

• NuGet — NuGet (pronounced Noo-Get) allows developers to publish their packages for general use on a .NET environment and integrate third-party libraries into applications. According to nuget.org, 180,227 unique packages are available to date. The popular open-source Xamarin Essentials package recently surpassed 1 million downloads.
• Binding libraries — Binding libraries are native Android or iOS libraries that offer access via C# to existing Java or Objective-C libraries. They enable developers to make use of native libraries for Android or iOS that are not available via NuGet since they’re not .NET. Creating native bindings is not trivial and may be time-consuming. We’ve created some binding libraries for Xamarin that took only a few hours to complete, while others took weeks. This process is totally different for Android and iOS — and some limitations may apply.

Xamarin project architecture

As noted above, Xamarin apps are part of the .NET ecosystem and make use of the best practices within the .NET world.

Xamarin applications typically rely on MVVM, an architectural pattern born at Microsoft 14 years ago. The vast majority of Xamarin apps are built with MVVM. Developers don’t need to write the basics to support MVVM, as they are already implemented within .NET. It pairs very well with UI development using XAML. The MVVM pattern has recently been recommended by Google in its guide to app architecture.

Xamarin documentation

Microsoft has always put great care into supporting developers through documentation, tutorials, and videos, and the Xamarin team is no exception. A few years ago they released docs.microsoft.com, a content portal built with responsive design, social share features, themes, and search. All things .NET.

The Xamarin documentation includes information about the SDK, code samples, tutorials and more. It’s packed with content to help developers get the most out of the platform. Developers may also want to check the Xamarin Developers YouTube Channel. Microsoft also offers free Xamarin training on the Microsoft Learn platform.

Other cross-platform mobile development tools

Appcelerator

Introduced in 2010, Appcelerator allowed for cross-platform development on Android and iOS using JavaScript. Appcelerator became somewhat popular with enterprise development teams because it allowed them to port web apps more easily to mobile. In 2016, Appcelerator was acquired by Axway, which specializes in API management and B2B integration.

Cordova / PhoneGap

Cordova was designed to become obsolete, according to its own creator. The hope was for it to be available until the web and browsers could catch up with native apps in terms of performance. That hasn’t happened — primarily because of limitations that still exist in browser technology that make it impossible to deliver the same user experience as with native apps. Cordova is a wrapper native app that surfaces native APIs to a web page running in a web view. All Cordova apps are essentially web apps running locally on the device. The Cordova framework is based on PhoneGap (originally from Adobe), which is managed by the Apache Software Foundation.

Corona

Developed by Corona Labs Inc., Corona is most commonly used to develop 2D mobile applications for iOS, Android and Windows. It uses C++ and OpenGL along with Lua to help developers create applications across mobile, web, and connected TV platforms.

Uno

An open source cross-platform graphical user interface that allows WinUI and Universal Windows Platform (UWP) based code to run on iOS, Android, and WebAssembly.

Kotlin/Native

From JetBrains, the creator of the Kotlin programming language for Android, Kotlin/Native allows developers to compile Kotlin code to other native platforms, including iOS. It is an LLVM-based backend for the Kotlin compiler.

NativeScript

NativeScript allows developers to take web apps and compile code for Android and iOS apps. The open-source framework is based on the Angular, Vue.js, TypeScript, and JavaScript languages.

Progressive Web App (PWA)

PWAs are web applications built with standard HTML, CSS, and Javascript that can take advantage of new capabilities supported by modern browsers. Unlike native mobile apps, PWAs don’t have full access to all the platform capabilities — they’re limited to HTML5 and the user’s browser capabilities. However, PWAs are fast and don’t have to go through the typical app store submission process. PWAs can run on the desktop as well, and can also now be distributed via the Google Play Store.

Need help with your cross-platform app project?

Acveti has been building apps using different cross-platform technologies since the dawn of the App Store. Contact us to learn more about how cross-platform development can help accelerate your product roadmap and save you money.