primers

Traditional native Android and iOS development is plagued by many difficult issues, such as long development cycles and slow iteration. Mobile cross-platform development has always been a hot topic for mobile developers and front-end developers. From cordova and Ionic to React Native, Weex, H5, Aprons, flutter, etc., cross-platform development technologies have flourished. There must be something unique about them that can survive and keep alive. This article will briefly investigate the current popular cross-platform development technologies.

A, classification,

If there is a summary of the still popular cross-platform solutions, it can be divided into the following categories:

• Native rendering: The most obvious feature of this genre is that JavaScript is used as the programming language to map unified components into platform-related native components. It supports cross-platform, has higher performance and user experience than WebView, and is close to native applications. React Native, Weex, and Fast applications all belong to this genre.

• H5 preparation -WebView rendering: this scheme adopts HTML5 + native to carry out mixed development, using the WebView provided by the platform to render HTML5, with high development efficiency, cross-platform, support dynamic release and other characteristics, the representative product of this scheme is Ali/wechat/Baidu and other small programs.

• Custom UI: Custom UI refers to the process of drawing UI through a rendering engine that implements a unified interface on different platforms, without relying on native controls of the system platform, so that the UI of different platforms is consistent. Futter is Google’s open source mobile cross-platform UI framework, which uses Google’s own Dart programming language. As a product launched by Google, Futter is also favored by many developers.

Second, JS compilation – translation -Native rendering

Solutions like React Native and Weex use javascript to build interfaces that are translated into Native components at runtime. Virtually all interfaces use Native components. Support cross-platform, performance and user experience is higher than WebView, close to native applications, is a popular cross-platform development technology. They just have different frameworks for writing code and different times for translation.

2.1 the React Native

2.1.1 React Native Introduction

ReactNative(RN for short) is a cross-platform mobile application development framework that Facebook opened source in April 2015. It is a derivative of Facebook’s early open source Web UI framework React on the native mobile application platform, and currently supports iOS and Android platforms. The framework uses JSX(JS with some syntactic sugar), as well as CSS to develop mobile application UIs, so people familiar with Web development can switch to mobile application development with little learning cost. The official introduction uses the sentence “Learn Once,Write Anywhere”, which is very appropriate. RN cannot make a good code for all models and systems of iOS and Android, so you need to adapt according to the specific situation.

2.1.2 React Native Principle

The principle of React Native implementation is to use JS to invoke Native components and use Native components to draw interfaces, thus achieving effects comparable to Native applications. Unlike front-end development, the labels used by React Native are not real controls. React Native provides components that convert the Dom to Native controls for rendering. For example, labels are converted to the corresponding TextView control in Android.

React Native’s cross-platform implementation is mainly composed of three layers, among which the dynamic link library (.so) implemented by C++ acts as the bridge of the intermediate adaptation layer to realize two-way communication and interaction between the js end and the Native end. The core function here is to encapsulate JavaScriptCore to perform JavaScript parsing. At the same time, the various native modules provided by the native platform (such as the network request module, ViewGroup component module) and the various modules provided by the JavaScript side (such as the JS EventEmiter module) are implemented in C++ layer. Finally, the interaction between the two ends is realized through the mappings saved in the C++ layer. Its structure is as follows:

2.2 Weex

2.2.1 Weex profile

Weex is an open source mobile cross-platform development framework of Alibaba, which can perfectly balance performance and dynamics, allowing mobile developers to write Native level performance experience through simple front-end syntax, and supporting iOS, Android, YunOS and Web multi-terminal deployment. Weex supports Vue and Rax syntax, while React Native supports only JSX syntax.

2.2.2 Weex principle

Like React Native, all Weex labels are not real controls. Weex labels are only DOM generated in JS code, which are parsed by Native and rendered by Native controls. For example, in Android, the label corresponds to WXTextView control.

