{{announcement.body}}
{{announcement.title}}

Cross-Platform Mobile Development 2020: Trends and Frameworks

DZone 's Guide to

Cross-Platform Mobile Development 2020: Trends and Frameworks

In this article, we discuss the viability of four options for cross-platform mobile app development: React Native, Flutter, NativeScript, and Xamarin.

· Web Dev Zone ·
Free Resource

Over the years, cross-platform mobile development has earned a reputation for being one of the most popular software development trends. And it shouldn’t come as a surprise. Adopting the cross-platform approach allows engineers to build apps for different platforms with a single codebase, thus saving time, money, and unnecessary effort. 

The Current State of Mobile

Let’s start from scratch and discuss the current state of the digital market. In December 2019, there were over 4.5 billion active internet users out there. On average, each of them browsed the net for 6 hours 42 minutes, which equals more than 100 online days each year.

Together, with the ever-growing desire for keeping the massive amount of online information at our fingertips, the above-mentioned statistics provide a logical explanation for why mobile applications are all the rage these days. As of 2019, worldwide mobile app revenues amounted to 461 billion US dollars, and by 2023, paid downloads and in-app adverts are believed to generate over 935 billion dollars in revenue.

Mobile Development Choices You Can Make

We’ve established that apps are not only popular among modern internet users but also quite lucrative for their owners. With these two factors in mind, I’d say there’s a fair chance your business plan involves building one. The trick is, however, choosing the right mobile app development path.

A decade ago, entrepreneurs had to decide which mobile operating systems their product was to cover: Android, iOS, Microsoft, RIM, or Symbian. Today, startup founders are facing a different dilemma. With Android and iOS accounting for 98% of the total mobile OS market share, it’s obvious that these two shouldn’t be overlooked. The question remains, which approach to building an app available on both platforms to adopt — there are three ways to go. 

One Native App for Each Operating System

The native solution, as the name suggests, assumes developing an application with the programming language native to a given platform: Java or Kotlin for Android and Objective-C or Swift for iOS. Being system-specific, native app development can be considered a mixed blessing. 

On one hand, it provides access to all features of a given OS, enables unlimited interface customization, and prevents any performance issues from happening. On the other hand, if you want to reach both types of users, you’ll simply need to build two separate apps, which calls for more time, money, and effort.

Progressive Web Application

Wait, aren’t we talking about mobile solutions? That’s true, but web apps can do the job of a mobile app pretty well. A good example is that of Progressive Web Apps (PWAs), which are basically websites that mimic the behavior of native apps (e.g. in sending push notifications, working offline, or simply being added to the mobile device’s home screen). Just like any other option, however, PWAs are not flawless, as they consume more battery and can’t access all features of a given device.

One Cross-Platform App for Two Systems

Last but not least, there’s cross-platform development, which allows covering two operating systems with one code. It doesn’t assume writing code with a native programming language; however, if you take a closer look at it, you’ll notice that it ensures a near-native experience thanks to rendering interface using native controls.

Is Cross-Platform Mobile Development the Right Choice for Me?

With at least three different ways to materialize your mobile app business idea, you might be wondering how to choose the most suitable one. Below, you’ll find a list of criteria that you need to take into consideration if you wish to make a truly informed choice.

Platforms

First and foremost, you need to decide if your app is going to be available on one or multiple operating systems. If you’re targeting a larger audience comprised of different platforms’ users, cross-platform development will be the go-to solution. If it’s enough for you to reach only Android or iOS users, on the other hand, providing flawless user experience with a native solution will be your priority. 

Complexity 

This criterion pertains to how far you want to go with the product. One way to address this issue is to clarify whether you’re aiming at testing your vision with an MVP or you’re ready to hit the ground running with a fully-fledged application. The other question you need to answer is that of your product’s functionalities (e.g. access to mobile device’s hardware or platform-specific functions).

Native Feel

The next thing to consider is how native your mobile application should feel to the user. Designing the mobile application with Material Design (for Android) or the Human Interface Guidelines (for iOS) in mind is what makes the digital product intuitive and user-friendly. But, you can achieve a similar effect with some of the most popular cross-platform frameworks.

