Three stages of cross-platform technology development

  • The first phase is the web container era of mixed development

    • In order to solve the high cost and low efficiency of native development, Hybrid development appears
    • Native embedded browser-dependent WebViews
    • Almost everything that can be done in a Web browser can be done in a WebView
    • The biggest problem with the Web, however, is that its performance and experience are different from those of native development
    • Therefore, it is not applicable to scenarios that require high performance and user experience

  • The second stage is the era of the pan-Web container represented by RN and Weex

    • RN cuts functionality to the Web standard
    • The user experience is closer to native
    • Because of the feature tailoring, RN has less than 5% of the business capability of the browser
    • Therefore, it is only suitable for medium to low complexity and low interaction pages. Slightly more complex interaction and animation requirements require extension by calling native code

  • The third stage is the era of self-drawing engines represented by Flutter

    • Flutter is the SDK that builds Google’s Internet of Things operating system, Fuchsia
    • It uses the Dart language for APP development
    • A single set of code can run on both iOS and Android
    • Flutter uses its own Native rendering engine to render views. It does its own closed-loop rendering of components
    • RN, Weex and other frameworks, only through JavaScript virtual machine extension call system components, and finally by Android or iOS system to complete the rendering of components

Here’s a look at some types of hybrid development apps:

Web APP framework

ionic

Ionic framework is a framework for smart device APP development based on Web technology, HTML, CSS and Java technology. Ionic framework is used to develop hybrid mobile APP development framework.

advantage

  • The Ionic framework is very focused on the visual experience, so it has a lot of UI components to help developers develop apps, such as pull-down refreshes and tabs. Beautiful interface, developers can quickly get started, the development of the APP is very practical.
  • The Ionic framework is based on AngularJS, which supports AngularJS features. Conforming to standard code, it’s easy to maintain code that blends perfectly with AngularJS
  • Cross-platform support can run on mainstream Android and ios operating systems, or other operating systems
  • Lots of powerful command lines
  • A strong community, a wide range of frameworks and the ability to compile applications for all platforms

disadvantage

  • High memory usage
  • Not suitable for game-type apps
  • Web technology cannot solve all problems, and native thinking cannot be used to realize complementary advantages in performance consuming areas, such as high-experience interaction and animation

Cordova

Cordova provides a set of device-specific apis; Through this set of apis, mobile apps can access native device functions such as cameras and microphones in JavaScript. Cordova also provides a uniform set of JavaScript libraries and device-specific native backend code for those libraries. Cordova supports the following mobile operating systems: iOS, Android, Ubuntu Phone OS, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.

communication

  • Communication principle

    1. Save the name and address of the cordova_plugin.js plug-in file
    2. When the plugin’s API is called, the exec module of Cordova stores the API parameters in the CommandQueue. Callbacks are stored in the CALLbacks map on the JS side
    3. Add an empty iframe. The SRC of iframe points to gap://ready
    4. After three iframe SRC setup, NATIVE side UIWebviewDelegate# shouldStartLoadWithRequest is called out
    5. In the case of a Webview Delegatet determining gap://ready, a commandDelegate process is performed
    6. CommandDelegate from JS side took out the parameters of the API, the internal implementation by UIWebview# stringByEvaluatingJavaScriptFromString return values obtained CommandQueue parameters into the JSON data inside
    7. Implement NATIVE defined plug-in instances according to 6 plug-ins
    8. Plug-in, a CALLBACK, the result of the success of failure by UIWebview# stringByEvaluatingJavaScriptFromString JS, JS, according to the coming CALLBACKID, Take the callback function from the Callbacks map and execute it

  • Communication mode

    • Method of iframe (default)
    • -webkit-scroll IFRAME = webkit-scroll IFRAME = webkit-scroll IFRAME;

  • Plug-in Import Process

    • Native

      • When the APP starts and the MainViewController initializes, the DELEGATE of queue and command is initialized
      • The config. XML file is parsed, the plug-in name is set to the array, the plug-in file and plug-in name are set to pluginMap, and the properties are set to setting
      • In the Webview class, load index.html. In the index.html file, load cordova

    • JS

      • When loading cordova. Js, internal event setting module, NATIVE interaction module, initialization module, plug-in loading
      • The plug-in module is the cordova_plugins.js file that defines the address of the plug-in file, and the filename saves the MAP
      • After the Deviceready event is published, the plug-in’s API is available
      • After the plug-in API is executed, the module MAP loads the plug-in file and executes the exec function
      • Add an empty iframe to index. HTML, specify SRC =gap://ready, and notify Nativie

