The state of cross platform mobile development in 2019

Jan Gerard Gerrits, CTIO Move4Mobile, February 13, 2019

Introduction

Since the beginning of app development for iPhone and Android around 10 years ago, lots of open-source and commercial frameworks that promised Build once, deploy many were released. With a single code base, apps could be rolled out for multiple platforms. In the early days, these platforms even included Symbian, Blackberry and Windows Mobile. With a market share of over 96% for iOS and Android combined these days, the other operating systems are no longer important enough to be supported. So where do we stand with cross platform mobile app development frameworks in 2019? Does it still pay off to use such platforms these days? This article gives an overview of the current state of cross-platform development and our opinion on its use cases.

An overview is never complete. The list below contains a series of frameworks with a large user base, or rising fast in popularity. Only open source frameworks were added to the overview. Platforms like Kony, OutSystems, Mendix and Betty Blocks are quite popular in the enterprise world, but they often come with a pretty fat price tag.

Xamarin

Xamarin is a well-known player in the cross platform market that has been around since 2011. Microsoft acquired the company in 2016 and ever since it is a popular development framework in the Microsoft ecosystem. Xamarin uses the language C# for development, and the UI compiles down to native components, making high-performance apps possible.

One of the big advantages of Xamarin is the current state of its ecosystem. It has superb development tools and cloud services that can aid developers, although the UI design tools could be better. 
It does take some time to get used to. Since the amount of tooling is vast, depending on the project complexity, configuring the project, the workspace and its dependencies might take some time.

Xamarin architecture

The base Xamarin SDK contains bindings from C# to the underlying native API’s of Android and iOS. If you would just use these, you would still have to build the UI separately for each platform. To overcome this, Xamarin.Forms was created, which can be used to create you UI once in XAML files. The UI created with Forms will look the same on all platforms. This is usually not preferred. When you need an app with certain complexity in the UI, it is probably best to leave Forms out. You would still have the advantage of building your business logic once. And this works very well on Xamarin.

Move4Mobile never selected Xamarin as a good candidate for our projects. Most important reason is that our apps need to be visually stunning, and different for various platforms. The extra time needed to build these UI’s within Xamarin would be too much overhead for our purposes.

Pros
- Forms is a very good platform for rapid prototyping or very simple apps where design is not top priority.
- High performance apps.
- The Xamarin base SDK is a very good abstraction of the native API’s.

Cons
- Large app size (minimal size is around 8M).
- Hard to use existing Android and iOS libraries.
- For visually stunning apps, Forms just doesn’t cut it

React Native

React Native first saw light in an internal hackathon at Facebook in the summer of 2013. The first public preview was released beginning of 2015. As of March of that year, the framework was open sourced by Facebook and grew in popularity fast. React Native is the native counterpart of the well-known React.JS JavaScript framework. Anyone with knowledge of this framework could easily create mobile apps using the same technique.

A lot of other cross platform app development frameworks already use JavaScript to build mobile apps. They use the language in combination with HTML and CSS to build UI’s that are interpreted by the browser at runtime. This leads to longer loading and render times, decreasing performance. In React Native every UI component is mapped to the underlying native widgets, making sure the UI performance of the app is much better. Interactions will take longer because they pass the JavaScript bridge at runtime. It is important for developers to keep the number of interactions between the JavaScript code and the native layer to a minimum.

React Native architecture

At Move4Mobile, we’ve created several applications using React Native, to our full satisfaction. The component-based structure, provided it is developed the right way, makes it easy to white label solutions or redesign parts of the application with minimal impact.

Pros
- Faster development time, when the required components are available as downloadable packages.
- Fast applications, compared to web-only frameworks.
- Component-based structure offers freedom in (re)design and white labeling.
- Large developer community with a lot of support and open source packages.

Cons
- Building your own native components and stable integration of them in the React Native source can be a hassle.
- Lots of poor quality open source downloads.
- The documentation of the platform could use a serious upgrade.

Flutter

Flutter is a relatively new player in the market. It was introduced by Google in May 2017, following a stable release beginning of December 2018. The new easy-to-use language Dart is used for Flutter app development. Apps can be released for iOS, Android and Google Fuchsia, a new Google OS that is in development.