Price and Time

One thing is for sure: native development is neither cheap nor fast. Building separate applications for different platforms requires employing a higher number of developers, which may cause a freshly-minted entrepreneur to exceed the tight project budget early on. At the same time, going for the cross-platform approach, you’ll end up outsourcing a smaller but equally professional team which is both a time-efficient and a cost-effective solution. 

Pros (and Cons) of Cross-Platform Mobile App Development

Let’s assume you’ve asked yourself all the above questions and you’ve arrived at the conclusion that native development is not your cup of tea. You’re leaning towards cross-platform mobile app development, but before the die is cast, you need to conduct a thorough analysis of this solution’s pros and cons. Afraid that the research will take too much time? Don’t worry, we’ve got you covered.

Benefits of Cross-Platform Mobile App Development 

You’ve probably concluded that we wouldn’t devote an extensive article to the cross-platform approach if it wasn’t advantageous to all sorts of businesses, ranging from startups to large corporations. And you were right in doing so. Choosing to build your digital product with a cross-platform mobile framework, you’ll enjoy the following benefits: 

Wider Market Reach

While each of us has their favorite mobile operating systems, you shouldn’t let personal preferences get in the way of your business success. Making your mobile application equally available to Android and iOS enthusiasts, you’re paving the way to the significantly increased revenues in the future.

One Codebase

As the very name suggests, the cross-platform approach allows you to write code that covers multiple operating systems at once. Of course, there will be cases in which handling platform differences will require more time and effort. Nonetheless, one codebase will surely influence all stages of the software development by allowing you to save money you’d normally spend on fixing and upgrading two separate sets of code.

Faster and Cheaper Deployment

In spite of requiring one codebase only, cross-platform app development still requires developers to think about ways to handle OS differences, such as UI or platform-specific store publication procedures most effectively. 

At the same time, one can’t deny that this approach will reduce the sketch-to-launch time. This, in turn, can translate into the possibility of saving a large proportion of the initial project budget, which you can later devote to perfecting your app according to the user feedback.

Platform Consistency

There’s no doubt that Android and iOS differ significantly in terms of both UX and UI. With cross-platform app development, most of these disparities are handled by default, which makes design and navigation inconsistencies less likely to happen. 

What Can Go Wrong 

Notwithstanding all the above-mentioned advantages, cross-platform app development is not all fun and games, as you may be already suspecting. The main drawbacks of this approach include possible lower performance and inferior UX and UI.

Cross-Platform Mobile Development Frameworks to Consider in 2020

Cross-platform mobile app development has both advantages and disadvantages. But, if you’re still reading this guide, the benefits outweigh the drawbacks from your perspective. And you aren’t the only one to recognize the value of this approach. In fact, the ever-growing demand for cross-platform mobile applications has resulted in a sea of specific tools available to businesses these days.

We know that choice overload can give you a serious headache. That’s why in this guide we’re focusing only on the most prominent cross-platform mobile development frameworks: React Native, Flutter, NativeScript, and Xamarin. 

To give you greater insight into what makes each of these tools a viable option for software development in 2020, we’ll examine them according to the following criteria: community support, programming languages they’re based on, code reusability, performance, interface, and prominent apps build with their use.

React Native

React Native is an open-source, cross-platform app development framework released by Facebook in 2015. Born as a product of an internal hackathon held in 2013, it has become one of the most popular alternatives to native development with 2,043 GitHub contributors and over 82,900 GitHub stars. The ever-growing community recognition is what makes it relatively easy to find a reliable and knowledgeable developer team to kick off your React Native project.

Learn Once and Write Anywhere

Based on React.JS, React Native utilizes JavaScript (which, by the way, is the most popular programming language according to the 2019 Stack Overflow’s survey) to provide both Android and iOS users with a truly native look and feel of an application. What makes this framework stand out from the crowd is that, if need be, React Native allows you to use Java, Objective-C, or Swift to write native modules responsible for the smooth handling of complex operations like video playback or image editing. 

