Xamarin vs React Native the Context:
In this post, we are going to see everything that we should be aware of when we are looking into Xamarin Vs React native. Cross-platform development is very efficient in the hands of developers who are aware of what they are doing. For a new developer, this might prove very disadvantageous if not done properly. Before we compare Xamarin and React Native, let us see what can problematic with Xamarin and React Native.
The following are the drawbacks of cross-platform development.
- Performance – Parallel Run time.
- Application Size. – Usually, they are larger, except, react native as it is lightweight in size.
- Complexity. – Xamarin Forms is usually the worst implementation of cross-platform development. It is similar to WPF.
It is a Model – View View – Model UI architecture. It has two approaches, Xamarin Forms and Xamarin traditional. It has Ahead of Time compilation for iOS and Just in Time compiler for Android. Android’s Model View View Model is easy to understand.
This is the original Xamarin applications. This gives 65% of code sharing on the layers of the top. The code is written in C#. It is very good for platform-specific UI code written in C#. It also is used when there is a shared app logic code in C#. It gives fine grain control over the ser interface. It is good for the app that does not use complicated gestures, animation and design.
Here we have two parallel run execution environment. The first one is mono execution environment and the second one is the Objective-c execution environment. When we compile a Xamarin application, the mono environment, compiles the C# code to Microsoft Intermediate Language. And finally, the Ahead of Time compiler compiles the MSIL to the binary that can be natively run on Apple’s ARM-based processor. We can also keep in mind that iOS APIs are available through native bindings.
Now we arrive at the introduction of React Native approach. The following are the features of React Native approach:
- It has Flux and Redox UI architecture.
- This can be used for platform-specific and cross-platform development.
- We can include the third party React Native libraries and have them run with the React Native Runtime.
Disadvantages of React Native:
- It involves coding in two languages.
- Native embedding for new developers can be tricky.
Here, we have the Just in time compiler. Here, the mono execution environment runs along with the Android Runtime Virtual Machine. Here we have Android Callable wrappers that are used by Android Runtime to invoke managed code. And we have managed callable wrappers that are used by Android to invoke the managed code.
The main difference between the JIT and AOT compiler is, in case of JIT, we create the binary code directly in the Java execution environment.
it is also like Xamarin traditional and it has UI shared and written in C#. This allows about 95% of code to be shared but it also makes performance degradation due to the abstraction of one UI layer.
Here we also have a render layer between the Xamarin UI element and the Native UI element.
Invalidation of layout happens from the youngest child to the oldest parent. The Resolving layout happens from the oldest parent to the youngest child.
In Xamarin.Forms 3.0, we get layout compression. This will improve the performance of the Xamarin UI very much.
Let us look at some of the disadvantages of Xamarin Forms:
- This is actually a bad idea for developers with no much mobile development experience.
- The 95% code sharing will not work for projects that are very large.
- Highly prone to incorrect implementation.
The concept of Flux and Redox:
These concepts emerged with the concept of virtual DOM. The problem with the normal DOM is that, when we make a change to the DOM, we have to re-render the whole render DOM. But in the case of the virtual DOM, we have to render only the part of the DOM that undergoes the change.
Facebook’s Flux architecture makes the rendering with the help of virtual DOM possible. Here a Dispatcher is listening to various parts of the application and sets off the process of creating the new UI. It also has multiple stores to save the state of the application.
In Redox, we have only one store to save the state of the application. We have the concept of a reducer that has app state and action for input and converts that to the output of a new app state.
Under the hood of React Native:
- A react native app loads the JS code into the JS Runtime environment.
We have to keep in mind that React Native runs 4 parallel threads. They are listed below:
- UI Thread: Native iOS, Android UI rendering thread.
- Native Modules: This makes the platform APIs accessible.
- Render Thread: This is used to generate Open GL commands that are used to draw the UI.
- It produces full binary using the Ahead Of Time compilation for iOS.
- It produces the necessary binary using the JIT compilation during runtime.
- In iOS, React Native gives better performance compared to Swift when it comes to GUP and memory usage but it is inferior to the CPU performance of Swift.
- But navigation transition in React Native is not very good compared to Xamarin.
In Xamarin Forms, it is easy to understand the Navigation. It works well out of the box. It is easy to control it using the View Models. It is okay to not use Prism also. Xamarin is easy to learn and use.
React is good for animations. Here the animations will use the JS thread that will cause performance issues. But in the case of Xamarin, the animations are good as long as there are not many animations. But Xamarin traditional is as good as Native application development.
In Xamarin, .NET and Mono uses Garbage collector for memory management. Xamarin might have issues while handling frame memory.
Unlike Xamarin, React Native does the memory management Natively. It is better than Xamarin at managing memory.
Facebook’s Fresco image library configuration for Android is necessary for handling images in React Native.
Xamarin forms are not good at handling images. But Xamarin Native is good as native at handling images.
When it comes to the developer experience, Microsoft wins the game. Xamarin University content is very good. It can be used for learning Xamarin. It is used to Learn, Build, Integrate, Test, Iterate.
For building, developers can use Visual Studio. Integrating is also done by Visual Studio as all the NuGet packages are integrated and made functional with the help of Visual Studio itself. For testing, we have the hokey app and more. This is an area where Microsoft is ahead of Facebook.
Systrace with Android.
It also offers hot reloading, which means editing the JS as the app is actually running.
It is possible to use Android’s inbuilt device monitor and memory analyzer.
It uses Mono Soft Debugger and it is incorporated into mono runtime.
Profiling in Xamarin is very powerful. All the necessary tools is available in the visual studio.
Pros and Cons:
Here we can get a very high-level overview of the pros and cons:
Xamarin is Microsoft supported, this is something anyone building an enterprise application should keep in mind. Release cycles are more or less stable. Xamarin has the best development experience with Microsoft Visual Studio. To develop in Xamarin, we are going to use C# programming language.
React Native is written by FaceBook. Here the packaged application is lightweight. It is multi-threaded. Release cycles come more often then it comes in Xamarin but it needs to be kept in mind that react native upgrades are very prone to breaking.
There is one major risk involved with React Native, that is, if the developer infringes the React Native licence in any way, Facebook will void the licence for developing using React Native for the developer. This is a piece of very critical information to be kept in mind before starting to develop in React Native.
When it comes to deployment, it is easy to deploy the React Native applications. Once the application is released it has an instantaneous deployment.
Devops constitute, Build, Test, Distributor, Crash, Monitor and Learn.
The below is the Dev Ops for Xamarin. The code repository is held in VSTS. We also get the build and deploy using VSTS. This is one of the best Dev Ops experience that we can get. We also get application testing and beta testing. Setting up the build definition for real test deploy is very quick. Microsoft approach for Dev Ops is very powerful.
When it comes to React Native, we can do Dev Ops in VSTS also and it is done through custom scripts. Fastlane is a good idea for a good open source Dev Ops approach for React Native.
The winner is Xamarin Traditional. It is risk-free. It is very good at managing memory. It is built with C# and it is debugged using Visual Studio. Its development experience is very good and Dev Ops is also very good. It is the risk-free and fastest way of developing an app. It also gives a valuable MVVM pattern.
The important question after this post is which framework to choose. For answering that question we have to ask an important question. That is, are we web developer or are we .NET developer. If we are .NET developer we have to go with Xamarin and or if we are a web developer, we are better off with React Native.