In 2022, how to choose cross end technology solutions?

With the development of mobile Internet , Currently on the market “ End ” There are many forms ,Web、App 、 vehicle 、 Wechat applets and other terminals are popular , The same business requirement often needs to be realized on multiple terminals , The cost of writing multiple sets of code for different ends is obviously very high .

In recent years “ Straddle ” Obviously, it is a popular word in the front-end industry . Whether at home or abroad , A hundred schools of thought contend for the cross end framework , Frequent schemes . I believe that many developers with multi-terminal code running requirements will have some doubts ： What are the advantages and disadvantages of these frameworks ？ Which one should I use ？

This issue mainly introduces several mainstream solutions Flutter、React Native 、Taro、Weex、Finclip

Flutter

Flutter As Google's mobile UI frame , Building... Fast iOS and Android Application and development 、 High performance 、 Excellent in portability , And can work with existing code , Based on these characteristics, it is more and more respected by developers , In recent years, the development speed is also relatively rapid , All major companies have introduced .

Front end for Flutter It was a little surprising how enthusiastic you were , In fact Flutter There are far more client developers in the community than front-end developers , However, the front end does have a natural desire for cross end solutions .

advantage ：
1、 Cross platform ;
2、 Powerful performance , Fluent , Mixed development , The framework closest to native development ;
3、Dart Language is easy to learn ;
4、 Greatly reduces the development cost . I need to recruit one iOS、 An Android , It was used flutter after , Just recruit one flutter Staff is enough ;

shortcoming ：
1、Widget It is difficult to choose the type of , Perishing UI Control API;
2、Dart The ecology of language is small , The cost of proficiency is relatively high .
3、 After the development tool version is upgraded , Large amount of modification ;
4、 Native integration with third parties SDK after , Compatibility adaptation is a headache ;
5、 Poor code readability （ Nesting hell ）, High requirements for code quality and management ;

Short version ：flutter It is a powerful framework , But there are lots of holes .

React Native

React Native ( abbreviation RN) yes Facebook On 2015 year 4 Open source cross platform mobile application development framework in , yes Facebook Earlier open source JS frame React A derivative of the native mobile application platform , Support iOS And Android .RN Use Javascript Language , Be similar to HTML Of JSX, as well as CSS To develop mobile applications , So be familiar with Web Front end developers only need a little learning to enter the field of mobile application development .

The main features ：

1、 Native iOS Components
adopt React Native, Developers can use UITabBar、UINavigationController Wait for the standard iOS Platform components , Let the application interface maintain a consistent appearance on other platforms 、 style .

2、 Asynchronous execution
JavaScript All operations between the application code and the native platform adopt asynchronous execution mode , Native modules use additional threads , Developers can decode the main thread image 、 Save to disk in the background 、 Don't worry about UI And many other factors directly measure the layout of text design .

3、 Touch processing
React Native The introduction of a iOS On Responder Chain Response system of response chain event processing mechanism , Based on this, it provides developers with information such as TouchableHighlight And other more advanced components .

Taro

Taro Jingdong - Concavoconvex lab creates a set of follow React Multi terminal unified development framework of grammar specification .

A set of code , adopt Taro The compiler of , The source code can be compiled on different ends （ Wechat applet 、H5、App End etc. ） Running code . meanwhile Taro It also provides out of the box syntax detection and auto completion functions , Effectively improve the development experience and development efficiency .

Taro Self developed a packaging mechanism to AST Keep passing , Therefore, the speed of code analysis has been greatly improved . a 2015 year Of 15 " RMBP When compiling hundreds of components, only about 15 About seconds .

stay Taro in , You don't have to distinguish what is App Components , What is? Page Components , What is? Component Components ,Taro It's all about Component Components , and React The life cycle of is exactly the same . so to speak , Once you get it React, Then you almost master Taro. Also use declarative JSX grammar . Compared with the template syntax of string ,JSX It will be more handy when dealing with delicate and complex requirements .

Weex

Weex Alibaba open source is a set of high-performance construction , Scalable native application cross platform development solution . stay 2016 Ali double 11 middle school ,Weex The coverage rate in Alibaba's double 11 venue is close to 99%, The number of pages is close to 2000, Covering the main venue 、 At the venue 、 Sub venue 、 Almost all Alibaba's double 11 venue businesses, including the crowd venue . The second opening rate of Ali's double 11 main venue 97%, All venue pages reach 93%.

characteristic ：

1. Page development currently supports Rax and Vue
2. Write once , Three ends （Android、iOS、 front end ） function
3. UI Drawing of passed native The components of ,JavaScript The logic is JS Running in the engine , Both pass JavaScriptCore signal communication .
4. Support Native Expand
5. Can be in chrome In the debugging JS Code ,weex Support in chrome Preview page in dom node
6. asynchronous ：weex Only support callback

FinClip

FinClip It is a set of small program container technology developed by FanTai geek , It can also be said to be an applet SDK Runtime/Engine, Provide Runtime Based on browser kernel , Use dynamic language (JS) Harmony and clarity View structure （XML）, Compatible with mainstream Internet applet Technology , May adopt Vue、react Based on DSL frame .

And Taro、Flutter、Reactive-Native The difference between cross - end languages is ,FinClip Strictly speaking, it is a container technology . Not only does it not conflict with the above cross end technology , It can also be perfectly integrated . Whether it's through Flutter、Taro、 kbone And other small programs can be developed in FinClip It runs .

This applet container technology , Separating the view layer from the logical layer also brings many benefits ：

1、 Facilitate data sharing and interaction between multiple applet pages . Having the same context in the life cycle of an applet can provide a familiar coding experience for developers with a native application development background ;

2、Service and View The separation and parallel implementation of can prevent JS Perform actions that affect or slow down page rendering , This helps improve rendering performance ;

3、 because JS stay Service Layer execution , therefore JS It's operated inside DOM Will not be right View Layers have an impact , So the applet can't operate DOM Structural , This also makes the performance of small programs better than traditional H5 Better .