advantage

  • IOS and Android basically share code;
  • Pure Web thinking, fast development, simple and convenient, one coding, running everywhere;
  • If you are familiar with Web development, the documentation is very complete, the system level support packaging is good, all UI components are HTML simulation, can be used uniformly;
  • Online update can be realized, allowing dynamic loading of Web JS;
  • More documents, more developers, easy to solve problems, mature technology;

disadvantage

  • High memory usage;
  • Not suitable for game type app;
  • Web technology cannot solve all problems, and native thinking cannot be used to realize complementary advantages in energy-consuming areas, such as high-experience interaction and animation.

Hybrid APP (Webview)

Using webView containers on Android and iOS, the APP can execute HTML, CSS, and JS scripts to display Web pages. Add Bridges for Java to call if native functionality is required. It has the characteristics of high development efficiency, cross-platform, dynamic release and so on. It is the most widely used and mature scheme at present.

The Webview communication

  • Request interception for fake jumps (not recommended)

    • Bogus hop interception is a web page that sends a new hop request to an invalid address that does not exist
    • Such as: WBCST: / / testhost/action? params=xxx
    • Scheme ://host/action? params
    • The client will block all requests without discrimination. The real URL address should be ignored as usual. Only the URL address matching the protocol domain name should be blocked by the client
    • JS call method
      1. A Label jump
      2. The location. The href jump
      3. The iframe jump
    • This parameter is not recommended. The Android system has a byte limit on URL parameters, which prevents big data communication

  • Popover blocking (not recommended)

    • alert
      • A dialog box is displayed, and you can only click Confirm no callback
    • confirm
      • A confirmation box (confirm, cancel) pops up, and you can call back
    • prompt
      • It pops up an input box that lets the user type in something that can be called back
    • Not recommended, will block all front window pop-ups indiscriminately

  • JS context injection (recommended)

    • iOS
      • WKWebView scriptMessageHandler injection
    • android
      • AddJavascriptInterface injection
    • The characteristics of
      • Without any interception method, but directly inject a native object (or function) into JS, which can be directly called by the WEB JS code and operated directly

WebView rendering engine design flaws

  • JS Execute, Layout, and Paint are all in MainThread and cannot be parallelized.
  • The performance of JS is not as good as compiled languages such as Java Dart Object-C, Native Tookit, which can lag when executing complex logic.
  • The rendering pipeline is very long, causing browsers to discriminate between synthesizer animations and non-synthesizer animations, and non-synthesizer animations perform poorly.
  • OpenGL is designed to recommend a single-threaded model, where only one thread can run a Context at a time. The Render process cannot access the OpenGL Context of the GPU process. The two processes cannot share resources with Texture. Render process can only output Bitmap/Command Buffer and transmit it to GPU process through IPC, but cannot directly raster it in the Open GL Context of GPU process, which makes it difficult to give full play to the performance of modern GPU.
  • Rasterization is asynchronous, and when inertial scrolling is carried out, a white screen will appear, which is a problem that Webview cannot avoid all the time.
  • There are many device platforms, which need to be compatible with CPU rendering. All In GPU design is not possible.

advantage

  • cross-platform
  • Short development cycle and low cost
  • Good user experience
  • Can fix bugs instantly, dynamic version

disadvantage

  • Imitation of native iOS is complicated
  • Model compatibility

ReactNative/Weex cross-platform technology

This technology maximizes the reuse of front-end ecology and Native ecosystem, and accumulates and outputs the high-performance components of Native View to the front-end technology system. The biggest difference between this solution and the browser is the execution of Script and Native View rendering system.

ReactNative

Communication Flow (OC)

  • ① Method exposed by js calling OC module
  • ModuleName, MethodName, and arguments are decomposed into ModuleName, MethodName, and arguments, and then left to MessageQueue
  • The js callback function is cached in a member variable of MessageQueue, and a CallbackID is generated to represent the callback. ModuleName and MethodName are converted to ModuleID and MethodID in the module configuration table stored in MessageQueue
  • (4) Upload the ModuleID, MethodID, CallbackID, and other parameters to the OC.
  • ⑤ The OC receives the message and obtains the correct module and method through the module configuration table
  • ⑥RCTModuleMethod Processes the parameters sent by JS
  • ⑦ Execute the block callback after executing the OC module method
  • Call the block generated by RCTModuleMethod in Step 6
  • Pet-name ruby block with CallbackID and to get the parameters of the block removed invokeCallbackAndReturnFlushedQueue MessageQueue method with js
  • ⑩MessageQueue finds the corresponding JS callback method through the CallbackID
  • Call the callback method and pass the arguments from OC to complete the callback

