React Native vs. Flutter
By: Amber Khan
Tags: Flutter, App Development, React Native, Mobile App Development, Development

One fact I learned very quickly in my development journey is this: unlike those brightly colored popcorn shirts from the 90’s, software frameworks are not one size fits all. There are tons of different technologies to choose from, all with their own sets of pros and cons, as well as communities of people who will defend their obvious superiority over competing technologies ruthlessly on any internet platform they can find. This, coupled with the fact that new libraries and frameworks pop up, rise and then inevitably fall in popularity what feels like every other week, can make the task of choosing the right one for your next project feel pretty overwhelming. In this blog I’ll go over some of the differences between two of the biggest fish in the mobile development pond: React Native and Flutter, and hopefully it can be of use to someone struggling to choose between the two.

Let’s start with some basic introductions.

What is React Native?

React Native is an open source mobile framework designed by Facebook in 2015. It’s been around for a few years and in that time has gained a loyal following of developers who have used it to create many successful apps we know and love today, such as Facebook, Instagram and Skype. It can be used for both mobile and web applications, and is built on top of ReactJS and JavaScript, allowing developers to use the power of React to create user interfaces with elements that look native to Android, iOS and UWP.

What is Flutter?

Flutter is an open source software development toolkit that can be used for both mobile and web applications. It was created by Google in 2018, and although it hit the scene much later than React Native, it has quickly made a name for itself as it significantly decreases the time needed to build an app compared to native development. Flutter uses an object-oriented programming language called Dart. Some popular apps made with Flutter are eBay, Alibaba and Google Ads.

Now that we have a basic idea of what these two different technologies are, let’s get into some of the major differences.

Architecture

When choosing a cross-platform mobile app development framework, it’s imperative to take its technical architecture into consideration. React Native architecture relies heavily on JavaScript bridge, or JS runtime environment architecture. The JavaScript code is compiled into native code at runtime. React Native uses Flux architecture from Facebook, and JavaScript bridge to communicate with the native modules, and this can sometimes result in poorer performance. Since React Native uses JavaScript, one of the most popular web development languages, it makes the tool easier to master and incorporate in projects for those already familiar with JavaScript and React.

Here’s an example of what a simple Hello World would look like in React Native.

React Native is easy to learn for developers experienced with React or Javascript

On the other hand, Flutter uses Dart, a language created by Google. While Dart is rarely used outside of Flutter, it shares similarities with both JavaScript and Java in syntax, making it easy to pick up for anyone familiar with those languages. Dart has many frameworks packed inside like Cupertino or Material Design, so it’s bigger in size and often does not require the bridge to communicate with the native modules. Dart uses the Skia C++ engine, which has all the protocols, compositions and channels needed to develop mobile apps. Simply put, Flutter has everything required for app development in the Flutter engine itself, unlike React Native.

Here’s what some simple code in Dart looks like.

Google’s Dart does not have separation of template, style, and data files. It is a relatively new coding language but is known to have well-written documentation so the learning curve is not too steep, especially for experienced Java and C++ developers.

Speed and productivity

One key characteristic of React Native that comes with both pros and cons is that it uses native UI components. A resulting disadvantage is that you run the risk of your application’s interface breaking when a new version of the operating system is released. Extra maintenance may be needed in the long run when working with React Native. On the plus side, any native updates will be applied automatically in React Native applications, unlike with Flutter, where you need to implement them manually. React relies on third party libraries, which could slow down the development process, but could also be a plus if you need to build customized user interfaces.

Flutter is known for its quick time-to-market speed. With its own rich library of components packed right in, you can utilize and apply these components across different platforms and operating systems, saving hours of development time. It was also specifically designed to generate user interfaces quickly based on Material Design rules, which helps speed up work as well.

Community

A strong sense of community is essential to help developers learn from one another and solve commonly found issues and bugs. In terms of community, React Native has the upper hand solely by the fact that it’s older, and has had more years to accrue an extensive, active community. Flutter has the disadvantage of being newer, yet with its rapid growth in popularity, its likely the Flutter community will reach the level of interaction and engagement of React’s online community very soon.

So who’s the winner?

There’s no objective answer to the question of which technology is better. Both Flutter and React Native are incredible tools that can help you build a cross-platform application quicker and easier than with other native frameworks. Both come with their own set of pros and cons, and while React Native has the advantage of being around for longer, some experts in the tech world have predicted that Flutter will surpass React Native’s prominence with time. As I’m no industry expert, nor am I Raven Baxter, I’ll refrain from attempting to predict the future and instead wait and see what the future brings.