While these components can’t be shared between the different platforms and require more work on the developers’ part, up to 90% of React Native Codebase can be reused. This value shows pretty well that the framework’s motto is not “write once, use everywhere” but rather “learn once, write anywhere”.

As far as the GUI is concerned, React Native can provide an almost native user experience thanks to using controllers native to both Android and iOS. It also employs the ReactJS library with UI elements, which accounts for speeding up the UI design process. Another interface-related factor that makes this particular framework worth considering when developing a mobile application is hot reloading that allows introducing changes to the UI without losing the state of the app.

Talking about what makes React Native one of the go-to cross-platform mobile development frameworks in 2020, it would be a shame not to mention the regular updates which help the framework respond to the developers’ and users’ needs better. Versions 0.60 and 0.61 introduced for example:

  • Multiple accessibility improvements.

  • A revamped, clearer, and more user-friendly start screen.

  • Fast refresh, which merges live and hot reloading, thus significantly accelerating the development process.

And mind you – that’s just a small sample of how well React Native is adjusting to the changing expectations.

Flutter

The second framework to consider in 2020 is Flutter. Announced at Google I/O 2017 and released in 2018, it’s still a newbie to the cross-platform world. Nonetheless, with over 80,500 GitHub stars and the vast majority of engineers dubbing it one of the three most loved frameworks in the 2019 Stack Overflow survey, Flutter is undoubtedly a force to be reckoned with.

How Dart Makes Flutter One-of-a-Kind

The programming language behind Flutter is Dart, which Google calls “client-optimized” and suitable for building “fast apps on any platform”. Introduced in 2011, it’s a responsive objected-oriented language that is considered relatively easy to learn for two reasons: one, it draws from C/C++ and Java; two, on Dart’s official website, you’ll find an extensive and pretty straight-forward documentation. It’s also worth mentioning that Dart comes with a substantial repository of Flutter-compatible software packages, allowing you to make your app even more complex.

One major advantage of Flutter is that it performs better than any other cross-platform mobile development framework mentioned in this article. This can be attributed to Dart’s native compilers and Flutter having its own set of widgets. The result? Faster and direct communication with the platform stemming from no need for a JavaScript bridge (as is the case with React Native, for instance). Speaking of widgets: with Flutter’s “UI-as-a-code” approach, they’re written with Dart only, which translates into increased code reusability.

Efficiency is inextricably linked to user experience and interface. As mentioned before, rather than relying on a set of native components, Flutter makes use of the visual, structural, platform, and interactive widgets for Material Design and Cupertino, all of which are rendered by the framework’s graphics engine. What’s more, Flutter leaves plenty of room for customization and emphasizes visual details, which makes it a good choice if you’re looking to design a pixel-perfect interface.     

When it comes to Flutter’s updates, the latest stable release took place on December 12. According to the official release note, it involved merging almost 2 thousand pull requests from 188 contributors. Among improvements introduced in version 1.12.13, there are:

  • Breaking API changes.


  • New features, such as the SliverOpacity widget and the SliverAnimatedList.

  • Fixes to crashes, customer critical issues, and performance problems.

  • Web support in the beta channel.

This is by no means a finished list, as Flutter’s goal is to make each of the four releases that happen every year act as a step towards greater usability of the framework.

Flutter is a young cross-platform mobile app development framework; thus, it shouldn’t come as a surprise that it hasn’t been adopted by as many fat cats as React Native. This doesn’t mean, however, that Flutter isn’t doing well on the digital playgrounds. As of December 2019, it constitutes the core of Alibaba, Google Ads, Groupon, Philips Hue, or Hamilton apps, just to name a few. 

NativeScript

If you’re about to start working on your revolutionary product, React Native and Flutter aren’t the only solutions out there. An alternative framework that may prove just right for your business at the beginning of the 2020s is NativeScript. 

This open-source framework was publicly released in March 2015 and quickly became a popular solution. For example, within just two months after its launch, it was awarded 3,000 GitHub stars and attracted the attention of over 1,500 followers on Twitter. As of today, there are over 700 plugins available on the market.