Weex will first write Weex source code, through Transformer into JS Bundle. Then deploy the JS Bundle on the server. When receiving the JS Bundle request from the terminal (Android, Web, iOS), send the JS Bundle to the terminal. In the terminal, JS Framework of Weex receives and executes JS Bundle code, performs data binding, template compilation and other operations, and outputs Virtual DOM in JSON format. JS Framework sends rendering instructions to Native. Provides callNative and callJS interfaces to facilitate communication between JS Framework and Native.

In the mobile application client, the Weex SDK will prepare a JavaScript execution environment and execute the corresponding JS bundle in this execution environment when the user opens a Weex page. In addition, various commands generated during execution are sent to native terminal for interface rendering, data storage, network communication, device function invocation and user interaction response, etc. Meanwhile, if the user wants to access the interface using a browser, he can open the same Web page in the browser, which uses the same page source code as the mobile application, but is compiled into a JS Bundle suitable for web presentation. It runs through the JavaScript engine in the browser and the Weex SDK.

2.3 quick application

2.3.1 Quick Application Overview

In March 2018, 10 domestic mainstream manufacturers including Xiaomi, OPPO, VIVO and Huawei established the Fast Application Alliance. Fast application is between mobile web page and native application. Third-party application is developed in the form of mobile web page, and finally gets the effect experience of native rendering. Fast application framework deep integration into the mobile phone operating system of each handset vendors can be formed in the operating system level user needs and application service seamless connection, many in native applications can use function, in applications can easily realize the fast, enjoy the native application experience, don’t worry about the problem such as distribution of retained at the same time, less resource consumption also. For each mobile device, applications can reference user experience products from multiple systems.

2.3.2 Quick Application Principle

Fast apps differ from React Native and Weex in two key ways:

• The Quick app itself does not support Vue or React syntax and is developed using JavaScript.

• React Native and Weex’s rendering engines are integrated into the framework, and each APP needs to be packaged with a large installation package. Fast application rendering engines are integrated into ROM, so there is no need to package applications, and the installation package is small.

Below is a schematic diagram of the overall framework of fast application. Application form and scene entry are on the top, fast application engine is in the middle, and OS(operating system) infrastructure and hardware are on the bottom. At the level of execution path, there are standard HTML5 ways to support common Web scenes (generally through Webview components of the system or customized Webview), and JS (Java) +Native ways to support lighter and faster experience.

Three, H5 preparation -WebView rendering

Applets are hybrid mobile applications. Developers write Native level interfaces through the developer tools of applets on corresponding platforms, use H5 and JS, generate compressed packages through the developer tools, submit them to the platform, and then request execution in the platform APP, so as to achieve Native interface experience.

Zhang Xiaolong, the father of wechat, wrote in his moments that wechat mini programs are apps that do not need to be downloaded and installed, realizing the concept of “at your fingertips” and “running out of time”. This is the biggest feature of small programs.

3.1 wechat applets

The main development language of wechat small program is JavaScript, and the development of small program is very similar to the common web development. The running environment of the small program is divided into the rendering layer and the logic layer, which are respectively managed by two threads. The interface of the rendering layer uses WebView to render, and the logic layer uses JsCore thread to run JS scripts. The communication between the two threads will be mediated by JSBridage in wechat Native. Network requests sent by the logical layer are also forwarded by Native. The framework model of the applet is shown in the figure below.

Iv. Self-drawing UI

Self-drawing UI refers to drawing the UI through a rendering engine that implements a unified interface on different platforms, without relying on native controls of the system platform, so that the UI of different platforms can be consistent. Unlike React Native, developers need to deal with the differences between different platforms as the versions of different platforms change. Some features can only be implemented on a single platform, which cannot guarantee the consistency of UI between different platforms. Examples of self-drawn UI frameworks are Qt and Flutter.

4.1 Flutter

