Last year, we launched a React Native starter kit called Flat App. The suite includes a flat style UI design and Redux and NativeBase components for iOS and Android. Flat App is basically an interface design style designed to reduce the use of style elements. It is well known that developers prefer flat design because it makes interface design easier and more efficient. As an experiment, we successfully rewrote this app using Google’s Flutter, and the results were really great.

In this article, I will compare Flutter and React Native in terms of language stack, UI, style and other aspects. I’ll also discuss some of the challenges we encountered in rewriting the Flat App and how we solved them.

Flutter is a platform built by Google to help us quickly build apps that can run on Android and iOS platforms.

Flutter is different in that it has a C/C++ layer, but most of the system is implemented with Dart, and developers can easily read, replace, or remove Flutter. This provides the developer with flexible system control.

React Native is a JavaScript library, but Flutter is an SDK that uses a programming language called Dart.

Although JavaScript was originally developed for Web development, today the JavaScript ecosystem has grown so large that it can be found in many places.

React Native compiles dynamic JavaScript code into Native views at runtime, and the rest of the code is run through virtual machines embedded within the application.

Dart is a general purpose programming language developed by Google. It can also be used to build Web, server, mobile, and iot device applications.

Dart is influenced by a number of programming languages, most notably Java. Java programmers should easily see the similarities between the two languages.

Dart is an object-oriented programming language that supports abstraction, encapsulation, inheritance, and polymorphism.

The Dart program can run in either of the following modes:

  • In Checked mode, it enables dynamic type assertion. If your code contains static types, you can turn on type assertion. The Checked mode is recommended for development and testing because it helps catch errors in your code when there is a type mismatch.

  • Production mode is the default mode for the Dart program. It provides a faster way to run programs.

The Dart example:

int fib(int n) => (n > 2) ? (fib(n - 1) + fib(n - 2)) : 1;

void main() {
  print('fib(20) = ${fib(20)}');
}Copy the code

Despite its strong community influence, Dart is still dominated by other mainstream languages such as JavaScript, so few developers know about Dart.

But that is changing. Thanks to Flutter for releasing Beta 1! When I write this article, the Flutter of lot code library (https://github.com/flutter/flutter) has received 18000 star!

Flutter has a functional equation framework, mainly inspired by React. Although Flutter is written in Dart, it also borrows some of the best features of React to help developers build beautiful cross-platform mobile applications.

In React Native, styles are defined in JavaScript. React Native all of its core components accept a prop called Style. Style names and values are often similar to CSS on the Web. The only difference is that in React Native, names are humped. Therefore, to define the background color, you need to name the style backgroundColor, not background-color.

If we use stylesheet.create to define multiple styles in one place, the code becomes clearer. As applications become more complex, this approach can be very useful.

This pattern difference is more pronounced in Flutter than in React Native. This can be seen from the example given below.

React Native code defines font styles and other text properties.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View style={styles.greybox}>
        <Text>Lorem Ipsum</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  greybox: {
    backgroundColor: #e0e0e0,
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
  }
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);Copy the code

If we wanted to implement the same pattern in Flutter, it could be written as:

