Cross Platform Mobile Development

Flutter (Google) vs React Native (Facebook) vs Xamarin (Microsoft) for Cross Platform Development

Cross platform app development frameworks allow you to run the same code on different operating systems. In this article, we examine why you might choose developing cross platform mobile apps over native development, technologies for cross-platform development, and how these technologies compare to each other.

Namely, we compare Flutter vs React Native vs Xamarin — three of the most popular mobile app cross platform frameworks. We want to consider their structure, tooling, and the kind of applications you can develop with them.

Why choose cross-platform development?

Cross-platform development tends to get a bad rap for a number of reasons. Until very recently, there weren’t any adequate technologies for cross-platform development, and the ones that were available simply weren’t good. They limited developers’ abilities and took a serious toll on application performance — sometimes so much so that the hassles of cross-platform development could no longer be justified.

But despite the drawbacks, people continued choosing cross-platform development over native development because it can offer a number of benefits:

·         Shortened development cycle. With cross-platform development, it’s possible to share up to 96% of code across several platforms. Naturally, this results in a much shorter development cycle: instead of developing two separate apps you only develop one, then share that code among operating systems, making platform-specific adjustments as necessary.

·         Cost efficiency. Cross-platform development is undoubtedly cheaper: you pay fewer developers for fewer hours of work, and for many startups that seals the deal.

·         Smaller team. Cross-platform development requires fewer developers because you don’t need to hire separate teams with iOS and Android-specific knowledge.

·         Simplified testing process. A smaller code base needs fewer tests and allows QA engineers to spend more time on each element of the application, resulting in higher quality test coverage.

Cross platform mobile development comparison

As you can see, it’s not difficult to explain the need for cross-platform development. Now let’s review the capabilities of Flutter, React Native, and Xamarin.

Xamarin

Xamarin is a cross-platform framework with C# and native platform libraries wrapped in a .NET layer. The technology consists of three main components: Xamarin Platform, Xamarin Cloud, and Xamarin Insights.

Xamarin Platform is considered the most important element of Xamarin, offering APIs, controls, runtime engines, encryption, authentication, virtual machines, and much more. Xamarin Cloud provides an automated testing platform for assuring your product’s quality on a variety of devices. Xamarin Insights is a monitoring tool that helps developers track application crashes and exceptions.

ADVANTAGES

Performance comparable to native apps. C# is a multi-paradigm programming language and a strong contender to the languages normally used in mobile development, allowing Xamarin apps to stand tall alongside applications developed in Objective-C, Swift, Java, or Kotlin.

Hardware consistency. The variety of APIs available to Xamarin developers allows for integration with many native hardware components, improving the user experience.

Xamarin.Forms. This technology allows developers to write UI code that can be shared between Android and iOS applications with a toolset of more than 40 controls and layouts that map to native controls during runtime.

MVC and MVVM architecture compatibility. Xamarin supports implementation of two popular architecture patterns: Model–View–ViewModel (MVVM) and Model–View–Controller (MVC). MVVM is good for creating different processes with the same codebase, while MVC helps separate application logic and presentation, accelerating the development process.

Offline application support. Because of its cloud and data synchronization features, Xamarin allows for applications to work offline — an ability that used to be limited to native apps only.

DISADVANTAGES

Operational overhead. When creating with Xamarin, developers need to link and reference code between several operating systems and .NET frameworks. This negatively affects application startup and download times, making the app experience less pleasant for the end user.

Time-consuming UI development. Although Xamarin.Forms allows sharing of some UI components, there are still some components that have to be developed for each platform individually. Although in some cases it’s better than writing the UI from scratch, the UI development process with Xamarin remains trying and time-consuming.

Complexities with code support. Although there are many professional .NET developers out there, Xamarin also requires additional familiarity with native mobile development, frameworks, and architectures. This is a difficult combination of skills to find, since not very many developers want to learn two very different programming paradigms. As a result, you might have a difficult time finding professional developers to support, fix, update, or further develop your application.

Everything depends on the application. Regardless of how much Xamarin code you can share between platforms, developers will always need to write native code for platform-specific customization. Not only might this be an issue in terms of cost and finding appropriate developers: a combination of Xamarin and native code will also result in large file sizes, which will harm application performance.

React Native

React Native is an open source mobile development framework for cross-platform mobile development. It allows you to develop iOS and Android applications with JavaScript and a handful of native component APIs.

ADVANTAGES

Native UI. Unlike some other cross-platform development frameworks, the React Native framework implements a selection of native UI components. This means that applications will look like native apps. If done correctly, a React Native app is hardly distinguishable from a native app.

Simplified development. Native mobile development implements the imperative programming approach, where developers need to strictly define a sequence of actions that describe how the application works to create a user interface.

With React Native, developers can use declarative programming, outlining only what the program has to do and not how it should be done. Declarative programming makes for simpler code and easier coding, which also means that the end product will be easier to maintain.

Modular architecture. React Native supports architecture modularity, which allows separating application code into several independent blocks. This results in flexible development, making it easy to upgrade and update the end product.

