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.
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.
|Apple (iOS)||Swift with Xcode.|
|Android||Java with Android Studio.|
|Microsoft (Windows 8, Surface Pro)||C++ with Visual Studio.|
|Technology Stack||Swift with Xcode.|
|Technology Stack||Java with Android Studio.|
|Platform||Microsoft (Windows 8, Surface Pro)|
|Technology Stack||C++ 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.
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.
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.
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.
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.
If anything takes longer than 100 milliseconds, the user will feel it.
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.
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.