Comparison of advantages and disadvantages of cross platform technologies in year-end inventory (hybrid, RN, weex, flutter)

Time:2021-4-21

Three stages of cross platform technology development

  • The first stage is the era of hybrid development of web container

    • In order to solve the high cost and low efficiency of native development, hybrid development appears
    • Embedded WebView based on browser in native
    • The requirements that can be realized in web browser can be basically realized in WebView
    • But the biggest problem of web is that its performance and experience are different from native development
    • Therefore, it is not suitable for scenarios with high performance and user experience requirements
  • The second stage is the pan web container era represented by RN and weex

    • RN tailoring the web standard
    • The user experience is closer to native
    • Because of the function tailoring, RN’s business support capability is less than 5% of that of the browser
    • Therefore, it is only suitable for low interaction pages with low complexity. In the face of a little more complex interaction and animation needs, we need to call native code to expand to achieve
  • The third stage is the era of self painting engine represented by flutter

    • Flutter is the SDK for building Google’s Internet of things operating system fuchsia
    • It uses dart language to develop app
    • A set of code can run on both IOS and Android platforms
    • Flutter uses its own native rendering engine to render the view, which is the closed loop of its own component rendering
    • Frameworks such as RN and weex only call system components through JavaScript virtual machine extension, and finally render components by Android or IOS system

Here are several types of mixed development apps:

Web app framework

ionic

Ionic framework is a framework based on Web technology, using HTML, CSS and Java technology to develop smart device app. Ionic framework is used to develop mixed mode mobile app development framework;

advantage

  • Full set of UI components
    Ionic framework pays great attention to the appearance experience, so it provides many UI components to help developers develop apps, such as drop-down refresh, tag and so on. The interface is beautiful, developers can get started quickly, and the developed apps are very practical.
  • The code is easy to maintain
    Ionic framework is based on angularjs, which supports the characteristics of angularjs. It is easy to maintain the code by following the standard code, and can perfectly integrate angularjs
  • Support cross platform
    It can run on mainstream Android operating system and IOS operating system, or other operating systems can also support it
  • A lot of powerful command lines
  • Strong community, framework and wide application scope
    Can be compiled into the application of various platforms

inferiority

  • High memory footprint
  • Not suitable for game type app
  • Web technology can’t solve all the problems, and it can’t make use of native thinking to achieve complementary advantages in places that consume performance, such as high experience interaction, animation and so on

Cordova

Cordova provides a set of device related APIs; Through this set of APIs, mobile applications can access native device functions with JavaScript, such as cameras, microphones, etc; Cordova also provides a set of unified JavaScript class libraries and native background code related to the devices used by these class libraries; Cordova supports the following mobile operating systems: IOS, Android, Ubuntu phone OS, blackberry, Windows Phone, palm WebOS, Bada and Symbian.

signal communication

  • Communication principle

    1. Save Cordova_ plugin.js Name and address of the plug-in file
    2. When the plug-in API calls out, call the exec module of Cordova to save the API parameters in the queue of commandqueue. Callbacks are stored in the callbacks map on the JS side
    3. Add an empty iframe, and the SRC of the iframe points to gap://ready
    4. After setting the SRC of iframe in 3, uiwebviewdelegate ා shouldstartloadwithrequest on the native side will be called out
    5. Delegatet judgment of WebView gap://ready In this case, the process of commanddelegate is executed
    6. Commanddelegate takes out the API parameters from JS side, and the internal implementation obtains the parameters in commandqueue through the return value of uiwebview stringbyevaluating JavaScript fromstring, and converts them into JSON data
    7. According to the plug-in of 6, execute the plug-in instance defined by native
    8. In the plug-in, if there is a callback, the result of success and failure will be JS executed through uiwebview stringbyevaluating JavaScript fromstring, and the JS side will take the callback function from the callbacks map and execute it according to the callpackid
  • communication mode

    • Method of iframe (default)
    • The method of XMLHttpRequest (recommended for IOS 5. X version because the iframe of – WebKit scroll has bugs)
  • Plug in import process

    • Native

      -When the app is started and mainviewcontroller is initialized, the queue and command are initially deleted
      -  config.xml File parsing, plug-in name set to array, plug-in file and plug-in name set to pluginmap, property set to setting
      -In the WebView class, load index.html , index.html It's loaded inside cordova.js Start the initial stage
    • JS

      -Loading cordova.js Time, internal event setting module, native interaction module, initialization module, plug-in loading
      -The plug-in module is Cordova_ plugins.js File definition plug-in file address, file name, saved map
      -After the deviceready event is released, the plug-in API can be used
      -After the plug-in API is executed, the module map loads the plug-in file and executes the exec function
      -In index.html Add an empty iframe and specify Src= gap://ready , notify nativie

