Live & Hot Reload/Code Push Xamarin.Forms Apps with Web Atoms

History & Motivation

We have been using Xamarin.Forms for a couple of years, but business augmentation demanded more frequent app updates. We were assessing React native as an alternative, but the learning curve was very steep and our developers are considerably more familiar with MVVM approach up against the MVC method. Thus three years back, we ran a pilot by writing Xamarin Forms in JavaScript, it was relatively easy to fabricate and prototype swiftly. We now have three apps that are partly c# and partly JavaScript, as all-new screens are shipped through JSX

Native Limitations

1. Native code is fast, but for most business application needs, this performance vs the time need to build/deploy and maintain release cycle is extremely costly.
2. No side by side versioning, once the bug is found, fix is not available instantly.

Xamarin.Forms Limitations

1. Xamarin has an advantage of writing app in one language c# along with Powerful set of NuGet Libraries. 2 BUT, yes the big But is, the c# code is translated into native, so it requires same time to build and deploy the app.
2. Unfortunately, Android builds are still relatively slow.
3. Developing and debugging is painfully slow.

Deployment Limitations

1. iOS App approvals take longer, bugs do go out on production as we never have million dollar app budgets to fix all the bugs before rolling out.
2. There is no quick way to fix bug, a new upgrade reaches all your customers after couple of days. Most of the time, users don't have auto update enabled, they don't download new version, they are not connected to high speed internet and above all, all the major heavy updates in queue will delay your update.

React Native Limitations

1. React native was great alternative to bypass all slowness, but for C# developers, it has many roadblocks.
2. C# developers are more familiar with MVVM pattern, lack of MVVM pattern on React increases learning time.
3. Rewriting C# components and services on React will defy the purpose of making life easier.
4. Native integration in C++/Swift/Java is again problem for developers who have years of experience in C#.

Hot/Live reloading with Web Atoms

Language/Platform

1. You can use JavaScript + C#, JavaScript for your business pages/UI and C# only for high speed computation and other native integrations.
2. NuGet has probably million packages that you can easily use in Xamarin Forms. And all that can be used in JavaScript.
3. Web Atoms is designed by keeping MVVM in mind, so writing JSX with MVVM is extremely easy. For C# developers it only feels different in syntax, rest of things remain as it is.

Reuse

1. Since you can reuse all of your existing Xamarin.Forms code, time to shift to Web Atoms is really negligible.
2. You don't have to rewrite everything.
3. You can simply add nearly 20 to 30 lines of code to start using JSX instead of Xaml in Xamarin.Forms project.
4. You can reuse all your existing C# components in JavaScript.
5. You can create reusable components in JavaScript and use them in your existing components of C#.

Side by side versioning

1. Since web atoms javascript packages are deployed simply as nuget packages, you can easily create some strategy to upgrade/downgrade versions on your web server.
2. You can easily distribute private beta and offer different version to different customers to debug or quickly patch few bugs.

Advantages of Web Atoms over React Native and Native Script

1. Both, React native and Native script offers JavaScript , but native integration and high performing code needs to be written in Swift/Java/C++. With Web Atoms, you can easily write platform independent in C# and use it in Web Atoms.
2. You can continue to use your existing code/libraries written in C# easily without any hassle.
3. Debugging Xamarin apps is easy compared to native platforms.
4. Debugging JavaScript in Android is done via Chrome debugger and in iOS with Safari development tools.
5. JSX syntax in Web Atoms is exactly same as Xaml, you can perform all kinds of Bindings in JSX in exactly same fashion as in Xaml.

How does it work?

1. Your existing Xamarin Forms app is loaded natively in exactly same manner.
2. As soon as the app is launched, a new JavaScript bridge (V8 in Android and JavaScriptCore in iOS) is created.
3. Web Atoms module loader loads your scripts and provides integration between c# and your code.
4. Once the bridge is loaded, you can refresh the bridge inside the app via some code, or some trigger, without reloading entire app, the bridge loads new version of application JavaScript. This happens usually within 1-2 seconds.

Once built, only JavaScript is reloaded

1. You don't need to publish your app on app store unless you make any changes in the C# code.
2. You don't even need to close/restart the app to see new changes.
3. You can publish javascripts on the Wifi and you can also debug your app over wifi.
4. JavaScript reloading is little slow compared to native code, but for prototyping, for business applications, the time delay in JavaScript code is negligible.