21
loading...
Developing Performant Mobile Apps Part 3: Cross-Platform Apps
There was once a time, when there were more mobile operating systems than just Android, and iOS. Some of you might remember Windows Phone, Firefox OS, or Samsung’s Bada. Out of the 3 niche platforms, only Microsoft’s OS enjoyed decent popularity at its height. Back in the day, when companies went primarily native, one extra platform to develop for meant so much more work for everybody.
That is a part of a reason why we don’t have Windows Phone anymore. Third-party support was mostly negligible, because of all the extra resources required to target an additional platform for developers. A lose-lose scenario for both users, and businesses — because of all the money that was on this untapped market. Cross-platform development, even though not new by any means, is now in a state where it’s increasingly chosen as the go-to by more and more companies.
There are few frameworks, that are standard choices for quickly developing quality apps, which we will cover. First, it is important to distinguish between the two main types of cross-platform frameworks. Even though they achieve the same goal, they do it in an entirely different way. There are the Web-based frameworks, such as Ionic, that, in the simplest terms, package web assets to apps.
Then, there are frameworks, that make use of native elements. Examples of these frameworks include Microsoft’s Xamarin, and Facebook’s React Native. As it is often with life, there are shades of gray. This is where Google’s Flutter is. Flutter does not use native elements. Instead, it renders everything itself, thanks to the superfast Skia engine.
When it comes to using JavaScript to create cross-platform apps, apart from React Native, you also have NativeScript, and Weex, though they are somewhat niche options. Your best bet in this situation is to go for the industry-standard, Facebook’s framework.
In this article, we will be talking about Xamarin (and Xamarin.Forms), React Native, and Flutter because they are the most popular in their category. We will also be explaining how the name “Xamarin” is the song of the past, and what comes next.
Let’s dive in!
Xamarin is technically divided into three subprojects. There is Xamarin.Android for Android development, Xamarin.iOS for… you guessed it, iOS development. Both of them are often referred to as Xamarin.Native. Then there is Xamarin.Forms for when you want to achieve maximum code reusability across the targeted platforms. The code governing interactions, and the actions, will be the same.
The difference is in the code that determines how the user interface looks like. In one case, it’s specific to each platform. You have to write everything specifically for the platform you are targeting; iOS code will be different from the Android code. In Xamarin.Forms, almost 100% of the code that lays everything out on the screen is the same.
With .NET 6, some changes are coming regarding the structure of the projects. Xamarin.iOS, and Xamarin.Android will become .NET for iOS, and .NET for Android, respectively. Xamarin.Forms will become .NET MAUI, or .NET Multiplatform App User Interface. The name highlights the main focus of the platform: code reuse.
Twitter took things even further. What they’ve done is, adapt their mobile app using ‘react-native-web’ to run in the browser. It effectively allows them to use their mobile app as a web app as well, with less work than it would have been otherwise required.
React Native is by far the most popular solution to develop mobile applications using JavaScript. For a good reason. For better or worse, React is a standard choice for web development purposes. It is mainly thanks to its flexibility, and an overwhelming third-party support. The transition to React Native is a smooth one; much smoother than if you required them to learn e.g. Xamarin all of a sudden.
How does React Native work? Your JavaScript code gets executed, but it does not “speak” to the phone’s platform directly. That is handled by the bridge that talks to the native modules.
The solution enjoys huge 3rd party support, even from companies such as Microsoft. Not long ago, the company from Redmond shared their React Native for Windows, and macOS. The company even switched to the JS framework for their wider UWP app development purposes.
Developing user interfaces can be somewhat painful. This is a tedious task since everything you do, you need to do yourself. The set of shipped elements available out of the box is underwhelming, at best.
There is one thing to note in this section. As of the time of the writing, the library’s version is at 0.66. This means, that there was no stable release yet. Even though it’s battle-tested, and used by the biggest of the biggest, we are still waiting for the version 1.0.
The problem that many companies face is the “exotic” language that you are forced to use. It is the Dart programming language. Dart is not bad in itself. It’s a pretty good, and it’s relatively easy to pick up for Java, JavaScript, or C# developers. As with every new environment, however, the issue is that it forced everybody to learn a new way of doing things, again. One cannot reliably use Dart on the server side, as well, as it's the case with JavaScript, and C#.
Perhaps the greatest feature is the rendering engine, Skia. It is a complete 2D engine for rendering text, images, and more. It promises smooth 120 frames per second (!) without difficulties in the world where many frameworks aim “only” for 60 frames per second (in reality, 60fps is more than enough, however). Another great advantage is the enormous depth of provided elements out of the box. Material Design or not, it’s impressive.
Now that we know what are the main solutions available, what are the pros and cons of cross-platform mobile app development? Even though the solutions we mentioned achieve their goals differently, they share about the same pros and cons.
Cross-platform apps sit right in the middle between native apps, and PWAs in terms of all the aspects. There is a reason why, when facing uncertainty, people flock to the safe middle. You are likely choosing one of the safest options, without experiencing extreme effects.
Exactly, so your apps will be quick. Not quite as quick as native apps, not quite as slow as Web-based solutions. You won’t have to pack too much additional assets required, but you still will have to ship some; in case of Xamarin is the Mono code. Even then, the apps will be quick enough. Your users will likely not notice any “hiccups”, should they occur.
Sadly, not all native APIs are accessible to you. Usually, that won’t be a problem, however. If something is not available by default, there are third-party packages available for you. An excellent example for the community support is React Native. The amount of additional functionality brought to you by the community is overwhelming.
With great power comes great responsibility. 3rd party packages can introduce numerous bugs and security flaws. Let’s look at React Native, again. It’s not uncommon for vulnerabilities to pop up in npm packages.
In September 2021, a package enjoying big popularity got hacked, allowing for the execution of arbitrary code. Another example features the ua-parser-js package where a malicious party uploaded to the central base where it was downloaded by the unsuspecting developers. It enabled hackers to download additional files to your PC. Even though all the flaws were quickly fixed, the bad taste remains.
We will note, once again, that an app’s speed is lower. Of course, as Unity games run pretty well highlighting the potential of high-performance cross-platform apps, they are slower than they could have been.
Each framework has their unique pros and cons as well. React Native will feel familiar to React developers, you use JavaScript and TypeScript to write apps, though you have to do everything manually unless you use 3rd party packages. The documentation is rather poor, though the community has got you covered.
Again, we have to note that we are still waiting for the 1.0 release, which means we are yet to receive a truly stable version. Don’t be fooled, though. The biggest of the biggest rely on the framework to write apps, and it definitely is battle-tested.
Examples of apps developed using React Native
Flutter is an excellent project, wowing everybody with the speed of development, and the breadth of user interface elements available right out of the box. Apps are lightning speed as well. Sadly, the Dart programming language can be a bit of an obstacle. Concerning the design system, you are locked in to Google’s Material Design. While it is a flexible design system, it’s necessary to keep this in mind.
Examples of apps developed using Flutter:
Xamarin, or should we say .NET for iOS/Android and .NET MAUI, are great for big enterprises — C# is an immensely popular language already. The ability to develop for a multitude of platforms using the same platform is a great benefit. Being highly opinionated is always a good aspect in environments, where your product will be developed by many developers over many years, often without documentation.
One has to admit, however, that .NET isn’t as loved as the other two. Sure, .NET Core was the most loved platform in 2020, according to Stack Overflow. Xamarin, specifically, was not as lucky, placing much lower than Flutter (which came in third), and React Native. It was not particularly highly desired.
Examples of apps developed using Xamarin:
One thing is certain. No matter which one of these frameworks you pick, you will be able to develop a quality app, should you follow the appropriate process. If we are to make recommendations, we would definitely recommend React Native, and Xamarin, without hesitation. The nuances of all the approaches are far too deep to be discussed in a single article, however. If you have any more questions about the topic, feel free to contact Marcin Dąbrowski, our Chief Innovation Officer.
21