Rapid App Development With React Native & Xamarin

Bassem Farah

2 August 2017

These days, we’re fortunate to have a variety of choices when creating native mobile applications for the Apple (iOS), Android & Microsoft app stores.

However, this was not always the case. In the past, the only option for developing apps was using a mostly disconnected technology stack for each operating system.

PlatformTechnology Stack
Apple (iOS)Swift with Xcode.
AndroidJava with Android Studio.
Microsoft (Windows 8, Surface Pro)C++ with Visual Studio.
PlatformApple (iOS)
Technology StackSwift with Xcode.
PlatformAndroid
Technology StackJava with Android Studio.
PlatformMicrosoft (Windows 8, Surface Pro)
Technology StackC++ with Visual Studio.

Even today, this still presents a distinct challenge for organisations looking to assemble product teams to create a new mobile application. Do we assemble a team to develop the app for a single platform, or increase our budget by two or even threefold to target multiple platforms at launch date? The primary issue with this is that all of these distinct skillsets are generally used for unrelated purposes, and, experienced developers who can work confidently in more than one of these platforms are far and few between.

Rapid app development with Xamarin &I React Native. #xamarin #reactnative #appdevelopment

A post shared by Conduct (@conduct.hq) on

Meet Xamarin

Started in 2011, Xamarin was one of the first products attempting to solve the crucial problem of disconnected technology stacks for mobile app development. It has since been acquired by Microsoft, but remains open source and free to use commercially.

Xamarin works by compiling one central codebase into individual native apps for each platform, with the end goal being that once a developer learns how to use Xamarin, they can develop apps for Apple, Android and Microsoft devices at the same time, reducing both the time and resourcing required.

Xamarin code

The development community behind Xamarin is strong, with the company boasting around 1.4 million active developers, and growing. Some notable apps developed using Xamarin include Storyo (Android/iOS), easyJet (Android/iOS) and Snap Attack (Android/iOS).


Meet React Native

Created by Facebook, React JS has taken the internet by storm since it’s release in 2013. Initially created as a high performance web framework, Facebook announced the next iteration of their framework in 2015, only this time it was geared towards creating mobile apps.

In a similar way to Xamarin, React Native compiles one single codebase into various native mobile apps. The game changing feature of React Native, however, is the fact that  it uses JavaScript to achieve this.

Cats of react native demo benchmarking app

In April this year, Stack Overflow’s highly respected annual survey of over 64,000 developers showed that two thirds of the world’s professional developers now use JavaScript as their primary language. That’s almost double the developers using C# (Xamarin) or Java (Android), and over nine times the amount of developers who claim to use Swift (iOS) as their primary language.

A key selling point for React Native therefore is that it enables a large portion of existing developers to develop mobile apps without the steep learning curve impact of other frameworks.

After just two years, React Native already lays claim to an impressive list of apps, including parts of Facebook & Instagram, Airbnb (Android/iOS), UberEATS (Android/iOS) and Walmart (Android/iOS).


So what’s the catch?

After reading a list of key benefits, you could be forgiven for asking yourself why most apps are still created using traditional device-specific frameworks instead of newer, progressive technologies like Xamarin and React Native.

Well, as you may have suspected, there are some fairly significant trade-offs you’d have to consider before making a decision to roll out in this way.

React Native Can’t Do Everything

A common workflow in React Native is to develop a basic version of the app, and then add additional native code within Android Studio and Xcode after exporting it from React Native. This workflow ultimately requires experienced developers in the individual operating systems, somewhat defeating the purpose of a universal codebase.

An example of such features would include anything from table views to augmented reality and native SDK’s used in gaming.

Xamarin’s Compiling Speed

We have to point out that the time that Xamarin takes to compile its code into native apps is… not ideal. To see code changes reflected on our demo iPhone app, it took us an average of 17 seconds. Under the assumption a developer wanted to see a refreshed version of their changes just 15 times an hour, about 15% of that time would be spent waiting around. This is particularly frustrating when fixing bugs or making copy text changes, where a refresh count could easily increase to 25 or more times an hour.

Compare that to Swift and Xcode, which had an average compile time of just 2-3 seconds for our demo app. It might not sound like much, but it had a big impact on our development workflow.

Xamarin Has A Noticeable Lag

Throughout our own internal testing of Xamarin versus a true native iPhone app, we noticed a subtle lag when scrolling through a typical social feed application.

This is due to the way that Xamarin compiles into a native iOS app, which doesn’t always choose the most optimised code for performance. The result, much to our disappointment, meant that a simple list of images and text jumped slightly as we scrolled through.

People naturally gravitate towards happy and delightful experiences. If an interaction is even slightly clunky or simply not inline with the users mental model it has the potential to stifle adoption, engagement and even damage your brand.

React Native Needs Serious Performance Tuning

Facebook has a very well written document on the Performance of React Native and the limitations developers need to consider.

React Native apps compile into a hybrid between native code and JavaScript. Since most of the business logic of a React Native app runs on the JavaScript thread, it’s possible to experience “frame drops” at various points. Frame dropping refers to the perceived end user experience when a JavaScript task takes too long – resulting in the app appearing to be temporarily frozen.

If anything takes longer than 100 milliseconds, the user will feel it.

React Team

Given that the iPhone runs at 60 frames per second, anything taking longer than 16.67 milliseconds, will result in a frame drop. While occasional frame dropping generally goes unnoticed, if this happens during an animation for instance, it will feel sluggish to the user.


Conclusion

Xamarin and React Native are great for quickly prototyping basic apps on multiple devices, but once you introduce any serious complexity – some of the benefits begin to fall away.

The technology stack for your next mobile application should be considered on a per-project basis. If you want to quickly develop a simple app that runs cross platform, something like Xamarin or React Native could be a great choice.

It’s clear however, that high performance apps which feel truly responsive to users are a long way off being developed using anything but native code. If your project has the budget to support multiple platforms separately, this option will give you the best results for years to come.

next up HMR Referrals takes centre stage at iAwards Vic

Simon Krambousanos