Developing Performant Mobile Apps Part 3: Cross-Platform Apps 2023
Senior Content Marketer & Technical Expert
Tech Leaders Corner
2023-08-17 Updated to include Compose Multiplatform, .NET MAUI, and changes to React Native
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, so everybody developed just for Google's and Apple's platform and hardly ever for Windows Phone.
That is a part of the reason why we don’t have Microsoft's mobile OS 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. Luckily, cross-platform development, even though not new by any means, is now a breeze, and significantly easier than it had been 10 years ago.
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 .NET MAUI, and Meta’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.
In this article, we will be talking about .NET MAUI, React Native, Flutter, and Compose Multiplatform because they are the most popular in their category.
Let’s dive in!
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. The Expo toolkit does make it easier to develop React Native apps, but it's still not an easy task.
There is one thing to note in this section. As of the time of the writing, the library’s version is at 0.72.4. Even though it’s battle-tested, and used by the biggest of the biggest, we are still waiting for the version 1.0.
Developed by JetBrains, renowned for their developer tools, Compose Multiplatform emerges as a game-changer. It's a declarative framework that crafts captivating user interfaces (UIs) seamlessly shared across Android, iOS, desktop, and the web. For the uninitiated, "declarative" is akin to ordering a dish directly rather than explaining the recipe. The result? A streamlined app development journey.
Why Compose Multiplatform is Making Waves in Custom Mobile App Development
Unified UI Across Platforms: Craft your UI once, and watch it come to life everywhere – Android, iOS, desktop, and web. It's not just about time-efficiency; it's about delivering a consistent user experience.
Blend the Best of Both Worlds: Rooted in Kotlin Multiplatform, Compose ensures no compromises on platform-specific features and APIs. It's the perfect blend of cross-platform flexibility and native power.
Tailor-made Widgets: Design with precision using customizable widgets, be it pre-made themes or your unique visual flair. At the time of writing the framework boasts Material 2 components
Very little is known of the framework, and there are few resources on it yet, as it's still very much immature, and picking it in production could be risky. With that being said, the Developer Experience (DX) of using Compose is great, as it's fun to work with.
Flutter is one of the default options for creating apps for the upcoming Google’s new Operating System Fuchsia. It is pretty impressive, what can the framework do today. You may target iOS, Android, Linux, Windows, macOS, and the web using one codebase.
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.
Note: We now know that the Flutter team is working on a new engine, Impeller, which will eventually take Skia's place.
Understanding .NET MAUI
Building on the legacy of Xamarin, .NET MAUI (Multi-platform App User Interface) is Microsoft's latest offering in the cross-platform space. It allows for unified app development across Android, iOS, macOS, and Windows.
.NET MAUI: Key Features
Unified Codebase: Develop applications for Android, iOS, macOS, and Windows using a single C# codebase. This approach aims to streamline the development process while ensuring a consistent user experience.
Native Experience: .NET MAUI is designed to run code native to devices, leveraging the UI toolkits provided by manufacturers. The goal is to deliver a genuine native feel without the complexities of multiple programming languages.
Layout Engine: The framework introduces a layout engine to simplify the design of app pages, offering multiple page types to craft diverse user interfaces.
Hot Reloading: To enhance the development experience, .NET MAUI supports .NET's hot reload feature, allowing real-time updates without restarting the application.
.NET MAUI represents Microsoft's continued efforts in the cross-platform development space. While it introduces several enhancements over its predecessors, it's crucial for developers and businesses to evaluate its features in the context of their unique needs. For those experienced with .NET it will be a natural step forward, while if your company does not use .NET already, it might be a more suitable choice to consider another framework.
Pros and Cons of the Cross-Platform Approach
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.
.NET MAUI vs React Native vs Flutter
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:
.NET MAUI is 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. That could be due to the fact that .NET is more oriented towards more mature developers, and there is much less hype around it. While there were countless examples of apps developed using Xamarin, we don't have as many examples of .NET MAUI apps in the wiled, even though, e.g., Samsung lets you create apps for its Tizen OS using Microsoft's framework
Examples of apps developed using .NET MAUI:
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.
[LEGACY] Xamarin and .NET
Xamarin is the framework for developing apps with C#, and F# programming languages. In your apps, you may use almost all the underlying native APIs from the comfort of either C# or F#. Should some feature you are looking for be missing, and you can easily call Java, C++, C or Objective-C code, giving you a wide range of options.
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.
The future of Xamarin
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.
360° IT Check is a weekly publication where we bring you the latest and greatest in the world of tech. We cover topics like emerging technologies & frameworks, news about innovative startups, and other topics which affect the world of tech directly or indirectly.