When building a cross-platform application with NativeScript, developers first write code in JavaScript and its superset, TypeScript. Then, the codebase is compiled to programming languages native to respective platforms. One major tech-related advantage of Telerik's framework is that it gives software engineers great freedom in terms of choosing the accompanying tech stack, as the framework works well not only with JavaScript but also with Angular and Vue.js. 

Speaking of different solutions, it’s worth mentioning that developers working with NativeScript can also utilize third-party libraries (CocoaPods and Android SDKs) without wrappers. 

Similarly to React Native, NativeScript allows for accessing Android and iOS native API, which has an overtly positive impact on the cross-platform app. The difference is, however, that while the former calls for building bridge APIs, the latter — in the words of TJ VanToll, Principal Developer Advocate for Progress – “injects all iOS and Android APIs into the JavaScript Virtual Machines”. Another similarity to Facebook’s framework lies in the code reuse which in both cases can equal as much as 90%.

As far as the technical aspect of the final app’s looks is concerned, Telerik’s framework stores UI in XML files with CSS styling. In fact, NativeScript’s approach to the GUI is well summarized by the “write once, run everywhere” motto. In practice, it means that while it allows for creating the interface with a platform-specific fell to it, the framework ultimately puts greater emphasis on code-sharing than on individual native styling. 

Xamarin

If you’re about to start working on your revolutionary product, React Native and Flutter aren’t the only solutions out there. An alternative framework that may prove just right for your business at the beginning of the 2020s is Xamarin. This open-source framework was created in 2011, which makes it the oldest one on this list, but it hasn’t gained momentum until five ago when it was acquired by Microsoft. As of today, it boasts a community of over 60,000 contributors. 

Technically speaking, to build a cross-platform mobile application with Xamarin, you need to have a good command of two technologies: .NET and #C. The former is the developer platform that allows the use of multiple languages (including C# programming language), editors, and libraries. 

Xamarin supplements the said platform with a set of tools that facilitate building cross-platform applications, e.g. platform-specific libraries, editor extensions, and XAML. The second technology is C#, an object-oriented programming language which is considered slightly harder to learn than JavaScript. Xamarin utilizes this programming language to write the entire app, from backend, through native API, to business logic.

Xamarin.Native and Xamarin.Forms

What distinguishes Xamarin from other frameworks is that it offers two ways of compiling cross-platform mobile applications: Xamarin Native (also referred to as Xamarin.Android/iOS) and Xamarin.Forms. The former approach prioritizes sharing business logic and, by making use of the native interface controls, enables almost-native performance. 

The latter focuses on sharing code rather than business rationale, which results in the increased proportion of the code reuse on the one hand (with Xamarin, developers can reuse up to 96% of their C# code) and decreased code performance on the other.

You might have already noticed that the performance and the GUI of the cross-platform mobile apps are closely related, so I probably won’t be surprises if I say that Xamarin’s two approaches to building apps have a major influence on the final look and feel of the interface. 

While Xamarin.Android/iOS allows developers to work with native controls and layouts, Xamarin.Forms is based on the standard UI elements, which allows for designing apps from a single API but at the same time might not be enough if you’re looking for an impeccably native look.

Is 2020 the Year of Cross-Platform App Development?

Yes and no — at the end of the day, it all depends on your business objectives, budget, and time constraints. Nevertheless, cross-platform is sure a direction worth considering, especially if we’re talking about React Native and Flutter.

The former is a mature and stable framework utilizing one of the most popular programming languages and boasting unwavering support of a large developer community. The latter, on the other hand, is a rapidly evolving technology which, regardless of being much younger than React Native, has already managed to win the hearts of many developers all around the world. 

Whether you choose React Native, Flutter, or any other framework, the cross-platform approach is bound to save you both time and money while ensuring a maximized market reach.

Topics:
cross platform app development, flutter, mobile app development, nativescript, react native, web dev, xamarin

Published at DZone with permission of Aleksandra Pytko . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}