4.4.1 Flutter profile

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on Android and iOS. It is the predecessor of Google’s pilot project Sky. The project runs on Android, iOS, Fuchsia, and other platforms that contain the Dart virtual machine, with performance that is infinitely close to native platforms. Unlike React Native and WEEX, which use JavaScript as the programming language and use the platform’s own engine to render the interface, Flutter directly chooses to use Skia, a 2D drawing engine library, to render the interface.

4.1.2 Flutter principle

Futter proposed the concept of everything as a Widget. In addition to basic text, images, cards, input fields, layouts and animations are also made up of widgets. By using different types of widgets, you can achieve a complex interface.

The Flutter Framework is mainly divided into two layers, Framework and Engine. We develop apps based on Framework and mainly run on Engine. Engine is a standalone VM of Flutter, which ADAPTS and provides cross-platform support. Currently, it is speculated that Flutter applications run directly on Engine on Android, so there is no need for Dalvik VM. Its architecture is shown in the figure below:

Unlike React Native and WEEX, Flutter does not need to use Native components to render the interface. Instead, Flutter uses its own Engine layer to draw page components. In addition, the Dart code will be compiled into the native code of the corresponding platform through AOT to achieve direct communication with the platform, without the need for bridging through JavaScript engine or using Dalvik VIRTUAL machine of the native platform. The Engine layer is rendered as follows:

The only thing that Flutter requires is a canvas to draw the UI. However, Android comes with Skia on Flutter. Skia is a 2D drawing engine library that is cross-platform, so it can be embedded into the iOS SDK of Flutter, making the Flutter Android SDK much smaller than the iOS SDK.

4.2 Qt

2 Qt profile

Qt has a long history. The first version of Qt was released by Trolltech in 1991. Later, in 2008, Nokia bought TrollTech for $150 million to use Qt for Symbian application development. On 9 August 2012, Nokia sold Qt to Digia for eur 4 million. In 2016, Qt Group Plc was spun out from Digia. In 2014, Qt began to support Android, iOS and Wp platforms on mobile terminals. While Qt is doing well on the PC, it is not doing well on mobile, and few people are talking about or using Qt for mobile.

Other technologies

Web, React-Native, wechat applets and other terminals are popular. When business requirements are expressed on different terminals at the same time, it is obviously very expensive to write multiple sets of code for different terminals. At this time, the ability to write only one set of code to adapt to multiple terminals is extremely needed.

Ironically, cross-platform technology was designed to accommodate multiple technologies, but now it is necessary to develop a set of technologies to accommodate different cross-platform technologies.

Taro, UNI-App, chameleon and other three products are more compatible across platforms. If only compatible with wechat small programs, mpvue and WePy are used more in the market;

Here’s a quick summary of the technique:

	Taro	uni-app	chameleon	mpvue
The company	jingdong	DCloud	drops	Meituan
Language specification	Class the React	Vue	Class Vue	Vue
The system template	JSX	String template	String template	String template
componentization	React Component specification	Custom +Vue component specification	Custom component specifications	Vue component specification
Data Flow management	Redux	Vuex	chameleon-store	Vuex
Support platform	Small programs (wechat/Alipay/Baidu/Bytedance), Kuaiyu, RN, H5	App(iOS, Android), small program (wechat, Alipay, Toutiao, Baidu), H5	Small programs (wechat, Alipay, Baidu), H5, native weex, quick application	Wechat applets

Seven,

Overall, Flutter is one of the best cross-platform solutions available. It can generate apps on both Android and iOS platforms using a single set of code, greatly reducing the cost of App development and maintenance. The powerful performance and rich features of the Dart language make cross-platform development easier. On the downside, Flutter is still in early beta, many features aren’t perfect, and the new Dart language adds to the cost of learning. Flutter has a long way to go before it can completely replace native Android and iOS development.

Refer to the article

Cross-platform technology for mobile development

Analysis of APP cross-platform development technology

In-depth analysis of mobile cross-platform development

H5 cross-platform framework comparison

Comparison of popular cross-platform solutions: WEEX, React Native, Flutter and PWA

Hybrid development framework comparison