Ionic vs. React Native…or May Be Flutter to Build a Mobile App?

A few years ago, cross-platform app development was represented mostly by hybrid frameworks like PhoneGap and Ionic. React Native was a new breath in the market meant to facilitate the creation of native apps. Some time later, Flutter appeared on the stage. Did they win out? Let’s find it out from the following comparison of Ionic vs. React Native involving Flutter.

Mobile is huge these days. For both the development and support of iOS and Android mobile apps, you need to have separate dedicated teams. That’s one of the major drawbacks of native app development. Flutter, React Native and Ionic go another way. They allow you to get benefit from using a single codebase and create apps that will run on any platform. Nevertheless, they do not fall under the same category, because Ionic is a hybrid app framework. Before we compare these two solutions for mobile app building, let’s briefly refresh ourselves on the key terms: hybrid and native.

Hybrid vs. native vs. cross-platform

Hybrid apps are essentially websites embedded on a mobile platform through a WebView and styled to look like native. This is what Ionic provides out of the box. Hybrid app development can be achieved using HTML5, CSS or JavaScript and can execute the same code regardless of operating platform they are running on. With tools such as PhoneGap, hybrid apps can connect with native features of the phone/platform, including GPS, accelerometer, camera etc.

Native apps are – as the name suggests – native to the platform they operate within, created in the relevant coding language – Objective-C or Swift for iOS and Java or Kotlin for Android. They can access all of the platform’s features without restrictions.

React Native was created by Facebook to solve the problem of poor hybrid performance and inefficient process to create native apps. Hence, numerous other consumer-oriented tech and media brands, such as Vogue, Bloomberg, Netflix, and others turned to the framework. If you want details, check out our blog post where we compared React Native vs. native app development.

Flutter is the React Native’s main antagonist, which does not use JavaScript at all and also provides a single codebase for building native apps on iOS and Android. Let’s take a deeper look at these mobile app development tools.

React Native vs. Ionic Comparison against Flutter

React Native

The purpose of React Native is to make it easier to build native apps. Though it is rather young (initial release in 2015), we can state that it is a promising technology for cross-platform app development. The framework inherited the principles and partially the name of the JavaScript library that came out in 2011 – React. In our blog post React vs. React Native, you will learn their similar and different features, use cases, and other interesting things.

Generally, the working principle of React Native is simple – you write code in JS, which interplays with native components of a specific operating system. With that, no browser or even more WebView are involved in the process. The interplay between the native code and JS code is carried out via the so-called bridges that are separate for each OS. As for the UI components, you may leverage those provided by Facebook or created by the community of React Native enthusiasts.

Interest

From the outset, the framework captured the search interest of users who wanted to avoid difficulties associated with native app development. If you look at the chart below, you’ll see that the peak popularity of React Native was in the middle of 2018 followed by plateauing afterward.

React Native advantages

• Code reusability is one of the key advantages associated with React Native. In some cases, you can expect up to 95% of code reuse rate which significantly accelerates the development process and cuts costs.
• Performance of apps built with React Native is excellent and much better than Ionic. However, it still lags behind the native app’s performance due to the bridge between native components and the business logic.
• The user interface of React Native apps is akin to native products due to the use of platform-specific UI building blocks. In practice, you get an improved user experience regardless of the platform or device your app is installed at.
• A huge support community, as well as strict design paradigms, ensure the easy maintenance of projects built with React for mobile.

React Native disadvantages

• Delving into the native code is what engineers may face if there is a need to puzzle out the components written in a platform-specific language. In this case, it’s nice to have some expertise in Objective-C/Swift or Java/Kotlin.
• The lack of React background may be an obstacle for a smooth launch of a React Native project since the library itself, its writing approach, and JSX require some additional time to get in.
• React Native transforms the graphical elements automatically for each platform which may cause placement issues. In this case, you’ll have to tinker with the code to brush up your design.

Ionic

Ionic is two years older then React Native (initial release in 2013). The framework focuses on the creation of hybrid mobile apps, which require a special HTML rendering engine, the WebView, to let your app run on the device. It is often stated that Ionic is a successor of the once popular framework called Apache Cordova, but with improved documentation and powerful command line interface. Another technology that influenced the framework is Angular. Hence, if you have a background of the mentioned tools, you’ll have no trouble with creating apps using Ionic.

