The React – Native and Flutter

I want to make an APP recently, so I thought about the technology selection. I took a look at gitHub and found a surprising point:

React-nativewarehouse

Flutterwarehouse

As can be seen, the number of Stars of FLutter quietly vastly exceeds that of React-Native

It seems that recently the attention of the community on React-Native and Flutter has been gradually reduced. Few people have written articles about Flutter

Comparing the hiring heat

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

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

Hiring hot: Close

Hiring a consortium

  • react-native

  • Flutter

  • They are about the same

Making ecological

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

  • Flutter keyword search :275K warehouse number

  • Note that the React-native ecosystem is much more mature than flutter

My overall consideration

  • The cost of learning Flutter is to use DART language. In fact, the cost is not very high, but it is not cost-effective for me to learn Flutter
  • The domestic benchmarking product of Flutter generally has some problems in experience, interaction and compatibility according to the feedback of surrounding friends
  • Due to the need for quick trial and error, React-Native was finally selected as the technology stack selection

In the initial stage of a product, should quickly fulfill the product requirements, see how the market response and then do the next step

React-native Setup (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
  • Xcode is installed 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
  • Updating… , Baidu can find the processing method, build the environment or very fast, is to executepod installKeep the ladder open
  • A simple React-Native project was set up

If you have any environmental problems, you can chat with me privately in the background of the public account or wechat

Learn the correct posture of 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 guy ridicule the document bad, but just reflect a point, that big guy also looked at the document, and all seriously look, so the white should seriously look, otherwise how to know bad?)

The difference between the two

  • This article is very well written, the difference between the two, here to move over, I will not repeat the writing, if you want to in-depth comparison, may be a long discussion
https://www.jianshu.com/p/da80214720eb

Copy the code
  • Some comparisons of the data:

  • Comparison of principles (most important) :
  • React Native is a UI framework. By default, React Native loads JS files in an Activity, then runs it in JavaScriptCore to parse the Bundle layout, and finally stacks a series of Native controls for rendering.
  • React Native will parse and render Native controls.

  • The platform of the Flutter only needs to provide a Surface and a Canvas. The rest of the Flutter says: “You can lie down and we will move ourselves”.
  • The majority of widgets in Flutter are platform-independent. Developers build apps based on the Framework, which runs on Top of Engine and is adapted and supported across platforms by Engine. This cross-platform support process involves “datafitizing” widgets in the Flutter UI and drawing them directly to the screen via 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 hate Flutter, but now that we’re talking about data, it’s accepted by the masses, and it’s probably much wider than React-Native, you can use Flutter if you can

By the way

  • Don’t be like me, read my whole article. The react-native and flutter should be bigger and humped. Name them properly.

  • If you do not regulate case naming, you encounter the following situation

  • I have met a lot of colleagues and fans who ask me why I can’t find the file name when I build it locally. That’s because you don’t have proper case. Different operating systems have different rules, and the final build result is different