Ready-made solutions and libraries. Because React Native has been around for quite a while, developers have had time to build a variety of tools and libraries to automate and aid most routine processes. There are testing frameworks, tools for type checking, technologies for workflow setup, and so on. This means that developers will have an easier time solving tricky or mundane issues and have more time to spend perfecting the product.

Third-party support. Because the development community has endorsed the benefits of React Native, many third-party services have created APIs and plugins for React Native applications. There’s third-party support for maps, payment systems, graphics, and more.

Hot reloading. When developing a mobile application, it’s useful to look at the actual app often (possibly after every single change made to the code). Hot reloading, a feature present in React Native, allows developers to immediately see changes they make to the code whenever they’re saved.

Great community and ecosystem. There’s a substantial community around React Native, which is an open-source platform. A good community is an advantage because it means that developers are less likely to get stuck since there’s always someone to come to for help.

DISADVANTAGES

Application performance. Because cross-platform applications aren’t fully aligned with the device’s hardware, their performance is worse than that of native apps. The reason is that there’s a JavaScript bridge between the React Native application layer and the hardware components, and each interaction with the device has to pass through that bridge. The more interactions there are, the worse application performance is. To preserve app performance, developers must minimize application-device interactions, which basically means that the app has to remain as simple as possible without any over-the-top hardware interactivity.

Possible need for native developers. React Native is a great cross-platform framework, but it has its limitations. When you encounter one of those limitations and there’s not yet a React Native solution, it’s necessary to involve native developers — sometimes so much so that it becomes impossible to justify using React Native in the first place.

Inability to deal with complexity. React Native is good for simple applications but isn’t so good for apps with many screens, interactions, transitions, and complex animations.

Initialization. React Native applications take longer to start up, even with higher-end devices, because the JavaScript bridge also takes time to initialize.

Native understanding. When looking for React Native developers, you should also be looking for someone who has experience in native development. Otherwise, the already limited possibilities of React Native will become even more evident since the team won’t be able to understand complex solutions to challenges involving native hardware that other developers have already created.

Native platform updates. To stay relevant, Google and Apple have to constantly keep adding new features to their platforms. Although the React Native team has been trying their best to keep up with new hardware features, it still takes a lot more time to develop a React Native app than it would to develop a native solution. Thus, your React Native app is likely to lag behind with each new hardware update.

Flutter

Flutter is considered the best tool for cross platform mobile development. It’s developed and supported by Google. Flutter uses Dart and a collection of native widgets to create stunning cross platform apps.

ADVANTAGES

Application performance. Flutter uses Dart, an ahead-of-time (AOT) compiled language that allows the application to directly communicate with the native platform as opposed to passing through a JavaScript bridge like in React Native. This allows developers to build complex applications without affecting performance and startup times.

Hot reload. This feature allows developers to rebuild the application instantly, as if it were a web page. Moreover, Flutter’s hot reload is stateful, which means that developers don’t need to restart the application every time they change something — it just picks up where it left off. That makes Flutter design visible right away.

A full set of unique widgets. Flutter doesn’t rely on platform-specific UI components. It has widgets of its own. The framework implements Material Design widgets for Android and offers Cupertino widgets for iOS, but you don’t have to be strict with what goes where: Cupertino widgets will look and work amazing on Android and vice versa.

Flutter also implements Skia, an open-source 2D graphics library, for rendering the framework’s built-in UI component library.

Everything is a widget. In Flutter, every single element on the screen is a widget, which greatly simplifies application layout. Each separate widget specifies its own layout model, as opposed to having a single set of rules for all widgets. Because Flutter’s layout is relatively small, it’s easier to optimize, and because every UI element is a widget, the whole application layout becomes easy and comfortable to handle.

Number of packages available. Although Flutter is young, developers all over the world have been really excited about what it brings to the table. Therefore, there are already many packages available for Flutter, including tools for handling images, HTTP requests, WebSocket connections, various net protocol clients, push notifications, and embedded databases as well as for accessing device sensors and cameras.

Device compatibility. Flutter’s native widgets allow applications to remain compatible with operating system versions starting from iOS 8.0 and Android Jelly Bean. Whenever Apple or Google comes up with a new widget, it won’t break your application from the outside because Flutter doesn’t touch native platform widgets.

DISADVANTAGES

Immaturity. The first and largest disadvantage is how young the framework is. Although Flutter was announced ready for production use in May 2018, it needs to mature. There’s no way to know for sure whether the framework is going to succeed, and hence no way of knowing where apps developed with Flutter today will be five years from now.

Third-party support. We mentioned that Flutter already boasts an impressive collection of framework-based tools and libraries. However, there are still many third-party services that haven’t started supporting Flutter, including payment systems, tax automation software, and even Apple and Android TV. Many tools are now being developed and many more are yet to be developed, but it will definitely take time before Flutter catches up with React Native in terms of tooling and package availability.

Application size. Because there’s no bridge between the Flutter app and the device and all UI components belong to the application directly, Flutter apps end up being quite large. The average Flutter application weighs in at about 4.7 MB, which is substantially larger than most native applications. For example, Android native apps start from 1 MB.

Mobile application development platforms comparison

Now that you’re equipped with all the information you need, you can determine the best way to develop cross platform mobile apps in your case. You can choose either Flutter, Xamarin, React Native, or a native mobile app development framework.