Interest

The search interest in Ionic has been raising since its alpha release in November 2013. In 2015, the popularity of the framework across the web remained stable with little fluctuations.

Ionic advantages

• With Ionic, you do not have to spend much time working with native languages or other platform-specific issues. There is a plethora of native-styled UI components, as well as useful features like interactive paradigms, typography, mobile components, etc. As a result, the development cycle is shorter.
• The framework is easy-to-learn, and the bulk of engineers are familiar with the technologies under the Ionic’s hood.
• Fast prototyping with Ionic is possible due to the preset templates not to mention a variety of third-party starter kits.
• Write once with Ionic and run anywhere is what you get in the full sense of this statement. You might need to make a subtle code change to run your app on any platform.

Ionic disadvantages

• Performance is the price you have to pay for the advantages of hybrid app development. Ionic is not the exception, and performance issues are possible in case of numerous callbacks sent to the native code.
• Native UI look is what you should forget about when using Ionic. Your app will look the same regardless of the platform/device it runs on.
• Use of browser entails a prolonged app loading and a deteriorated responsiveness at the CPU load.

Flutter

Flutter is two years younger than React Native (initial release in 2017). It is Google’s brainchild designed to shift cross-platform development to a higher level. Moreover, it is a basic SDK for the UI and apps of Fuchsia, Google’s new operating system. The creators of Flutter rejected the use of JavaScript and opted for Dart as an underlying programming language (by the way, also developed by Google). Another reason for that choice is the Dart’s compilation capability of both AOT (ahead-of-time) and JIT (just-in-time) that significantly improves performance.

An app built with Flutter does not use native UI components but consists of building blocks called Widgets. They can be Stateless (properties cannot change and should be final) or Stateful (might change during lifetime). Also, there is no bridge between the view and the codebase as in React Native. Every UI component in Flutter is rendered onto the Skia graphics engine. The engine is run inside the platform-specific Shell that hosts the Dart VM. This architecture provides fast and smooth UI performance akin to native apps.

Interest

The search interest in Flutter has been constantly growing since it was unveiled at the 2015 Dart developer summit.

Flutter advantages

• The lack of a bridge between the view and code significantly accelerates the app responsiveness.
• UI building components, Widgets, are rendered only when necessary that resembles a declarative approach applied in React.
• Stateful Hot Reloading provides you with an instant update of changes without restart and rebuild of the widget tree if the app state was lost.
• Dart supports both AOT and JIT compilation that improves app startup times and overall performance.

Flutter disadvantages

• Flutter is a young solution. This immaturity pushes off many potential adopters.
• Scarce ecosystem. Despite impressive support by Google and numerous helpful libraries for Flutter, the framework still lacks a rich set of ready-to-use solutions to cover most functionalities.
• Being a Google brainchild, Flutter allows you to enjoy building Android apps fast and efficient. However, design features of some widgets for iOS may not be up to date, which is an issue from a time-efficiency perspective.

Key differences in action

Creating Components

Ionic, as a hybrid development framework uses PhoneGap/Cordova to reproduce native components. Cross platform app development is more commonly undertaking using Cordova, ngCordova, Ionic, or a combination of two development frameworks.

On the other hand, React Native’s building blocks are reusable components compiled directly in the native platform. You get a consistent look and feel to every component. This component-based structure gives you all the speed, functionality and feel of a native app. You can apply React Native UI components to the existing app code without significant alteration.

As we mentioned above, Flutter leverages widgets as building blocks and is devoid of native controls or components. Widgets cover UI controls like buttons, text, media elements, and so on. And they all are implemented in the graphics engine.

Rendering

React Native functions best when writing apps in JavaScript. However, even when the app is written in another language, such as HTML and CSS, React will render features using native components. Rendering takes place in real-time – no need to recompile, rebuild, etc.; you see results straight away – instant, thanks to Live Reload. You also have the option to implement conditional rendering, depending on the state of your application.

Ionic also allows for immediate feedback, thanks to instant previews of your app on mobile devices. Any time you make a change, your app instantly refreshes.