advantage

  • IOS and Android can basically share the same code;
  • Pure web thinking, fast development speed, simple and convenient, one-time coding, running everywhere;
  • If you are familiar with web development, the documents are complete, the system level support is well encapsulated, and all UI components have HTML simulation, which can be used uniformly;
  • It can realize online update and allow dynamic loading of Web JS;
  • Many documents, many developers, easy to solve problems encountered, mature technology;

inferiority

  • The occupied memory is higher;
  • Not suitable for making game type app;
  • Web technology can’t solve all the problems, and it can’t make use of native thinking to achieve complementary advantages for energy consuming places, such as high experience interaction, animation and so on.

Hybrid APP(Webview)

Using WebView container on Android and IOS, app can execute HTML, CSS and JS scripts to display web pages. If you need native functions, add bridge for Java to call. With the characteristics of high development efficiency, cross platform and supporting dynamic release, it is the most widely used and mature solution at present;

WebView communication

  • False jump request interception (not recommended)

    • False jump request interception is to send a new jump request from the web page. The destination of the jump is an illegal address that does not exist at all
    • For example: wbcst://testhost/action?params=xxx
    • Simulate HTTP protocol network request scheme://host/action?params
    • The client will intercept all requests indiscriminately. The real URL address should be passed as usual. Only the URL address matching the protocol domain name should be intercepted by the client
    • JS calling mode

      1. A label jump
      2. location.href Jump
      3. Iframe jump
    • It is not recommended to use. Android system limits the URL parameters by bytes, so it is unable to communicate with big data
  • Pop up interception (not recommended)

    • alert

      • Pop up a prompt box, you can only click to confirm that there is no callback
    • confirm

      • Pop up a confirmation box (confirm, cancel), you can call back
    • prompt

      • Pop up an input box, let the user input things, you can callback
    • It is not recommended to use. It will intercept all the front-end pop ups without difference
  • JS context injection (recommended)

    • iOS

      • Wkwebview scriptmessage handler injection
    • android

      • Addjavascript interface injection
    • characteristic

      • Instead of any interception method, a native object (or function) is directly injected into JS, which can be directly called and operated by the JS code of the web

Defects in WebView rendering engine design

  • JS execute, layout and paint are all in mainthread and cannot be parallelized.
  • JS’s performance can’t catch up with native tookit’s Java dart Object-C and other compiled languages, and it will jam when executing complex logic.
  • The rendering pipeline is very long, which causes the browser to treat synthesizer animation and non synthesizer animation differently, and the performance of non synthesizer animation is poor.
  • OpenGL is designed to recommend a single thread model, a context can only run one thread at the same time. GPU thread runs in a single GPU process. The render process cannot access the OpenGL context of the GPU process, and the two processes cannot share resources with the texture. Render process can only output bitmap / command buffer and pass it to GPU process through IPC. It can’t rasterize directly in GPU process’s open GL context, so it’s difficult to give full play to the performance of modern GPU.
  • Rasterization is carried out asynchronously. When inertia rolling is carried out, white screen will appear, which is an unavoidable problem of WebView.
  • There are many device platforms, which need to be compatible with CPU rendering, so it is impossible to design all in GPU.

advantage

  • Cross platform
  • Short development cycle and low cost
  • Good user experience
  • Can immediately fix bugs, dynamic version

inferiority

  • The effect of imitating native IOS is complex
  • Model compatibility

Reactnative / weex cross platform technology

This technology maximizes the reuse of the front-end ecosystem and native ecosystem, and accumulates the high-performance components of native view to the front-end technology system. The biggest difference between this scheme and browser is script execution and native view rendering system.

ReactNative

Comparison of advantages and disadvantages of cross platform technologies in year-end inventory (hybrid, RN, weex, flutter)

Communication process (OC)

  • ① JS call OC module exposed method
  • ② Decompose the calling method into modulename, methodname and arguments, and then throw them to the message queue for processing
  • ③ The callback function of JS is cached in a member variable of the message queue, and a callback ID is generated to represent the callback; Convert modulename and methodname into moduleid and methodid through the module configuration table saved in the message queue
  • ④ Pass moduleid, methodid, callbackid and other parameters to OC (JavaScript core)
  • ⑤ OC receives the message and gets the module and method through the module configuration table
  • ⑥ Rctmodulemethod processes the parameters from JS
  • ⑦ After the OC module method is executed, execute the block callback
  • ⑧ Call the block generated by rctmodulemethod in step 6
  • ⑨ The block takes the callbackid and the parameters passed by the block, and uses the message queue method in JS to invoke callbackandreturnflushedqueue
  • ⑩ Message queue finds the corresponding JS callback method through callbackid
  • ⑪ Call the callback method and pass the parameters brought by OC to complete the callback

