Developing Performant Mobile Apps Part 3: Cross-Platform Apps 2023
Table of Contents

Developing Performant Mobile Apps Part 3: Cross-Platform Apps 2023

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.

Frameworks

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. 

When it comes to using JavaScript to create cross-platform apps, apart from React Native, you also have NativeScript, though it's a somewhat niche framework.

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!

React Native

A graphic showcasing how React Native works under the hood

One person once said, that if something can be done using JavaScript, it eventually will. As JavaScript’s importance grew over time, it became more, and more, apparent. Facebook’s developers had a big part in that, with their release of React, and React Native. The big benefit is the reuse of code that dictates what happens behind the scenes between the web app and the native app.

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. .NET MAUI all of a sudden.

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.

Compose Multiplatform

Layers of each Compose Multiplatform app

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

  1. 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.
  2. Harness Existing Android Skills: If Android UI rings a bell, you're in for a treat. Compose Multiplatform leverages APIs from Jetpack Compose, making multi-platform interface creation a breeze. Although for routing, and ViewModels you will have to pick another solution, such as PreCompose, it will all feel familiar
  3. 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.
  4. 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

Layers of Flutter

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.

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. 

Note: We now know that the Flutter team is working on a new engine, Impeller, which will eventually take Skia's place.

.NET MAUI

Layers of .NET MAUI

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

  1. 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.
  2. 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.
  3. Layout Engine: The framework introduces a layout engine to simplify the design of app pages, offering multiple page types to craft diverse user interfaces.
  4. 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

Pros

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.

Cons

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

React Native

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

  • Soundcloud Pulse
  • Facebook
  • Instagram
  • Walmart
  • Bloomberg

Flutter

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:

  • eBay Motors
  • Tencent Apps
  • My BMW
  • Google Pay

.NET MAUI

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

  • Escola Agil
  • Irth

Conclusion

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.


Liked the article? subscribe to updates!
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.

Like what you’re reading? Make sure to subscribe to our weekly newsletter!
Categories:
Share

Join 17,850 tech enthusiasts for your weekly dose of tech news

By filling in the above fields and clicking “Subscribe”, you agree to the processing by ITMAGINATION of your personal data contained in the above form for the purposes of sending you messages in the form of newsletter subscription, in accordance with our Privacy Policy.
Thank you! Your submission has been received!
We will send you at most one email per week with our latest tech news and insights.

In the meantime, feel free to explore this page or our Resources page for eBooks, technical guides, GitHub Demos, and more!
Oops! Something went wrong while submitting the form.

Related articles

Our Partners & Certifications
Microsoft Gold Partner Certification 2021 for ITMAGINATION
ITMAGINATION Google Cloud Partner
AWS Partner Network ITMAGINATION
ISO 9001 ITMAGINATIONISO-IEC 27001:2013 ITMAGINATION
© 2024 ITMAGINATION. All Rights Reserved. Privacy Policy