Cross-Platform Mobile Development in 2021
With the mobile platform already overtaking desktop and still growing, more developers than ever want to develop for it. However, with both iOS and Android having a decent market share, you’ll want to target both platforms. That’s where cross-platform development steps in.
This article will discuss cross-platform mobile development and cover the following structure:
- 3 Ways to Go Cross-Platform
- Pros and Cons of Cross-Platform Development
- Best Mobile Cross-Platform Frameworks
- Best Backend Services for Cross-Platform Apps
Keep reading to know more.
Mobile Cross-Platform Development
Cross-platform development allows you to target multiple platforms with one codebase. While it’s possible to target multiple desktop and mobile platforms at once, you’ll usually develop for either one of those categories.
3 Ways to Go Cross-Platform
There are 3 main ways to achieve cross-platform development on mobile:
- Web Apps
While a bit limited compared to the native mobile platform, the Web is still the go-to choice for cross-platform development. This is because it gives you access to all desktop and mobile platforms at once but at the cost of features and functionalities.
On the Web, you won’t enjoy native mobile benefits such as app store discoverability, increased performance, or features like file system or iOS notifications.
With that said, the Web is already a great fit for many apps and is constantly evolving. Moreover, given new Web APIs, increased PWA capabilities, and performance increases, it’s destined to rival native platforms soon even more.
- Hybrid Apps
Hybrid apps are a mix between Web and native apps. They allow you to create apps using web technologies with native APIs integration and the ability to publish on the platform’s app store.
They do have some drawbacks, though.
First off, they’re essentially web apps running in native WebViews that get packed into native apps, with some bindings to native APIs. This means inferior performance when compared to truly native apps.
Also, your access to native APIs will be limited to the APIs implemented by your hybrid app framework of choice. For other APIs, you’ll need to rely on limited 3rd-party plugins or your knowledge of native development to implement the proper bindings.
Still, hybrid apps are the fastest way to convert an existing web app to provide a native-like experience for your users.
- Native Cross-Platform Apps
Lastly, there are native cross-platform apps. You can make those with specialized frameworks that provide universal abstractions on top of native platforms. I’ll dive into them a bit later, but before that, let’s take a look at React Native to give you an example.
Thanks to such architecture, you get much better performance than what hybrid or Web apps can achieve. However, working closer to metal also has some drawbacks.
With frameworks like React Native, you’re still able to run any JS code you want, but there’s no way to use HTML or CSS. Instead, you have to rely on the framework’s alternative implementation of similar technologies, together with their smaller, closed ecosystems.
Other than that, when working with such cross-platform frameworks, you’ll need to know more about native development than if you were building hybrid apps.
General Pros and Cons of Cross-Platform Development
Knowing all the ways to do mobile cross-platform development, it’s easy to infer their general pros and cons.
Excluding the Web, which is a platform on its own, the benefits of using hybrid or native app frameworks include:
- Native-like UX – with access to native features, and a familiar app store install process, you provide a better experience to your users.
- Better performance – with truly native cross-platform frameworks like React Native, you can expect higher UI performance than with web apps.
As for drawbacks:
- Slower than native performance – even with “native” frameworks like React Native, or Flutter, you’ll still have to give up more or less performance. That’s due to custom runtimes like V8 in React Native or sub-optimal compilation results of Flutter. It won’t be noticeable in most cases, but it’s something to keep in mind for complex graphic or compute-heavy apps.
- Limited features – depending on the framework’s ecosystem and the size of its own feature set, you might still be limited by the lack of native APIs access.
- Required knowledge of native platforms – to implement additional native API abstractions or build the final app, you’ll need to have at least some knowledge of native development. It’ll still be faster than developing for both platforms separately, but it won’t relieve you of knowing anything about your target platforms.
Best Mobile Cross-Platform Frameworks
Now that you know the pros and cons of mobile cross-platform development, it’s time to learn about and choose a framework for the job. The list includes:
- React Native
Keep reading to know more:
Starting with already mentioned React Native – it’s one of the best choices for developers experienced with web development and React.
Because it’s been around for a while, React Native has a large community and ecosystem built around it. Thanks to that, tools like the Expo framework and tons of UI libraries and native API integrations exist to speed up the development process.
React Native has a lot going for it even beyond the ecosystem. Better performance with closer-to-native architecture, CSS-like styling system, Fast Refresh to iterate faster and more! All accessible from a language and UI library web developers are very familiar with.
First off, React Native apps are infamous for challenging debugging and testing processes (though it got better in recent years). They’re also slower when compared to many other native cross-platform frameworks – especially on Android.
Flutter is a UI toolkit coming from Google, meant primarily for cross-platform mobile development, but also the Web, and soon desktop.
Being relatively new (released in 2017), Flutter is an all-in-one solution for cross-platform development. From the SDK with dedicated Dart language, native APIs, and UI widgets, all the way to a rapidly-growing ecosystem – Flutter has it all.
So, if you’re willing to enter new, uncharted territories, there’s a lot to enjoy. First, the development will be fast and pleasant thanks to the modern Dart language, hot reload, and tons of ready-to-use UI components with a native feel. Add to that the compiled-native performance and access to tons of native APIs, and you’ve got a really compelling feature set.
If everything’s so good, are there any drawbacks? Of course, there are, but I’d say they’re rather compromises. The biggest one of which is immaturity.
Flutter and Dart are pretty new when compared to other cross-platform or native frameworks and programming languages. This means that they’re not as stable, can change rapidly, and lack quality guidelines or “best practices” on how to develop your apps. The ecosystem is also not that big though it’s growing rapidly thanks to Flutter’s popularity.
From the more technical side, Flutter apps are pretty heavy. This means that even though they’re close-to-native in performance, they are generally bigger in package size.
Also, you shouldn’t expect the built-in Material or Cupertino widgets to be ideal representations of their native counterparts. As it’s a Google toolkit, this will be more true for iOS rather than Android, though. However, if you’re after the exact native look and feel of the platform, you still have to go native.
Ionic is a hybrid app framework that allows you to convert your web app into a standalone native mobile app or build one from scratch.
Being the only hybrid app framework on this list, Ionic has a lot of unique features. The biggest one is that you can achieve a truly singular code base and native-like UX without changing anything in your web app.
It’s all thanks to the Capacitor runtime that powers Ionic hybrid apps. That’s what gets your web app nicely integrated into a native package, powered by the platform’s WebView. On top of that, you also get access to many official and community-powered plugins for tapping into native APIs.
With that said, Ionic goes well beyond just providing runtime for your web app. It also comes with a broad set of UI components and dedicated CLI to manage your projects.
Of course, Ionic’s biggest drawback is its hybrid approach with the performance hit and feature limitations that come with it. However, for simple apps, when converting existing web apps, or when fast development and single codebase are top priorities, it’s still a good choice.
Xamarin is a cross-platform development toolkit from Microsoft, building on top of C# (or F#) and .NET framework. Being released in late 2012, it’s one of the most mature frameworks out there.
Xamarin’s advantages stem from its maturity and underlying .NET platform. It comes with one of the largest collections of cross-platform APIs out-of-the-box through Xamarin.Essentials. It also provides native-like performance and UI through Xamarin.Forms and can also be used for platforms beyond iOS and Android.
If that’s not enough for your needs, you can always tap into the power of .NET. With tools like Xamarin.iOS, or Xamarin.Android, you can use native SDKs from the comfort of .NET alongside other first or third-party tools.
Xamarin is can be best compared with Flutter. Both frameworks use dedicated programming languages, both can go beyond mobile, and both provide cross-platform components and APIs. The difference is in their maturity and ecosystems.
Xamarin is one of the oldest cross-platform frameworks and has all the benefits and drawbacks that come with it. Unfortunately, this means not only established best practices, good docs, and high-quality development tools but also arguably small and a bit stagnated ecosystem. Compare that to Flutter, currently flourishing in its growing popularity.
Apart from that, Xamarin also has some technical drawbacks, though not that many. These include large app sizes due to the bundled cross-platform framework and tough development of complex UIs.
It’s also worth noting that Xamarin is going through a lot of changes lately. This includes the unification of the .NET platform (including iOS and Android native bindings) and the transition from Xamarin.Forms to .NET Multi-platform App UIhttps://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/(MAUI). These changes might be what’s needed to drive renewed interest in the framework.
When compared to other cross-platform frameworks, Unity stands out in a class of its own. That’s because it’s a game engine rather than a UI-focused framework.
When creating rich 2D or 3D experiences, going for a game engine is the best option. However, in the case of Unity, it also has other advantages. These include a visual editor, detailed documentation covering many features and APIs, and a large community with an ecosystem of assets, scripts, and other packages.
As a game engine, you should know that Unity isn’t the best choice for many use cases. With that said, if you’re looking at tools like Unity or similar, you most likely have a particular project in mind. However, even if that’s the case, there are still some drawbacks you should be aware of.
Building complex UIs, or achieving clean code architecture in Unity is problematic. For simple or mobile games that Unity is often used for, this shouldn’t be an issue. However, if you plan to grow your app/game in the future, you might be interested in more powerful tools, such as Unreal Engine.
Unity stands out when compared to other frameworks on this list. Not only with the experiences, it allows you to create or the number of platforms you can target with it, but also its licensing model.
While most cross-platform UI frameworks are free, that’s not so common among game engines like Unity. So although you can start for free, removing Unity branding or accessing more advanced features will cost you, depending on your revenue.
Best Backend Services for Cross-Platform Apps
Whatever cross-platform framework you’ll go with, you’ll need a good backend.
The backend is the “server-side” of your app. That’s where you’ll store and manage your data, authenticate users, command custom APIs, and much more.
Especially for cross-platform apps, where syncing the data is often required, a good, scalable, and easy to manage backend is a must.
Back4App is a low-code backend based on top of open-source technologies. It’s a BaaS (Backend-as-a-Service) platform, meaning that it provides everything you’ll need for your cross-platform app, allowing you to focus on the frontend.
Features of Back4App include real-time database, cloud code functions, user authentication, file storage, GraphQL and REST APIs, and more. Apart from that, Back4App stands out with its automated scaling, backup, constant monitoring, and great web-based management tools.
Pricing is flexible, includes a generous free tier, and starts at $5/month.
Firebase is an established, highly popular BaaS coming from Google. It provides many features, pay-as-you-go pricing, and has a large community build around it.
Firebase provides features you’ll find in most top BaaS services. This includes cloud functions, real-time databases, a great user authentication system, and more. Firebase also comes with great APIs and detailed documentation, which are a valuable resource to newcomers.
The service has a pay-as-you-go pricing structure, with a free Spark plan for new apps. Such a model is great for small, new apps but can get costly at scale. Also, the fact that Firebase is locked-in, being based on a proprietary, means that it’ll be hard to migrate from in the future.
Heroku is a PaaS (Platform-as-a-Service), owned and managed by Salesforce.
Compared to BaaS platforms like Back4App or Firebase, as PaaS, Heroku gives you more control at the expense of more work required. It provides you access to managed components like app containers, databases, add-ons, and more, for you to pick what you need and build from that.
With this in mind, Heroku is great when you have more complex needs but want to keep most of the simplicity of BaaS.
It has a flexible pricing model, with limited free tier and paid plans starting at $7/month.
With the number of cross-platform frameworks available out there, it’s important to choose wisely. Evaluate your current and potential future needs and make a decision based on them.
For some, converting a web app to a hybrid app will be the best and fastest way. For others, who need the best performance, consider building an MVP with one of the cross-platform frameworks to test your idea. From there, you might want to go native or continue on the path you’re on if that’s sufficient.
Also, remember about a good backend. Developing a cross-platform app will be so much easier when you don’t have to worry about managing the backend, thanks to BaaS or PaaS solutions.
What are the option to develop a cross-platform app?
There are 3 main ways to achieve cross-platform development on mobile that are Web App, Hybrid Apps, and Native Cross-Platform Apps.
What are the advantages and drawbacks of cross-platform development?
– Faster development
– Native-like UX
– Better performance
– Slower than native performance
– Limited features
– Required knowledge of native platforms
What are the best cross-platform frameworks?
– React Native
What are the best backend services to host a cross-platform application?