By Reinder de Vries, founder of LearnAppMaking.com
Remember Adobe Flash? It was the ultimate cross-platform development tool. Flash ran on any web browser or operating system — it could even run on early versions of Android. And then came HTML5, that did many of the things Flash could do…
Cross-platform development has long been the holy grail of building software. Most cross-platform development tools promise you can build your codebase once, and then run the app on any platform. Why build natively for every different platform, if you can build it once and deploy on as many platforms as you want?
You can see why this is so compelling. It saves you time and money getting your app to market, and you can cut your maintenance and development cost in half. And from a developer’s standpoint it’s also interesting. Developers get to use the tools they know — JavaScript or C# for example — to build for platforms they’re not familiar with.
In this article, we’ll take a flight through some of the new and established cross-platform tools. The goal is to inform you about the different available options for cross-platform app development in 2019.
[Whichever platform you choose, make sure you’re using a strong analytics tool to quickly find and fix any bugs or crashes without having to hunt through code. Start by checking out a free trial of Appsee, which records and replays crashed sessions in real-time.]
Let’s get started!
PhoneGap
Image credit: Adobe PhoneGap
PhoneGap, now owned by Adobe, is a cross-platform development tool that relies on web technologies to create apps for Android and iOS. You can use HTML, CSS, and JavaScript to build a mobile app with a native look and feel, without needing to write the same code twice for different platforms.
And that’s exactly where most cross-platform tools get in trouble. Take for instance a smartphone’s camera. The code you need to use that camera is different for iOS and Android. In fact, the programming languages you use to create native apps on those platforms — Swift and Java — are 100% different.
PhoneGap solves this problem by giving you a unified approach with web technology that has a native look and feel. It looks like a native iOS or Android app, but it isn’t.
Tools like PhoneGap also provide unified APIs to interact with hardware such as the camera, media library, file storage, and GPS. Their underlying code may be different between platforms, but the way they work are very similar. On top of that, tools like PhoneGap allow you to access platform-specific code by using plugins.
Xamarin
Image credit: Xamarin
Xamarin, now owned by Microsoft, is a cross-platform development tool that lets developers build native iOS and Android apps with the C# programming language. Xamarin apps are compiled ahead-of-time, which means they don’t suffer the performance drawbacks that interpreted or web-based tools have.
The Xamarin platform is a good example of the perhaps single greatest benefit of using cross-platform tools: developers can use a programming language they already know. C# is a programming language originally developed by Microsoft within its .NET platform. Developers familiar with the Microsoft environment for building software, such as C# and .NET, can easily pick up Xamarin development because the tools are virtually the same.
It’s worthwhile to investigate how PhoneGap is different from Xamarin. With PhoneGap, your cross-platform app consists mostly of a native web view that loads HTML content. Native UI such as buttons and toolbars are mimicked, which gives the appearance of a native app. Doing this, and interpreting JavaScript on-the-fly, often makes web-based cross-platform apps feel sluggish.
Xamarin apps are compiled, which means they run directly on a smartphones hardware and not in a web view. C# code is shared between native platforms, which means that most of the app’s code can be written once in a single programming language. And Xamarin apps also have access to native APIs directly, which means developers can use platform-specific frameworks like iOS’s ARKit.
React Native
Image credit: GitHub
React Native was originally announced by Facebook in 2015, and has gained in popularity in recent years. It takes an entirely different approach to cross-platform development by using JavaScript code to power native components.
Instead of imitating native components, or compiling to native code, it interprets JavaScript at runtime to display native UI elements, respond to user interaction, and to perform tasks. Developers don’t have to rely on slow web views to render their apps, and they don’t have to learn iOS development.
The rise in popularity of React Native, and the fact that it’s open source, meant that many developers built third-party components for the platform, which further sped up its adoption. And just like Xamarin and C#, web developers can easily pick up React Native because it uses the JavaScript language they already love.
A recurring theme in cross-platform development is “code once, deploy twice.” Can you really share 100% of the codebase between platforms? Depending on the complexity of the app you’re building, you can. React Native and Xamarin in particular have perfected the principle of the shared codebase, without the typical performance bottlenecks.
If you’re investigating cross-platform tools with the goal of building a cross-platform app, keep in mind that there’s always a chance that you’ll need to write platform-specific code. This means you’ll need native iOS or Android developers on your team, albeit not full-time.
Flutter
Image credit: Flutter
Flutter, built by Google, takes cross-platform development to a new level. It was first released in May 2017, and its first stable 1.0 release was made in December 2018.
Flutter is on the bleeding edge of cross-platform development, and it deserves special attention. It’s so close to the “code once, deploy twice” phenomenon, by completely sidestepping the native platforms. And it’s quickly gaining speed in the developer community.
The way Flutter works is by compiling Dart source code to native code, which runs on the Dart virtual machine. You can compare this to Xamarin, which runs native code directly on the smartphone hardware, and to React Native, which runs interpreted JavaScript code in a native app.
A particularly interesting feature of Flutter is called Hot Reload. With Hot Reload, changes to the source code of an app can be directly injected at runtime. It’s like reloading a web page, without needing to recompile the entire app. Hot Reload also retains the state of the app, so you can code and interact with the app at the same time.
Similarly to other tools, Flutter provides shared code for platform-specific features such as Android’s and Apple’s UI design, as well as the option to build platform-specific plugins. Platform-specific APIs and SDKs can be used natively.
Further Reading
In its own way, Adobe’s Flash could have been what Xamarin, PhoneGap, Flutter, and React Native brought to cross-platform development. We’ll never know if Flash was too early, or simply too late.
There’s a reason Flash is part of this cross-platform development story. Development tools are bound to change, as new concepts and paradigms rise in popularity, and others fade away. Who knows what cross-platform development tools get launched in 2019, 2020, and onwards?
As these tools get more advanced, the “code once, deploy twice” holy grail gets closer. Perhaps one day, we can really build an app once, and run it anywhere.
About the Author
Reinder de Vries is a professional iOS developer. He teaches app developers how to build their own apps at LearnAppMaking.com. Since 2009 he has developed a few dozen apps for iOS, worked for global brands, and led development at several startups. When he’s not coding, he enjoys strong espresso and traveling.