Introduction to fluent and the development of cross platform development

Time:2021-12-30

preface

Why do we need cross platform development? In essence, cross platform development is to increase code reuse, reduce the workload of developers for different adaptation of multiple platforms, reduce development costs, improve business focus and provide a better experience than the web. Generally speaking, it means saving money, laziness and experience.

Three times of cross platform development scheme

1 Web container Era
Based on web related technologies, the interface and functions are realized through browser components. Typical frameworks include Cordova (phonegap), ionic and wechat applet (WebView for rendering, and jscore thread is used to run JS script in logic layer). The scheme in the Web era mainly adopts the way of native application embedded browser control WebView for HTML5 page rendering.

Due to the use of web development technology, the community and resources are very rich, and the development efficiency is also very high. However, the display of a complete HTML5 page goes through three processes: browser control loading, parsing and rendering, and the performance consumption is N orders of magnitude higher than that of native development

2 Pan web container Era
Web like standards are adopted for development, but the rendering and rendering are handed over to the native system at runtime. The representative frameworks include react native, weex and fast application, and in a broad sense, tmall’s virtual view.
The native UI component is used to replace the core rendering engine, and only the necessary basic control rendering ability is maintained, which not only simplifies the rendering process, but also ensures good rendering performance.
Introduction to fluent and the development of cross platform development
This is also the idea of most cross platform frameworks, and react native and weex are the leaders. To sum up, JS is actually used to call the components on the native side to realize the corresponding functions.

3 Self drawing engine Era
With its own rendering engine, the client can provide only one canvas to obtain a highly consistent rendering experience from business logic to function rendering. Flutter is one of the few representatives.

Flutter, the representative of this period, opened up a new idea, that is, rewriting a set of cross platform UI framework from beginning to end, including rendering logic and even development language.

The rendering engine relies on the cross platform skia graphics library. The skia engine will process the abstract view structure data built using dart into GPU data, which will be finally provided to GPU rendering by OpenGL. So far, the rendering closed loop is completed. Therefore, the consistency of experience of an application on different platforms and devices can be guaranteed to the greatest extent.

The development language is dart, which supports JIT (just in time) and AOT (ahead of time), which not only ensures the development efficiency, but also improves the execution efficiency (much higher than the pan web container scheme developed with JavaScript).

contrast

Ionic, phonegap and uni app

Add a shell to H5 and give some other capabilitiesLoad H5 pages based on WebView (WebView under Android and wkwebview under IOS). At the same time, call the capabilities of device cameras, file systems and other devices through some capabilities pre implemented by the framework.

react native

react native Use js to call native modules (such as network request and view control) through JavaScript core to realize corresponding functions, the react design mode is used, but the UI rendering, animation effect and network request are implemented by the native end. The JS code written by the developer is transformed into native controls and operations (DSL) through the middle layer of react native, which is better thanionicAnd other cross platform applications, which greatly improves the user experience.

Unlike front-end development, all tags in react native are not real controls. The functions of the controls written in JS code are similar to the key value in map. The JS end uses the DOM combined by this key. Finally, the native end will parse the DOM to get the corresponding native control rendering, such as in Android<view>Label correspondenceViewGroupControl.

In react native, the JS end runs in an independent thread (called JS thread). As a single thread logic, JS thread cannot handle time-consuming operations. For examplefetchPicture loadingData persistenceIn Android, the actual corresponding operation isokhttpFrescoSharedPreferencesWait. Cross thread communication also means that the interaction and communication between JS thread and native are asynchronous.

WEEX

Write a Vue front end and compile it into APK and IPA with good performanceBased on Vue design pattern, it supports web, Android and IOS. The native end also transforms controls and operations into native logic through the middle layer to improve the user experience
Weex mainly includes three parts:JS BridgeRenderDom; The third part was adoptedWXSDKManagerUnified management;JS BridgeIt is mainly used for two-way communication with the JS side implementation, such as passing the DOM structure of the JS side to theDomThread.DomIt is mainly used for DOM parsing, mapping, adding and other operations, and finally notify the UI thread to update. andRenderResponsible for rendering DOM in UI thread.