var container = new Container( // grey box child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: W900, fontFamily: "Georgia",), width: 320.0, height: 240.0, color: color.grey [300],);Copy the code

The React Native application architecture is called Flux. Facebook uses Flux to build client-side Web applications. Flux uses a one-way data stream. Flux is more of a pattern than a formal framework. Anyone can easily use Flux without having to write a lot of new code.

One-way data flow is the main concept of Flux.

Dispatcher, Store and View are separate nodes with different inputs and outputs. An Action is a simple object that contains new data and a type attribute. The View may generate new actions and propagate them through the system in response to user interactions.

Flutter has a Dart library called Flutter Flux. It is a one-way data stream inspired by RefluxJS and Facebook Flux.

Flutter Flux is not officially supported by the Flutter team and is only an experimental package.

The Flutter Flux is almost identical to the React/React Native implementation, but uses Flutter instead of React.

Flutter Flux implements a one-way data flow pattern, consisting of Action, Store, and StoreWatcher.

Action Modifies the data stored in the Store. When Store data is modified, the View is rerendered.

Flutter widgets and other interaction sources respond to user input by calling actions.

Using React Native is like using HTML without the CSS framework.

Unlike the Flat App version of Flutter, we had to use a third party library when using React Native because React Native did not have its own UI component library.

We used components such as NativeBase, which is an open source UI component library that we created ourselves. React Native Elements, React Native Material Design, and Shoutem are other UI libraries to consider.

Flutter provides its own UI components, as well as an engine for rendering components on Android and iOS platforms. Most of these components conform to the Material Design style.

We are using the built-in components of Flutter to develop the UI of the application. These components are called widgets. We just need to use the right widget and pass the right prop to the widget, and we can get the UI we want.

Each widget in a Flutter has its own property definition and can be nested within other widgets. Widgets can also invoke properties of the parent widget.

The Flutter version of the Flat App is better than React Native because it has the least interaction with Native code. This is why the Flutter version of the Flat App animation runs faster.

In React Native, we can also bridge Native modules and use Native UI components. But this is not possible with Flutter, because Flutter has its own rendering engine.

This is actually why Flutter has yet to support Google Maps.

Here are a few examples of Flutter widgets:

Drawer is a Material Design panel that slides out horizontally from the edge of the Scaffold to display navigation links for applications. The following is the code of drawers of Flutter Flat App and the code SideBar of React Native version:

Inkwell defines a Material rectangular area that responds to touch. We use this widget to create a ripple effect that appears when the user touches the area.

In React Native, we didn’t need to create a whole new component to achieve this ripple effect. React Native’s TouchableOpacity has this effect by default.

As the name suggests, GestureDetector is a widget that detects gestures. GestureDetector will attempt to identify gestures corresponding to non-null callback.

If the widget has children, it is resized according to the children. If there are no children, they are resized according to the parent.

As shown in the code below, the GestureDetector widget will be resized based on the Container widget.

GestureDetector is equivalent to TouchableOpacity in React Native. Therefore, we don’t need to create new parts for it.

DefaultTabController is the DefaultTabController widget that is used when no widget is explicitly specified.

DefaultTabController is used to share a TabController with a TabBar or TabBarView. We use this widget to share the TabController with the TabBar.

You can use this widget when it is inconvenient to share an explicitly created TabController, because TabBar widgets are created by stateless parents or different widgets.

In the Flat App of React Native, we use Tab Navigator to perform the same operation.

React Native has a huge community behind it.

This is why React Native has more third-party libraries and plugins than Flutter.

In the Flat App of React Native version, we used many different third-party libraries, such as Calendar, Carousel and Modal.

We integrated the Flat App of Flutter with Firebase for login and registration.

In Flutter, we need to add separate files for iOS and Android platforms. In each file, we need to add code related to the platform rules.

Using Firebase with the Flutter application is not a simple matter. Please see Google provide demo (https://codelabs.developers.google.com/codelabs/flutter-firebase/), learn how to add Firebase to Flutter applications.

It is also easy to build new plug-ins for Flutter, with new ones appearing almost every other day.

React Native was created in 2015 by engineers at Facebook and Instagram. Since then, a dozen of their engineers have been working full-time on React Native, looking to help users solve any problems they face.

However, there were also many people in the community who made important contributions to the project and solved many problems.

You can usually find solutions to most problems in the React Native documentation and guides, or you can connect with other React Native developers on StackOverflow and GitHub, where you can showcase your projects or ask other developers for guidance.

If you want to become a contributor, read the Contributor Guide and roadmap to understand what others are doing. You can also see a list of the most commonly used features suggested by the community.

The documentation for Flutter is very comprehensive and can help you get started with Flutter development.

Flutter Gallery (https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) shows all of the available components Flutter. We can also refer to the GitHub library of Flutter for its implementation.

The Flutter community is not as strong as React Native. However, the Google Flutter team has provided excellent support for this. They provide many ways to collect our problems and solve them in a reasonable amount of time.

Although React Native is a separate code base (JavaScript), its View component behaves differently on iOS than it does on Android.

While React Native’s large community offers many different plugins and libraries, it can also lead to conflicts with other plugins for existing projects.

If you have experience with JSX, writing the UI code for Flutter may seem a bit tedious to you. As the UI gets more complex, code readability decreases.

One solution is to refactor the code into methods and widgets. We’re currently experimenting with this approach to see if it makes the build() method easier to read.

In Flutter, it is not necessary to put all the code in the build() method. Instead, you can break it down into smaller widgets!

Compared to React Native, Flutter is a bit resource-poor. One important reason is that a Flutter has not existed as long as React Native. But since the Beta release, Flutter’s resources have grown tremendously.

One of the main benefits of Flutter is that it provides built-in UI components, so we do not need to import a third party UI library. Flutter allows applications to run smoother and faster by reducing the interaction between the native layer and the runtime environment.

Flutter is just in Beta, but already developers are building applications with it. Flutter has a long way to go. Google’s Flutter team is pulling out all the stops to bring Flutter to developers.

https://blog.geekyants.com/we-rebuilt-a-react-native-app-with-flutter-4160f0499a82

Recommend geek time “Technical Management Practice 36 lectures” column, former Baidu best manager Liu Jianguo for you to clarify 36 scenarios of team leader, teach 13 ways to build an efficient team, share the “battlefield notes” of ten years of management.

Subscribe now for unlimited benefits:

Bonus 1: Limited time discount ¥45, original price ¥68, August 25 back to original price

Bonus 2: every time you invite a friend to buy, you can get 12 yuan cash back, friends can get 6 yuan back. Invite more and get more, top is not capped, cash at any time (cash withdrawal process: Geek time App – my – share rewards)

Click “Read the original” to try it for free or subscribe!