What’s best in 2021: Ionic, React Native or Flutter?

Introduction

If you want your next application to debut across all major platforms, you’ve probably already considered using a cross-platform technology to help you deliver that result. You’re also likely aware of the trio of modern solutions mentioned in this article’s title. Each has many supporters, who will speak up for the one they’ve used previously! But wait a moment before making that choice.

Let’s think it through. That choice will impact your business, development team and users for years to come. Are you the one ensuring that a tech decision matches the business’s objectives and budget? Or maybe you are the lead technologist and, after all the shouting, the choice is yours (meaning you get the blame if the performance sucks)?

What you need is the ability to make a well-informed choice. Happily, you’re in the right place as we’ve already been through that learning journey for you.

This article will help you select the mobile cross-platform development technology that will work best.

At the end of this article, we make our recommendations. You could jump there and read it, but you’d be missing a detailed comparison of the three technologies, written to help you select the one that works best given your goals and circumstances. Our counsel?… Keep reading, get up to speed, then choose.

Let’s begin by reminding ourselves of the main attributes of each technology.

Ionic

First up is Ionic. A complete, open-source SDK for hybrid mobile app development created by Drifty Co. It runs with a mixture of native code and web code, providing full access to native functionality. The Ionic application is, therefore, just a web page running in a native app shell.

It utilises native hardware acceleration features in the browser (such as CSS animations) and optimises rendering (avoiding expensive DOM manipulation). This framework routes CSS animation transitions and transforms to the GPU, to maximise processor use.

So, when is Ionic useful? Historically, Ionic is used for hybrid app development, including well-known apps MarketWatch for stock-watchers, and Sworkit for fitness freaks. Its main benefit is the high reuse of code from web-apps written in Angular.

React Native

Next up is React Native, an open-source mobile application framework created by Facebook. It makes Android and iOS applications, allowing developers to use React and each platform’s native capabilities.

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. Instead, the DOM runs in a background process that interprets the developer’s JavaScript, while the framework uses native UI components wrapped into the React stack.

React Native is famous for delivering Facebook, Instagram and Skype apps for iOS and Android platforms. As a consequence, it is very stable and reliable. One of its stand-out benefits is implementing separate visual components for different platforms using platform-specific code.

Flutter

Like React Native, Flutter is a framework created by a well-known technology company, in this instance Google. It is the youngest technology on our list and, thanks to this, it is the most innovative solution. At the same time, Google has not yet fulfilled all of the promises it made regarding Flutter.

Informed by the experience of its competitors, Flutter uses its engine in a completely different way. Google wrote Flutter in the low-level programming language C ++, which means they have substantial control over the framework’s resources. Consequently, this technology has a more decisive influence on the performance and the appearance of an application. Flutter entirely abandons the native UI, taking full control by drawing every element itself, which means it has a greater say on what’s visible on-screen.

These benefits go hand in hand with a cost: developers must learn a less-popular programming language called Dart. Dart defines the application’s logic. When an experienced developer is writing, it’s no big problem, but it certainly increases the initial barrier to entry.

Amongst Google’s promises yet to be realised is a new sophistication for multiplatform apps. Flutter targets one common codebase for Android, IOS, Windows, Mac, Linux and web. It is currently possible for such an application to exist, but it is only stable on Android, IOS and Linux. However, in this article, we are looking at mobile platforms, and here Flutter already works exceptionally well. Even though the framework appeared on the market relatively recently, applications including Google Ads, Google Pay, Alibaba, and banking applications for ING and Nubank, have already seen success.

Comparison

You’ll probably look at this question from a different angle when considering a technology stack transition than when choosing the technology for a new application. Let’s begin by looking at it from a business perspective.

Business perspective

From a business point of view, the focus is on performance, cost of development, an easy way to swap developers if necessary, and maintaining the application as the project continues.

When creating a mobile application, we want it to be visually attractive and to run smoothly. In terms of performance, some frameworks make this much more difficult to achieve than others. Until a few years ago, cross-platform applications came nowhere close to the performance of native applications. Even though today’s most efficient applications are specifically written for each platform, frameworks such as Flutter and React Native have become almost equal. Flutter is closest to the ideal performance shown by the native applications. By avoiding obvious development mistakes, we have built extremely smooth applications that operate up to 120 fps. React Native is a bit slower, but still quite good. As the oldest cross-platform technology in this comparison, Ionic has the most difficulty maintaining a perfectly smooth operation.

Costs arise from initial development and any time needed to maintain the application and continue to develop it in the future. Flutter and React Native come out ahead from a cost perspective, as they both have quick reload features, making the development process very fast. What’s more, applications are easier to develop than apps made with other technologies. During the creation of Flutter and React Native frameworks, the best solutions were adopted; ones already proven by native technologies over the years. At the same time, troublesome or outdated solutions were discarded. Due to this, these cross-platform frameworks use current best practices and offer a modern way to create mobile applications.Ionic is a good option if you already have a lot of web code. Native applications in this category are the least cost-effective as it means building two applications, one for each platform. However, even when creating an Android-only application, the development process and maintenance may cost less with Flutter or React Native. This financial benefit comes from the technologies’ modern tools and frameworks plus less platform fragmentation. And there’s a bonus. Extending to additional platforms in the future will be much easier.

The last challenge is how easy it is to transfer the project from one development team to another. Sometimes it’s clear you are not getting along with the team that started developing your application. In this situation, as long as the contract supports it, you probably want to find other specialists to take over your project. Finding native developers is straightforward, and that’s unlikely to change for the next few years. However, in the case of Flutter and React Native, the situation now isn’t so different. More and more developers specialise in these frameworks every year, so finding a team to take over your project should not be too big a challenge. It’s not the same with Ionic as this technology has not gained similar popularity, and there is no indication that the situation will change in the coming years.