Flutter is a reactive programming framework that uses a concept called widgets for UI development. It does not compile the widgets back to their native counterparts but draws them on a canvas using the 2D rendering engine Skia. This is a fairly new approach that seems to be paying off. The UI is very performant, and as a developer, you don’t have to worry about your widget not being backwards compatible, since it doesn’t use native components.

Flutter architecture

Flutter offers a nice catalog of widgets within their SDK. For Android, these widgets are themed with Material Design. For iOS, the theme ‘Cupertino’ can be applied to give the user a native iOS look and feel of the app.

Even though the platform is quite new and only stable for a couple of months, the developer community for Flutter is growing very fast and repositories of reusable widgets are popping up all over. At Move4Mobile, we expect Flutter to become a very important framework in the near future.

In an upcoming blog article, an in-depth review of Flutter is outlined with an overview of the advantages and the pitfalls of the use of Flutter.

Here are a few to start with:

Pros
- Hot reloading during development, while the app state is retained.
- Very fast apps: rendering of widgets in Skia, bypassing the OEM widgets.
- Easy to learn, with lots of good documentation available.
- Less code!

Cons
- Mobile only. No shared components with web applications.
- Limited availability of open source widgets (new platform, new community)

Popularity of various frameworks (Source: Google Developer Blog)

What about Cordova and Ionic?

Cordova, once named Phonegap, has been around for a long time. At Move4Mobile, we never believed in a web-only approach for mobile apps. The performance gap between natively compiled apps and their web-counterparts is large and we don’t believe this gap is decreasing fast enough for Cordova to become interesting enough in the foreseeable future. With the rise of other platforms like React Native and Flutter, Cordova becomes more and more irrelevant.

Ionic was built as a toolset on top of Cordova to create app-like user interfaces using a set of standard components. Its popularity grew fast between 2015 and 2017 but is flattening out now. Even though Ionic is a big improvement in development and user experience, its performance is lagging behind greatly. Therefore, development in either Cordova or Ionic has never been a serious option at Move4Mobile.

Cordova architecture

Progressive Web Apps (PWA)

A progressive web app is a mobile website with some additional functionality. There are a couple of requirements: it should run on SSL, it uses service workers and it contains a manifest file that describes some basic features like the app icon, colours and splash screen.

Most important part that separates a PWA from a website is the use of service workers. These are bits of software that can run independently from the site that triggered them. Think about functionality like loading data in the background, providing a connection to location information of the device or receiving push notifications.

Microsoft and Google are both very engaged in PWA’s and adding support for it in their browsers. Microsoft for obvious reasons: they missed the boat with their own mobile platform, so PWA support could provide them extra traction. Google even mentioned that the PWA is the future of app development! Apple lags behind with new feature support in its browser, but their effort seems to intensify.

A couple of major companies adopted the PWA in recent years. The results of customer retention are astonishing. Alibaba, Twitter, Forbes and The Washington Post are examples of successful implementations of PWA’s. For Alibaba, the PWA ensured a 74% increase in conversion (contact with a supplier) and the Add to Home Screen function resulted in an average of a 22% increase in active users. For Twitter, the PWA resulted in a 75% increase in the number of tweets, and a 20% decreased bounce rate. These are really good figures!

At Move4Mobile, we’ve created several PWA’s for our customers. In an upcoming article on this blog, these PWA’s will be reviewed. We’ll talk about reasons to choose a PWA over a real app, advantages of this technique, but also the technical limitations. A link will be added here once the article is available.

Pros
- No installation hassle (PWA’s are linkable by URL, since they are websites).
- Very low device footprint.
- High user engagement by adding the PWA to the home screen.

Cons
- Limited functionality compared to a native app.
- Limited support in browsers but growing fast!

Conclusion

Which platform should you choose? The honest answer: it depends… This sounds a bit dull, but it truly depends on what you want to achieve. The first question to answer is: do I really need an app, or will a mobile website suffice? What is your target audience? What are the device limitations?

Get in touch with us if you need advice on the strategy to choose. Move4Mobile specializes in developing innovative mobile oriented software solutions that empower users and businesses to reach maximum potential. Contact us at info@move4mobile.com or +31 (0)38 760 1750