Web Atoms for Xamarin Forms vs React Native
Tags: xamarinforms, reactnative, javascript, showdev
Published: 2021-02-18 04:56:11

# Xamarin Forms
Xamarin Forms provides platform independent UI framework, however the code is natively compiled, it gives you speed but deployment is lengthy process. Xamarin Forms makes it easier to create and deploy custom UI components using Custom Renderers.

# React Native
React Native on other hand provides quick updates but to achieve native performance, and for custom UI components, you need to write code in different platforms in different languages.

# Web Atoms

With Web Atoms, we decided to bring all features of React Native in Xamarin Forms to get the best of both.

## Native Component
We are always in need to create native components when framework components don't provide exact features we need. In case of React Native, we are left to create new components in Java/Kotlin for Android and in Swift for iOS. In Xamarin Forms, we can create custom components by combining existing platform neutral controls or write custom renderers in different platform but all in C#. 

In Web Atoms, you can create custom controls using JavaScript and in C#, (Writing in C# will require you to redeploy application in AppStore).

## JSX + JavaScript Support
Xamarin Forms does not have any support for JSX + JavaScript, React Native and Web Atoms, both provides support for JSX.

## Support for NuGet Packages
In Xamarin Forms you can reuse all existing NuGet Packages. There is no support for NuGet packages in React Native as it is not built on .NET framework.

In Web Atoms, you can reuse all existing NuGet Packages.

## Support for NPM Packages
Since there is no support for JavaScript, using NPM package is not possible. In React Native, you can use most of NPM Packages.

In Web Atoms, you can use most of NPM Packages as well.

## Live Reload in Production
Application deployment is becoming lengthy day by day, the queue to publish new update is increasing and also subject to approval.

Live Reload allows user to refresh the app version without having to download the app from the respective store.

In Xamarin Forms, it is not possible to provide live reload as entire code is natively compiled and shipped via store.

In React Native and Web Atoms for Xamarin Forms, you can provide live reload in production.

## Binding and MVVM Pattern
Xamarin Forms has excellent One, Two way binding and MVVM Pattern support.

React Native is purely functional and there are no inbuilt binding/MVVM concepts.

In Web Atoms, we have created Binding and MVVM support to reduce learning time, you can easily translate Xaml + C#  to JSX + JavaScript with exact similar concepts.

## Dependency Injection
Xamarin Forms has simple dependency injection and Prism provides advanced dependency injection.

React Native does not have dependency injection, but there are other frameworks in NPM in which you can achieve same.

Web Atoms provides Prism kind of Dependency Injection in JavaScript with decorators.

## Reuse Existing C# Code
If you have your backend and most of your front end application already has C# code, reusing them in Xamarin Forms is very easy.

Using existing C# code in React Native is not easy, either you will have to rewrite it in JavaScript or provide server side rest proxy.

Using existing C# code in Web Atoms is as easy as using in Xamarin Forms. In fact, you can use Web Atoms in existing app without having to rewrite most of its parts.

## Side by Side versioning
Since Xamarin Forms apps are compiled natively, you cannot allow users to switch the version, this is very useful in beta test, early adopter tests. For admin and investigation purpose.

In React Native, apps are mostly in JavaScript, it is possible to load JavaScript from server and it is possible to switch to different version for various investigation/debugging purpose.

In Web Atoms for Xamarin Forms, apps are mostly in JavaScript and they can be loaded from server, it is possible to use different versions.

| Feature                                                                                        	| Xamarin Forms  	| React Native            	| Web Atoms for Xamarin Forms 	|
|------------------------------------------------------------------------------------------------	|----------------	|-------------------------	|-----------------------------	|
| Native Component Implementation Languages                                                      	| C#             	| JavaScript, Swift, Java             	| JavaScript, C#                          	|
| JSX + JavaScript Support                                                                       	| No             	| Yes                     	| Yes                         	|
| Support for NuGet Packages                                                                     	| Yes            	| No                      	| Yes                         	|
| Support for NPM Packages                                                                       	| No             	| Yes                     	| Yes                         	|
| Live Reload in Production                                                                      	| No             	| Yes                     	| Yes                         	|
| Binding and MVVM Pattern                                                                       	| Yes            	| No                      	| Yes                         	|
| Dependency Injection                                                                           	| Requires Prism 	| Requires other packages 	| Inbuilt                     	|
| Reuse Existing C# Code, if you already have various  application logic already available in C# 	| Yes            	| No                      	| Yes                         	|
| Side by side versioning (Use different versions of Application  without uninstall/reinstall)   	| No             	| Possible                	| Yes                         	|
| Exception Line Numbers in Production                                                           	| No             	| Available               	| Available                   	|