advantage

It’s not possible to run code everywhere at once, but basically even two sets of code use the same JSX syntax and use JS for development. The user experience is higher than HTML, and the development efficiency is higher

The Flexbox layout is said to be simpler and more efficient than Native’s adaptive layout

disadvantage

High requirements for developers, not to understand some Web technology line, when the official package of controls, API can not meet the needs of the inevitable need to understand some native things to expand, scalability is still far less than the Web, but also far less than directly writing native Code.

Weex

Realize the principle of

Weex outputs functions through Rax and Vue front-end frameworks. Under the front-end Framework, there is a JS Framework to implement DOM functions. WeexCore is responsible for the basic Flex Layout, and then connects to the Android/iOS Platform Native View system by Component.

advantage

  • Android Native uses a more lightweight rendering pipeline that can respond to events faster and more efficiently.
  • RenderThread directly operates OpenGLContext and performs Direct GPU Raster, giving full play to modern GPU features and providing high-performance rendering and smooth experience.
  • Upload Bitmap to Texture, upload TextureThread to Share Open GL Context, and then notify the main thread to draw. Share resources such as Texture with the main thread through the Share Open GL Context. Texture can only be shared by WebView within RenderProcess, RenderProcess cannot share Texture with GPU Process.
  • Android Native has RecycleView ViewPager and other advanced components, each advanced component has done the best practice of performance; The advanced components on the browser can only be realized through JS simulation, and the optimization and customization efficiency is low.
  • The pipeline design of browser is complex, which requires consideration of PC, mobile phone, embedded devices and other complex environments. Many devices do not have Gpus and can only perform CPU rendering. The system design of All In GPU cannot be implemented like Android Native system, and the performance of modern GPU can be fully played.

disadvantage

Weex system fully outputs the Native View system to the front-end system, and there are many insurmountable obstacles in the packaging process of Android/iOS Native View

The Flutter draws its own engine

Flutter is a framework released by Google for creating cross-platform, high-performance mobile applications. Flutter, like QT Mobile, does not use native controls. Instead, Flutter implements a self-drawing engine that uses its own layout and drawing system

The framework

The infrastructure is divided into three main parts:

  • Framework

    • The SDK for the pure Dart implementation is similar to what React does in JavaScript
    • It implements a basic set of libraries for handling animations, drawings, and gestures
    • Encapsulates a set of UI component library based on drawing
    • It’s differentiated by the Material and Cupertino visual styles

  • Engine

    • Pure C++ implementation SDK
    • including
      • Skia engine
      • The Dart runtime
      • Text typesetting engine, etc
    • It is a Dart runtime that can run Dart code in JIT or AOT mode
    • This runtime also controls the passing of VSync signals, the filling of GPU data, etc., and is responsible for passing client-side events to the code in the runtime

  • Embedder

    • Embedder is the operating system adapter layer
    • To achieve the
      • Render Surface Settings
      • The thread is set
      • Platform plug-ins and other platform-related features

Rendering process

  • The GPU VSync signal is synchronized to the UI thread
  • UI threads use Dart to build abstract view structures (Framework layer work here)
  • Layer composition in GPU thread (work on Flutter Engine layer)
  • The data is then rendered to the Skia engine as GPU data, and finally to the GPU via OpenGL or Vulkan

advantage

High productivity. One set of code to develop Android and iOS apps; Dart is a linguistic advantage that requires very little code to do the same thing. Iteration is more convenient, hot Reload function;

Create elegant, highly customizable user interfaces. Flutter has built-in libraries of UI components for Material Design and Cupertino (ios-favor); Provides customizable UI components that are no longer limited by OEM controls;

Achieve a high quality user experience across platforms with a portable GPU-accelerated rendering engine and a high-performance native ARM code runtime.

disadvantage

Flutter, developed in Dart, is a niche language that requires everything to be relearned.

Horizontal contrast

Compare the content of ReactNative weex Flutter Hybrid
Platform to realize JavaScript JavaScript Native code H5
engine JSCore JS V8 Flutter Engine Webview
The core of language React Vue Dart JavaScript
Bundle files Default single file is large (unpackable) Small, multi-page, multi-file Don’t need Front-end JS, CSS general CDN reference
cross-platform In the In the Upper middle on
Hot update good good No plan good
performance In the In the Upper middle poor