Why should I switch to React native?

Cross-platform development 2020: Flutter, React Native and Xamarin in comparison

New frameworks appear every year with which apps can be developed more efficiently. In addition, the most popular frameworks alternate relatively quickly, so that it is difficult for app developers to keep track of who is ahead, where the communities are growing and where the journey is going.

We have therefore analyzed the current market for cross platform frameworks for app development and explain in detail which frameworks are the front runners, what they are suitable for and what the respective strengths and weaknesses of React Native, Flutter and Xamarin are.


Definition of terms: what is cross-platform frameworks all about?

Developers used to have it easy: you developed software in C and were happy when it ran on the one target platform for which it was developed. When it comes to app development, things get more complicated: the market is split between Apple and Google and accordingly each app has to be developed separately for both operating systems. Often you also want a web application with a similar range of functions, so it is necessary to implement the same content three times in different languages, namely once in Swift for Apple's iOS, once in Java or Kotlin for Android and finally in HTML, CSS and JavaScript for the web application.

Cross-platform frameworks are now supposed to solve this problem and at least generate the native apps for iOS and Android on the basis of a uniform code base. The idea is obvious and has been taken up for many years by new frameworks that are supposed to make it easier to develop apps for multiple platforms.

Advantages and problems of cross-platform apps and their frameworks

The most obvious advantage and reason for the whole development of cross-platform frameworks is to be able to serve as many platforms as possible with one code. This significantly reduces the amount of code that needs to be written and maintained. The same thing happens with the cost. However, there are a number of other advantages:
  • Projects become more manageable because there is less coordination between different native teams
  • Changes that are often made by the customer during the initial development of an app only have to be communicated, implemented (and coped with) once, which speeds up the development cycle and is easy on the nerves
  • The specialization (and the shortage of skilled workers) for native development is softened and staff fluctuations can be more easily compensated
  • The apps automatically get the "look and feel" of the native operating system, since UI elements are usually implemented in the style of the cross-platform framework

Cross-platform development also has disadvantages which, depending on the project, can quickly become an exclusion criterion:

  • Dependency on the cross-platform framework: the quality of the app stands and falls with the quality of the framework
  • Time lag: Changes in the native operating systems must first be "reprogrammed" in the frameworks, after which the app must be updated
  • Loss of freedom: What is seen as an advantage on the one hand can also turn out to be a problem if customers insist on an independent design. The developer gives up degrees of freedom, especially in the design: the framework takes over the rendering of the UI elements. Individual design is not possible for these or only indirectly
Whether the use of a framework for the development of an app is worthwhile has to be decided on a case-by-case basis. If the app is to use standard UI elements, does not contain customized menu animations or special requests, React Native, Flutter & Co. save a lot of time. In cases where you want to retain full control over all aspects of the screen process or where absolutely reliable performance is required, the detours that would have to be made with frameworks are often as long as programming native code, which is then simply cleaner and more stringent .

Market check: what is the most popular framework for cross-platform development of apps

Cross-platform frameworks at Google Trends

If you ask Google Trends about the most popular frameworks (in Germany in 2019) you get a very interesting statement: Flutter has now set itself apart and is now the most sought-after framework for cross-platform development of apps by some margin:

Google Trends comparison: react native, Flutter, ionic (framework), apache cordova, native script

The former leader React Native is, at least in a direct comparison of the search frequency with Flutter, on the decline. The same goes for Xamarin, even if each of the three frameworks has its strengths and its community and will therefore certainly not disappear from the smartphone screen anytime soon.

For the sake of clarity, we have taken the old stars with us: ionic and cordova have been an integral part of the app developer world for a long time and although these of course still have their justification, their star clearly seems to be falling and will probably fade in the not too distant future.

GitHub Stargazers of the App Frameworks

For open-source software, its popularity and developer participation can best be expressed by evaluating it on Github, the GitStars or "Stargazers", i.e. the number of developers who have pressed the asterisk. Naturally, frameworks are clearly found here for real open source higher numbers than for former (cordova) or proprietary (Xamarin), which do not appear at all.
Flutter86000
React native85000
ionic40000
cordova6000

In a direct comparison, React Native and Flutter are currently on par, with React Native of course benefiting from a 3 year lead. Altstar ionic is only halfway with a little over 40k stars.

Stackoverflow Survey 2019 in the category "Frameworks, Libraries, Tools"

The previous numbers were more of a statistical nature, without really giving a rating, so let's take another look at stackoverflows ranking, which technology is most popular according to the survey:

In the category "Frameworks, Libraries, Tools" lies here Flutter with over 75% in a remarkable third place.React native follows in 8th place with 62.5%. Xamarin can also be found in 14th place among the top 20 frameworks.

