Rapid App Development With React Native & Xamarin

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

These choices still present a distinct challenge for organisations assembling product teams to create new mobile applications. Do we build 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? When most experienced developers tend to specialise in one platform, finding an entire team who can work confidently across different platforms is problematic.

Meet Xamarin

Xamarin launched in 2011. It became one of the first products attempting to solve the crucial problem of bringing together different tech stacks for mobile app development. Xamarin 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. 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.

The development community behind Xamarin is strong. The company boasts an active developer base of over 1.4 million. Notable apps developed using Xamarin include Storyo (Android/iOS), easyJet (Android/iOS) and Snap Attack (Android/iOS). Conduct develops custom apps like ALS Compass using Xamarin.

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.

In 2019, Stack Overflow’s highly respected annual survey of over 90,000 developers indicates nearly 70% of the world’s professional developers now use JavaScript as their primary language. That’s over double the developers using C# (Xamarin) and over 10 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 a few short years, React Native already lays claim to an impressive list of apps, including parts of Facebook & Instagram, Airbnb, UberEATS and Walmart.

So what’s the catch?

After reading a list of key benefits, you would 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.

As you may suspect, 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, 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. Assuming 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. This is particularly frustrating when fixing bugs or making copy updates, 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 the impact on our development workflow was appreciable.

Xamarin Has A Noticeable Lag

From 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 smooth, uninterrupted experiences. If an interaction is even slightly clunky or simply not inline with user expectations, there’s 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.

Given 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.