Flutter uses Skia graphics engine written in C++. The framework renders widgets directly in the engine and does not use OEM widgets. That results in a smoother UI experience, which is unattainable for other cross-platform solutions. Also, widgets rendering is carried out declaratively – when their state has been changed. It resembles how Virtual DOM works in React.

Platform Adaptability

Hybrid apps run the same code and appear similar, irrespective of the platform. Ionic takes this into account and adjusts features to make cross-platform app development a smoother experience. So, you can write an app once and it can run anywhere with minimal changes.

React does not want developers to ignore platform-specific logic and frameworks. Native app development requires more work, which is one reason why React Native was created, to make it easier to build native apps. Most components have a platform-specific logical equivalent, so it shouldn’t take much work to adapt features from one platform to another.

Most of the Flutter ready-to-use widgets implement the material design concepts. For iOS-style design, developers can use Cupertino widgets. These sets of building blocks allow engineers to accelerate the pipeline and easily render the UI on both mobile platforms. However, widgets are not adaptive, and the platform-specific adaptation should be carried out manually. As for platform-specific functions like a camera and sensors, developers can reuse existing code written in the native language (Java/Kotlin or Swift/Objective-C) and implement it in Flutter.

Language Stack

Flutter rests on Dart, a relatively young programming language (first unveiled in October 2011). It supports most of the object-oriented concepts, so the JS or Java-savvy engineers won’t have much trouble in understanding its syntax. Dart compiles to binary code. For this reason, you can achieve native performance as if your app is built with a native programming language.

Ionic is based on Angular, a JavaScript framework, which uses HTML templates for its views. Logic and views are separated when building apps in Ionic. Cross platform development is somewhat easier using Ionic since much of the basic underlying framework remains the same – although many ‘native’ developers would argue that is why native, not cross platform/hybrid apps are more finely tailored to specific platforms and devices. Essentially it is angular app with concepts from native world.

React Native is also based on a JavaScript framework, using JavaScript code that resembles HTML, but essentially isn’t. It is known as JSX, which is something most developers are comfortable with, which results in a native app development using smooth UI components.

Testing on device

Ionic allows for instant previews on smartphones and browsers. It also instantly refreshes if you make any changes.

React also shows you the results of modifications as you make them. Besides, it offers a set of debugging tools to save hours when resolving defects or problems within an application.

Flutter has built-in support for both unit testing for logic, and widget testing. Besides, you get a rich set of testing features and great documentation on testing Flutter apps.

Community

Working with any open source framework makes it worthwhile checking how healthy and supportive the community/ecosystem is around the technology. Remember, both Ionic and React Native have emerged from established ecosystems – Angular and React – so there are healthy, supportive online ecosystems. Flutter’s popularity is gathering momentum, and the size of its community is already impressive. However, it still lags behind React Native.

That’s what GitHub stars say in this regard:

• React Native: 76.5K
• Flutter: 61.8K
• Ionic: 37.8K

Popularity

In terms of popularity, each framework does not suffer from a lack of search interest. However, the metrics differ a lot if compared. React Native joined the race while Ionic was several laps ahead and beat it at the turn of 2016/2017. The interest in Flutter was always high and increased even more in the last few months. October 2017 is the time when all three technologies equaled, but then they parted: Ionic – downwards, React Native and Flutter – upwards.

Which is better?

The tools you use for mobile app development is a matter of personal and team preference. For those who prefer creating native apps, React Native is more effective, thanks to native rendering, making apps quicker and more responsive for the end-user. Besides, it reduces the time of app development.

Flutter seems to be a worthy rival to React Native and overcomes it in performance, documentation support, as well as less dependence on third-party libraries. It has potential and will augment it, especially when Fuchsia enters the market.

Whereas, truly hybrid development platforms, such as Ionic, are more prone to speed and usability issues that frustrate end-users. UI is rarely up to the same standard as native apps or apps created using React Native.

Saving time and money is usually one of the reasons why companies choose hybrid development platforms. However, they can backfire as for the time spent on fixing problems and bugs. This issue seems to be less prevalent amongst those who develop apps using React Native.