Which cross-platform framework should I choose?

When you are faced with the question of which of the frameworks you should familiarize yourself with, there are a few points to consider:
  • What are my requirements for the framework; what do I want to do with it? How flexible is the framework
  • What is the learning curve like and which programming languages ​​can I expect?
  • Which framework will prevail in the long term?
  • However, personal taste is also important: which syntax suits me and what hurts my eyes?
General advice is difficult to give here. React Native tends to be a bit easier to learn, but the declarative programming style is certainly not for everyone. Xamarin is perhaps the most mature framework with which you will have the least technical problems, for that you have to sympathize with .Net and Mircrosoft. Flutter seems to me personally forward-looking, even if you have to familiarize yourself with darts.

In terms of performance, Dart should - theoretically - have the edge because the code is copied into native ARM code. In practice, however, the difference is difficult to determine and ultimately probably minimal. So no favorite can be determined on the basis of performance.

To conclude, let's take a look at the advantages of the three most important cross-platform frameworks.

React native

programming languageJavaScript, TypeScript, JSX
UI componentsautomatically / forcibly native components
LicenseOpen source
developerFacebook
credentialsFacebook, Instagram, Pinterest, Skype, Tesla
React started in 2013 as a pure web framework and was expanded to React Native in the course of a Facebook hackaton. The framework allows the page elements to be described in a declarative code and then renders them with the native elements in iOS and android.

Although the framework is now running stable, the version counter is still at 0.61 at the beginning of 2020 - Facebook still reserves the beta status.

Benefits of React Native

  • Native UI components are automatically rendered, so the result is always a native UI look
  • Community: there is an immense selection of ready-to-use components that can be used to quickly combine functionalities
  • Direct access to native / hardware functionalities such as gyrometer etc.
  • Native code can also be integrated, therefore high flexibility
  • Hot Reload: Preview also possible without compilation
  • Free of charge with good support


React Native and JSX

This point is probably a matter of taste. Many developers like it striking, others call it a disease: React's JSX "language", which is technically a JavaScript extension and looks like this:

It looks like a template language, but something completely different happens: React translates the string into a JavaScript object, something like this:

And from there into native code via transpiler. In the end a clean affair, but this HTML and JS Misch-Masch until then you have to like it visually. Developers who like to separate form and function may find themselves more at Flutter.

React Native Reviews

There is a suggestion box thread started by the developers themselves, which shows very informatively what bothers developers about React Native (Dislikes about React Native), here is an excerpt:
  • The update from one version to the next is tedious
  • Debugging: The address of the exception manager is displayed in the log instead of the error line, which is then difficult to find
  • Hot reloading only works to a limited extent with stateless functional components


Flutter

programming languageDarts
UI componentsProprietary rendering engine with predefined icons
LicenseOpen source
developerGoogle
credentialsGoogle AdWords, Alibaba, Tencent, eBay, BMW
So Flutter is Google's answer to the cross-platform movement and like most of what the Silicon Valley giant does, Flutter is very well thought out.

However, Google poses the first small hurdle with the programming language: Flutter is programmed in Dart, which Google published in 2013. At first glance, another programming language is annoying at first, but at second glance, Dart is quite interesting and, given the origin and the enormous success of Flutter, certainly worth a look.

First of all, a dart makes it easy to get started, because it is related to the C family and the jump from Java is not too big. There are, however, two very decisive advantages over other programming languages

  1. There is a transpiler that translates Dart into JavaScript and thus bridges the gap to the web application and thus (like React) also enables the WebApp in addition to native multi-platform development
  2. The source code can be compiled just in time, so it enables hot reloading and thus significantly more jagged development and debugging than C # or Java
Let's take a look at the overall benefits of Flutter:
  • Flutter SDK, widgets, CLI tools: the tools for the framework are mature and diverse
  • What the React is its component is its widget to the Flutter: There are ready-made solutions in hundreds of widgets, but you can easily develop and modify them yourself
  • High reliability and excellent documentation
  • Dart is a very successful language with a promising future, which is probably more permanent and universal, even if it takes more time to learn, than JSX
  • free & open source


Xamarin

programming languageC #
UI componentsautomatically / forcibly native components
LicenseOpen-source, free for small teams
developerMicrosoft
credentialsUPS, Insightly, APX, Thermo Fisher
  • Good performance, comparable to React Native and Flutter
  • Xamarin harmonizes particularly well with Microsoft's much-used Visual Studio and offers a closed ecosystem with C # and .Net
  • Best support for the development of Windows apps
  • Declarative or instructive: Xamarin offers the choice
  • Xamarin.Forms offers an abundance of standard components that are very easy to recycle

This article was created with the kind advice of Lulububu Software GmbH




Log in to join the discussion