advantage

Although we can’t code all over the place at one time, basically even the two sets of code have the same JSX syntax and use js for development. The user experience is higher than HTML and the development efficiency is higher

Flexbox layouts are said to be simpler and more efficient than native adaptive layouts

inferiority

It has high requirements for developers. It’s not enough to understand web technology. When the official encapsulated controls and APIs can’t meet the requirements, it’s necessary to understand some native things to expand. The scalability is still far less than web, and it’s far less than writing native code directly.

Weex

Comparison of advantages and disadvantages of cross platform technologies in year-end inventory (hybrid, RN, weex, flutter)

Implementation principle

Weex outputs functions through the front-end framework of rax and Vue, and there is a layer of JS framework under the front-end framework to realize the function of DOM. Weexcore is responsible for basic flex layout, and then connects to Android / IOS platform native view system through component.

advantage

  • Android native adopts a lighter rendering pipeline, which can respond to events faster and more efficiently;
  • Renderthread directly operates openglcontext and performs direct GPU raster, giving full play to the characteristics of modern GPU to provide high-performance rendering and smooth experience;
  • Some time-consuming operations, such as bitmap uploading texture and texturethread uploading to share open GL context, inform the main thread to draw after the texture is completed, and share texture and other resources with the main thread through share open GL context. WebView can only share texture in render process, renderprocess cannot share texture and other resources with GPU process;
  • Android native has advanced components such as recycleview viewpager, each of which has done the best performance practice; The advanced components on the browser can only be realized through JS simulation, so the optimization and customization efficiency is low;
  • Due to the complexity of browser pipeline design, many complex environments such as PC, mobile phone, embedded device and so on need to be considered. Many devices have GPU and can only be rendered by CPU. It is impossible to design all in GPU system like Android native system, so as to give full play to the performance of modern GPU.

inferiority

Weex system fully outputs native view system to the front-end system. There are many insurmountable obstacles in the encapsulation process of Android / IOS native view

Flutter self drawing engine

Flutter is a framework released by Google for creating cross platform, high-performance mobile applications. Like QT mobile, both flutter and QT mobile do not use native controls. On the contrary, they both implement a self drawing engine and use their own layout and drawing system

frame

Comparison of advantages and disadvantages of cross platform technologies in year-end inventory (hybrid, RN, weex, flutter)

The infrastructure is mainly divided into three parts:

  • Framework

    • Pure dart SDK, similar to react in JavaScript
    • It implements a set of basic library for processing animation, drawing and gesture
    • A set of UI component library is encapsulated based on drawing
    • According to the material and Cupertino visual style to distinguish
  • Engine

    • SDK implemented in pure C + +
    • include

      • Skia engine
      • Dart runtime
      • Text typesetting engine, etc
    • It is a runtime of dart, which can run dart code in JIT or AOT mode
    • The runtime also controls the transmission of Vsync signals, the filling of GPU data, etc., and is responsible for passing client events to the code in the runtime
  • Embedder

    • Embedded is the operating system adaptation layer
    • Realized

      • Render surface settings
      • Thread settings
      • Adaptation of platform related features such as platform plug-ins

Rendering process

Comparison of advantages and disadvantages of cross platform technologies in year-end inventory (hybrid, RN, weex, flutter)

  • The Vsync signal of GPU is synchronized to UI thread
  • The UI thread uses dart to build an abstract view structure (here is the work of the framework layer)
  • Draw the abstract view data structure and synthesize the layers in GPU thread (work in the flutter engine layer)
  • Then it is provided to skia engine to render as GPU data, and finally it is provided to GPU through OpenGL or Vulkan

advantage

High production efficiency. One set of code can be used to develop Android and IOS applications; dart language has the advantages of requiring little code for the same function; iteration is more convenient, with hot reload function;

Create an elegant, highly customizable user interface. Flutter has built-in UI component library for material design and Cupertino (IOS favor); It provides customizable UI components and is no longer restricted by OEM controls;

With the help of portable GPU accelerated rendering engine and high-performance local arm code runtime to achieve cross platform high-quality user experience.

inferiority

Flutter is developed in dart language. It belongs to minority language and needs to relearn everything.

Horizontal comparison

Contrast content ReactNative weex Flutter Hybrid
Platform implementation JavaScript JavaScript Native coding H5
engine JSCore JS V8 Flutter Engine Webview
Core language React Vue Dart JavaScript
Package bundle file The default single file is larger (detachable) Smaller, multi page, multi file unwanted Front end JS, CSS general CDN reference
Cross platform in in so-so upper
Hot update good good No plan good
performance in in so-so difference

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]