The React – Native and Flutter

The thing is, I was thinking about technology selection because I wanted to build an APP recently, so I looked at it on gitHub, and I was surprised by something:

React-nativewarehouse

Flutterwarehouse

It can be seen that the Star number of FLutter silently significantly exceeds that of React-native

I feel that the community’s interest in React-native and Flutter is gradually decreasing recently, and few people write articles about these qualities

Compare the popularity of recruitment

  • React-Native:
    • throughBossStraight to hireurlPass the reference test, shenzhen areaReact-NativeThe number of posts is nine pages
https://www.zhipin.com/c101280600/?query=react-native&page=9&ka=page-9
Copy the code

  • Flutter:
    • throughBossStraight to hireurlPass the reference test, shenzhen areaFlutterThe number of posts is 8 pages
https://www.zhipin.com/c101280600/?query=Flutter&page=8&ka=page-8
Copy the code

Hiring popularity: about the same

Hiring a consortium

  • react-native

  • Flutter

  • Both are neck and neck

Making ecological

  • React-native keyword search :259K number of warehouses

  • Keyword search flutter: Warehouse number of 275K

  • Those of you who say that React-native ecology is much more mature than flutter should note that this statement may now be a question mark

All my considerations

  • The cost of learning Flutter is to use the DART language, which is not very expensive, but it’s not cost-effective for me to learn
  • The domestic benchmark products of Flutter are generally subject to some problems in terms of experience, interaction, and compatibility
  • Due to the need for quick realization of trial and error, React-Native was chosen as the technology stack selection

At the beginning of a product, we should quickly cash in on the demand for the product, and see how the market responds before we do the next step

React-native Environment building (MAC)

  • The preparatory work
brew install node
brew install watchman
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org/
Copy the code
  • Install Xcode on your computer
  • Computer installation simulator
sudo gem install cocoapods
Copy the code
  • Initialize the project
npx react-native init AwesomeProject
Copy the code
  • Start the project
cd AwesomeProject
yarn ios
Copy the code
  • If you run Homebrew on updating… , Baidu can find the solution, build the environment is very fast, is the implementationpod installAlways use the ladder
  • A simple React-Native project was built

If you encounter problems in the environment, you can chat with me privately on the public account background or wechat

Learn the correct posture of the flutter

  • Website:
https://flutterchina.club/
Copy the code
  • Mac Installation
https://flutterchina.club/setup-macos/
Copy the code
  • According to the actual operation of the document (some big joke document rotten, but just reflect a point, that the big guy also read the document, and are carefully read, so small white should be more carefully read, otherwise how to know rotten?)

The difference

  • This article is well written, the difference between the two, here to move some, not to repeat to write, if the depth of comparison, it may be a long talk
https://www.jianshu.com/p/da80214720eb
Copy the code
  • Some comparisons of the data:

  • Contrast of principles (most important) :
    • React Native is a UI framework. By default React Native loads JS files under an Activity, then runs JavaScriptCore to parse the Bundle layout, and finally stacks a series of Native controls for rendering.
    • The simple answer is to configure the layout of the page by writing JAVASCRIPT code, and React Native will eventually parse and render it as a Native control.

  • The platform only provides a Surface and a Canvas, and the rest of the Flutter says, “You can lie down, we will move.”
  • Most of the widgets in The Flutter are platform independent. Developers develop apps based on the Framework that runs on the Engine, which enables adaptation and cross-platform support. This cross-platform support process involves “datalising” the widgets in the Flutter UI and drawing them directly to the screen via the Skia on the Engine

  • For the rest, see the recommended article above

I chose react-native, but you don’t have to

  • I used to reject Flutter, but now we use the data, it’s accepted by the general public, and it’s probably more widely accepted than React-native, and you can use Flutter if you can

By the way

  • Don’t be like me. Read my whole articlereact-nativeandflutterA larger a hump, to standardize the naming (mainly Mac keyboard is difficult to use you understand ~)
  • If the case is not properly named, this is what happens

  • I have met many colleagues and fans who ask me why I can’t find the file name when I build it locally, but it fails when I run it on the server. It is because your case is not standard. Different operating systems have different rules, and the final result of the build is different

digression

  • The react-Native/Flutter battle may be about to enter the vue/React category

  • In last week’s public account vote, nearly 400 people voted, and Finally React won by a small margin, which shows that both frameworks are used a lot in China. Although I am a crazy fan of React, I also like the author of Vue, which is not a conflict

Look at two things

If you find this post inspiring, I’d like to ask you to help me with a few small things

1. Click “Watching, like, follow” to let more people see this content (click “like”, bug-1 😊)

2. Follow my public number “front peak”, let me continue to push good posts for you

My name is Peter Tan, a front-end development engineer of a small factory. I like to do architecture, and I have some research on performance optimization and cross-platform development. I also like to do we-media and blockchain. Welcome to follow me