Development perspective

It’s widely known in the software industry that some languages, or even entire technology stacks, are more challenging to master than others. There are usually two reasons for this. The first is that the purpose of some technologies is to solve complex problems. The second reason may be inadequate solutions within the technology or a continuing legacy that hinders work.

Native technologies have been on the market for a long time. For many years, they have sought to provide easy and practical patterns that result in stable applications. Despite these established patterns, many of the changes result in an unfavourable legacy. The contemporary cross-platform technologies learnt from the experience of the native platforms, so, at the start, they could be based on best practices and avoid legacy issues.

Of course, you have to learn the technology first. What’s easiest depends on the developer’s existing experience in a relevant part of the industry. If you have experience as a web developer, then Ionic and React Native look to be the most straightforward options as you don’t have to learn everything from scratch. While Ionic is a web-hybrid technology, React Native also has links with web technologies. Both use Javascript which makes them feel familiar to web developers.

When it comes to learning Android and iOS separately, the entry threshold is much higher. First, both platforms use two languages. Android uses Java and Kotlin, and iOS uses Objective-C and Swift. In the case of Flutter, I place it midway between native and other cross-platform technologies. Flutter uses the little-known language Dart. Dart is very similar to Java and javascript. It is a relatively simple, modern and highly efficient language to work with. The Flutter framework is devoid of any quirks, so the learning itself is mostly very intuitive.

React Native and Flutter have both given rise to very dynamic communities. Active developers in these groups are closely involved in the technologies’ growth, although judging by Flutter’s fast expansion, this community will probably leave React Native far behind soon.

Finally, we cannot forget one crucial aspect for developers - how easy it is to get a job in a given technological stack. If you’re starting, it won’t be easy in any of these technologies. Companies usually accept developers with one year of experience as an absolute minimum and are often not interested in hiring juniors. If, on the other hand, you already have programming experience, it will be easiest to find a job as an Android or iOS developer because most companies still rely on native solutions. React Native will be next in line, followed by Flutter. However, the situation is starting to change, and we suspect that Flutter will gain more popularity over the next few years. With it, there will be more job offers in this technological stack than in React Native.

Architecture comparison

This section is for the more technical reader. Architectures can greatly impact both the ease of development and the feel of the resulting app. Take a look at the diagrams below to see the main differences.

So, what can we learn from this diagram? Amongst other things, we see that Flutter and React Native allow apps to feature more platform-specific elements than Ionic does. Also, we see that running code during development is a smoother experience when working with Flutter.

Cross-platform mobile technologies comparison

Let’s get down to the nuts and bolts. Use this table to discover if the technology you are considering will make you smile or present problems.

Wow, that was detailed! Still with us? If so, let’s swap lenses to look at the overall picture.

Pros & cons

See the main advantages and disadvantages of each technology.

Ionic

Pros:

• Independent platform
• Uses web technologies - broad and well-known ecosystem
• Looks the same on every device
• One codebase for everything

Cons:

• Smaller community
• Performance
• Worse user experience than fully-native solutions
• Lack of hot-reload-like mechanism - slower development process
• Complex native API access

Flutter

Pros:

• Hot Reload - faster development process
• Very fast rendering pipeline (120+ fps)
• Consistent across all devices including the older models
• Wide selection of widgets / UI components, including platform-specific ones
• Very customizable UI - perfect from complex interfaces incl. diagrams, animations, etc.
• Ideal for Minimum Viable Product
• Easy to scale
• Learn once, use everywhere

Cons:

• Smaller community but growing and very engaged
• Slightly smaller libraries (plugins) support
• Less familiar Dart language (but still simple and easy to learn)

React Native

Pros:

• Creating fully native mobile apps using JavaScript
• A large and active development community
• Speeds up development
• Easy to scale
• Widely used
• Learn once, use everywhere
• Better user experience than hybrid apps
• Fast refresh - faster development process

Cons:

• Engineers must have some mobile development knowledge
• Slightly steeper learning curve than Ionic
• Only a portion of the code can be reused between React and React Native web projects
• Since a native UI is used - older devices might need to be additionally styled
• Noticeably lower performance than native applications
• High battery consumption

This perspective reflects our understanding of developing different apps with all three technologies over the past decade. We know each case needs looking at individually, and we only ever make decisions based on a specific project’s variables.

If you’ve read this far and realise your choice is a complex one, we invite you to tap into AllBright’s expertise via a consultation. We can evaluate your project, perform a tech trial and then give you a detailed and validated recommendation that’ll carry your project past most of the hazards that await. Contact us at hello@allbright.io

Conclusion

The established wisdom was that cross-platform development tools save time and help you reach a large number of users, but they aren’t perfect and will never replace native app development. According to our experience, the new wisdom is that the gap has narrowed and now, cross-platform development tools are an excellent first choice for both startups and established businesses. Ultimately, it would help if you based your final choice on your businesses’ strategic priorities, circumstances and access to relevant skills. We hope we’ve helped you make a solid choice from the three contenders we’ve featured in this article.

What is our choice?

Over the years, we have been looking for the perfect technology to meet our needs as a team that wants to create the best apps possible. Our developers started with native technologies but were always looking for better solutions. Even though Ionic and React Native are great technologies, we couldn’t have chosen any other than Flutter. Our team consists of developers specializing in this technology who, like us, love Flutter for its exceptional capabilities. We have already built many applications with this framework and strive to be the best Flutter-specific software house on the market.

If you want to create an application in this technology, contact us. AllBright has a stellar track record in the development of cross-platform apps using Flutter. We’d be delighted to listen to your requirements and suggest ways we could begin a partnership as your mobile app developer. Contact us at hello@allbright.io