0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Flutter vs React Native: Which is Worth Spending Your Time on as a Developer?

Posted at

If we go back 3 years ago, it must have been a dream to write apps for two mobile platforms simultaneously using a single code base. And it became true when Facebook introduced React Native (RN) to the framework scene in 2015. It didn't require a lot of effort to realize that writing an app once instead of writing it two times is much more cost-effective. Therefore, the big players like Airbnb, Walmart, Bloomberg, Skype switched to React Native framework for cross-platform mobile app development and made it popular.
Google also wanted a slice of popularity concerning cross-platform mobile frameworks. Hence, it released an alpha version of Flutter UI framework but, unfortunately, that happened much later in May 2017. An appearance of a similar solution certainly had its consequences on the prevalence of RN. It has born the uncertainty whether to use React Native or Flutter for cross-platform mobile development in 2018.
To save your time, we've prepared a brief infographic to compare React Native vs Flutter. Nevertheless, to receive a comprehensive analysis, you should read the article.

Flutter io vs React Native main differences

All you need to know about Google's Flutter vs React Native in 2 minutes
1.png

React Native vs Flutter: productivity

Besides popularity, one of the most important factors of choosing a framework for software development is the convenience of use. Here are 5 important criteria how we estimated the productivity of these frameworks:

  1. Hot reload support
    This feature allows to automatically relaunch the application in an instant. Besides, it fully retains the previous state of the app. A refresh occurs when the code has been modified or when a device is connected. Both Flutter and React Native support Hot Reload. The programmers that have already tried this feature point out that it makes the working process a lot easier and boosts your productivity.

  2. Code structure
    A serious difference of Flutter is that templates, data and style aren't separated throughout the code. Absence of separation might be unusual for React Native developers, from the other side, it's an advantage. Flutter uses Dart programming language. Concerning Flutter, UI layout that is built using it doesn't require any additional templating languages such as XML or JSX nor some special visual tools.

In result, it brings a significant time saving. That's because it's no need to toggle to a design mode and then think what to do in a program way and how. In Dart programming language, everything is done in a program way and available at one place.

Here's is an elementary instance of Dart that generates a green star figure and 'Hello World' text:

new Center(child:
new Column(children: [
new Text('Hello, World!'),
new Icon(Icons.star, color: Colors.green),
])
)

And here's an instance of a basic list element that creates a horizontal line between the items by means of programmatic approach.

return new ListView.builder(itemBuilder: (context, i) {
if (i.isOdd) return new Divider();
// rest of function
});

If you combine it with the new features of Dart programming language like Outline View and Flutter Inspector, designing a layout becomes even simpler.

  1. Installation and configuration
    Flutter has a better installation process in terms of convenience compared to how React Native installs. Besides, it provides a simple tool for system issues check up called the Flutter doctor.

  2. Supported IDEs
    Flutter has a lower number of IDEs that support it. Flutter IDEs include IntelliJ IDEA, Android Studio and VS Code. On the other hand, there are so much React Native IDEs which support it that can be a problem to choose the best one for you.

  3. Hardware-specific APIs
    RN provides geolocation and Wi-Fi programming interfaces. It offers an external solution for Bluetooth, camera, biometrics and NFC payments. However, RN lacks of good solutions for drawing with the customizable graphics. This can be only achieved by messing around with native code.

As for Flutter, the situation is currently unclear. A lot of hardware-specific APIs, excluding NFC and Bluetooth, are being developed at the moment. So the success of Flutter relies on how rapidly the hardware APIs will become available and how good they will be.

Read full article Flutter vs React Native

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?