Ali's bosses have summed up ,「 generally speaking , Cross end technology 4 Class scene , They are cross device platforms （ Cross Web Mobile terminal and mobile terminal ）, Cross operating system （ If cross Android and iOS）, Cross App
And cross render containers .」
The cross platform technology of mobile terminal has always been a hot topic , In the context of not optimistic about the client technology ceiling , The future of the client seems to be tilting towards cross platform .
The advantage of cross platform solution is very obvious , For developers , It can be developed once , Multiterminal multiplexing , A set of code can run on different devices . This can greatly reduce the cost of R & D , At the same time, it can quickly verify and launch the product .
however , The cross platform technology of mobile terminal does not only consider that a set of code can run in different scenarios , Performance needs to be addressed , Dynamism , R & D efficiency and consistency .
performance ： How to combine the front end with the client , Achieve better rendering performance and interactive performance ;
Dynamism ： How can the client achieve lower cost distribution , Even do not release version directly dynamic update code ;
R & D Efficiency ： How to improve the R & D efficiency of dynamic debugging for different clients ;
uniformity ： How to implement multi terminal deployment of a code , And ensure the consistency and compatibility of the code in multiple clients .
nowadays , There have also been such changes WebView,React Native,Weex,Flutter
, Small programs and many other mobile cross platform framework . But in the industry, there is a situation of competing for hegemony , No framework can really solve the above problems perfectly , At the same time, he is able to learn from many people , One super many strong .
<>1 WebView
WebView Simply put, it's for display HTML Container for , In official terms , be called ：
A View that displays web pages. This class is the basis upon which you can
roll your own web browser or simply display some online content within your
Activity. It uses the WebKit rendering engine to display web pages and includes
methods to navigate forward and backward through a history, zoom in and out,
perform text searches and more.
Let's translate it for you ：
The view used to display a web page . This is for running your own Web Browser or only show some online content in the application . It uses WebKit
The rendering engine displays the web page , And include navigation in browsing history , Zoom in and zoom out and perform text search .
So in a nutshell ,WebView It's like a browser , It can load and render all kinds of images HTML Page of . And at the same time ,WebView It is generally inherited from the native client UI
Base class . therefore , For native applications ,WebView Itself by loading h5 page , adopt Chromium/WebKit Kernel analysis and implementation UI synthesis , Generate client native UI
class , And then show it on the screen .
and html Page and native The communication and interaction is through the so-called JSB (JavaScript Bridge) To achieve this . The client encapsulates the native system level interface , And then through JSB
Exposed to WebView Call the front-end page . In essence, this is the native system API And front page Javascript Communication of .
thus , Front end developers can also quickly implement cross end page , adopt JSB Communicate with native systems , Ensure the ability of cross end application to get through and call each other on the whole .
It's just that , The disadvantages of this mechanism are also obvious , The communication between the front page and the native system depends entirely on the JSB The structure of , If JSB
Missing interface to call native capabilities in , That cross section ability will also be directly limited . In this case, we still need to expand the application of native application JSB Interface , On the contrary, it reduces the development efficiency .
in addition ,WebView yes UI The rendering depends on the browser kernel , The browser kernel is independent of system components , So there is no guarantee of cross end UI The original experience of . Native experience is always the ultimate goal of cross end technology .
<>2 React Native
In order to pursue the original experience mentioned above ,Facebook stay 2015 In, it launched a very hot market React Native, abbreviation RN.
RN Compared with WebView, The biggest difference is that the browser kernel is no longer used UI Rendering , Instead, we use a Virtual DOM Things to cross the end UI Management of rendering .
Virtual DOM and DOM Actually, it's about the same , It's all a tree structure , Recorded on different nodes UI Different elements of . It's just that Virtual DOM
The rendering work is handed over to the native rendering engine , such as web browser ,iOS,Android, To deal with . after , Different platforms are still through the corresponding Bridge To create different Native view .
In this way , The experience has been improved to a certain extent . It's just that React Native There is only one way to interact with native dependencies Bridge, and JS and Native The interaction is asynchronous , So for the needs and Native
A large number of real-time interactive functions may have performance deficiencies , For example, animation efficiency , Performance is still not as good as native .
<>3 Flutter
Flutter It is a cross platform mobile terminal incubated within Google UI frame , It's in the RN When questioned , It is the closest framework to the original experience at present .
In terms of underlying principles , It is neither adopted WebView And H5 Mixed form , It's not used either JavaScript adopt Bridge Mode of bridging , It's the realization of a system UI
frame , Directly at the lower level UI Rendering . More Than This , It is no longer used JavaScript As a development language , It's a choice Dart. call Dart Languages can be compiled into native code , Direct communication with native .
Why choose Dart, actually Flutter The team evaluated more than a dozen languages at an early stage , And chose Dart, Because I think it fits the way they build the user interface , And also has the following advantages ：
1 Dart yes AOT (Ahead Of Time) Compiled , Compile to fast , Predictable local code , send Flutter Almost all can be used Dart to write .
2 Dart it's fine too JIT(Just In Time) compile , The development cycle is extremely fast , Workflow subverts Convention （ include Flutter Popular sub second stateful hot overload ）;
3 Dart It's easier to create 60fps Smooth animation and transition .Dart Object allocation and garbage collection can be done without locks .
4 Dart send Flutter There is no need for a separate declarative layout language , as JSX or XML, Or a separate visual interface builder , because Dart The declarative programming layout of is easy to read and visualize .
Flutter Same as above Recat Native,WebView Containers are different in nature , It's not used WebView,JavaScript
Interpreter or native control of system platform , It's about having a set of your own Widget, All components are based on Skia Engine self drawing .
Flutter Because it's done through its own engine UI Rendering , So in iOS and Android The results are basically the same . by comparison ,RN Yes, it will UI
Control to the native control of the corresponding platform , So inevitably there will be some differences .
From a technical point of view ,RN In fact, it's just Native The JavaScript The running environment of , But its layout engine , The rendering layer uses the Native Controls for , therefore UI
There are still system differences in interaction . and Flutter The plan is more thorough , Even the rendering layer is changed to self drawing based on graphics engine UI control , So as to ensure UI Cross end consistency of interaction .
Technology