Like react native, all tags of weex are not real controls. The DOM generated and stored in JS code is finally parsed by the native end, and then the corresponding native control rendering is obtained, such as in Android<text>Label correspondenceWXTextViewControl.

Files in weex default to Vue, and Vue files cannot be run directly, so Vue will be compiled into For JS format files, the weex SDK will be responsible for loading and rendering this JS file. The principle that weex can span three ends is as follows:In the development process, the code pattern, compilation process, template components, data binding, life cycle and other upper syntax are consistent。 The difference is inJS FrameworkAt the end of the layer, the web platform and native platform can not parse the virtual dom

technological process:

  • After weex receives the JS file, the JS framework will callweex-vue-frameworkProvided increateInstanceMethod to create an instance. (it may also be in rax mode)
  • createInstanceThe JS entry code will be executed innew Vue()Create a component and create a virtual DOM node through its render function.
  • The virtual DOM is parsed by the JS V8 engine, and the JSON data is sent to the DOM line. The output of JSON here is also convenient for cross end data transmission.
  • The DOM thread parses the JSON data and obtains the correspondingWxDomObject, and then create the correspondingWxComponentSubmit render.
  • Render finally handles the rendering task on the native side and calls back the JS method in the.

Compared with react native, weex is mainly on the JS V8 engineJS FrameworkIt undertakes important responsibilities, so that the upper layer has unity and can support cross three platforms. In general, it is mainly responsible for:Manage the lifecycle of weexParse the JS bundle, convert it to virtual DOM, and then build the page through different API methods of the platformConduct two-way data interaction and response

Flutter

Fluent is a software development kit (SDK). It contains many widgets, frameworks and tools to help developers seamlessly build cross platform applications

background
The biggest problem with the web is that its performance and experience are perceptible different from the original development, so it is not suitable for scenes with high experience requirements.

The user experience is closer to the native react native, but the business support ability is less than 5% of that of the browser. It is only applicable to low complexity and low interaction pages. In the face of slightly more complex interaction and animation requirements, developers need to review case by case, and may even extend it through native code.

Flutter is an SDK for building Google’s Internet of things operating system Fuchsia, focusing on cross platform, high fidelity and high performance. Developers can develop apps through dart language, and a set of code can run on IOS and Android platforms at the same time. Fluent uses the native engine to render views and provides rich components and interfaces

Rendering flow:
Introduction to fluent and the development of cross platform development
Introduction to fluent and the development of cross platform development

Skia
Skia is an open source 2D graphics library, which provides various common APIs and can run on a variety of software and hardware platforms. Google Chrome, Chrome OS, Android, fluent, Firefox browser, Firefox operating system and many other products use it as a graphics engine.

Skia performs well in graphics conversion, text rendering and bitmap rendering, and provides developer friendly APIs.

Therefore, flutter, which is based on skia, has complete cross platform rendering capability. Through in-depth customization and optimization with skia, fluent can smooth the platform differences to the greatest extent and improve rendering efficiency and performance.

When the rendering capability of the bottom layer is unified, the development interface and function experience of the upper layer are unified. Developers no longer have to worry about the rendering features related to the platform. In other words, skia ensures that the rendering effect of the same set of code calls on Android and IOS platforms is completely consistent.

Similarly, in the process of interface rendering and rendering, fluent has also done a lot of optimization to improve the efficiency of synthesis and rendering.

Flutter’s advantages
  • Google’s own son
  • for Web
  • Under all platforms, the same UI style and business logic can be maintained
  • Excellent UI, precise control 1px; The vision is unified, and the old equipment can also run with the UI
  • Access platform native functions
  • JIT reduces the time required for development
  • Flutter does not rely on any intermediate code, and finally builds it directly into machine code, which improves the performance.
  • Rich community support
  • Built in package manager from dart
  • Dynamic function module (if your application contains camera function, you can set it as dynamic module. Later, when users want to download and install this function, they can operate on demand.)
Flutter’s shortcomings
  • Short time, may lack function
  • Compared with JS / TS, fluent has fewer optional packages
  • Dynamic update (Android has a community solution, but Apple…)

    Performance comparison


Item 1goodluck

Item 2slots

Chinese network

gallery