In recent years, there have been more and more cross-end technologies in the front end: React Native, Weex, Flutter, Electron, Kraken, etc.

So many cross-end solutions, do they have a common idea? Can we find the fundamental principles in all these schemes?

This paper will try to explore the following questions:

  • What is cross-platform
  • What are the solutions that are cross-platform
  • What’s the difference between cross-terminal and cross-platform
  • What cross-end solutions are available in the front end domain
  • What are the common principles across platforms and across terminals

What is cross-platform

As we know, cpus have different architectures and instruction sets, and there are different operating systems on top of them. An executable file on one system is not executable on another system. For example, an EXE file on Windows cannot be executed directly on a MAC. Different systems are different platforms. Executables are not cross-platform.

Different platforms offer different apis, so the code logic may be different, requiring separate maintenance of the code on each platform. This raises several questions:

  • How to ensure that the function is consistent when multiple platforms are developed separately
  • Multi-platform development, that is not the test of their own, development and testing manpower are multiple

So there are technologies that are cross-platform, and the goal is for a piece of code to run on any platform.

Let’s take a look at some cross-platform solutions in various areas:

The browser

Different operating systems, the browser runs on the same page code. Browsers have a long history of cross-platform solutions.

Just because the web is cross-platform does not mean that the browser is cross-platform, and the browser executables are developed and compiled separately for each platform, but they support the same web parsing logic, so that the web is cross-platform.

The browser provides a container that blocks out the underlying differences and provides a unified API (DOM API) so that the same code can run in a unified container on different platforms. This container is called the browser engine and consists of the JS engine, rendering engine and so on.

docker

Docker is a virtualization technology, which can add a virtual layer on the operating system, divide one or more containers on this layer, and then run the system and app in the containers. In this way, the separation of hardware and software can be realized, the hardware resources can be dynamically allocated to the container, and the overall migration of app running environment can be facilitated (saved as an image).

Docker is obviously also a cross-platform technology, the same image can run on any operating system docker. As long as different operating systems implement the same container.

jvm

Java is a compile + interpret language, where Java source code is compiled into bytecode, which is then interpreted and executed directly on the VM.

Why is Java so popular? Mainly because it’s cross-platform.

Code written in c and C ++ needs to be compiled into executables on different operating systems to run, and the code may be different for each platform, requiring multiple copies.

Java provides a JVM container that simply compiles the source code into bytecode that can be interpreted by the JVM, and the JDK provides a uniform API that is implemented separately from the underlying APIS of different operating systems, so that Java code is consistent across operating systems.

The JVM also uses container technology to implement a single piece of code running on multiple platforms, and the JRE provides a unified API to mask the underlying differences.

The node, deno

Node and deno are also cross-platform technologies, making the JS code on them cross-platform by providing a consistent SET of apis. These apis are also implemented by different platforms.

electron

Electron has chromium built into it, and has injected node apis and some GUI-related apis into it, which is a cross-platform solution based on two major cross-platform technologies. The combination of these solutions enables electron to support the development of the desktop with front-end technologies.

Pros and cons of a cross-platform solution

The advantages of a cross-platform approach are obvious: one piece of code runs in the same container on different platforms, which saves cost by not having to develop separately on different platforms.

But there are drawbacks to the cross-platform approach:

  • Because of the additional layer of containers, performance is reduced compared to calling the system API directly

  • In order to achieve consistency across multiple platforms, it is necessary to provide a unified API, which has two difficulties:

    • How to design the API. To integrate the capabilities of different platforms, take a suitable set to implement. The design is difficult. Node, deno, and Java all abstract the capabilities of the operating system and provide their own cross-platform apis

    • Some oF the apis are difficult to be consistent across multiple platforms

    • It is troublesome when the container does not provide capabilities that need to be extended, such as the js engine’s bridge, the JVM’s jni, and node’s c++ addon are all ways to extend capabilities for the container

A cross-end solution for the front end domain

Cross-platform refers to across operating systems, and cross-side refers to clients.

The client is characterized by interface and logic, so it contains logical cross-ends and render cross-ends. The main clients include web, Android, ios, and iot devices.

The current mainstream cross-end solutions include React Native, Weex, Flutter, Kraken and their own cross-end engines.

react native

The cross-end includes logical cross-end and rendering cross-end. The logical cross-end of RN is based on JS engine and some device capability apis are injected through bridge, while the rendering cross-end uses Android and ios to achieve virtual DOM rendering of React.

Native API and components (the part drawn in gray) are not consistent at both ends. In addition, sometimes the gray part in the extension diagram needs native coordination, and the mixed RN code and the extended code makes the code difficult to manage. The most famous event is airbnb’s transition from being the biggest react Native supporter to abandoning React Native.

weex

Weex has a similar approach to cross-terminal implementation, but the upper UI framework it connects to is VUE, and strives for consistency of components and apis on both ends (although subsequent maintenance is not enough). The architecture is similar to the one above.

flutter

Flutter is a popular cross-end solution in recent years, including Android, ios, web, etc. Its biggest feature is that the rendering is not based on the operating system component, but directly based on the drawing library (Skia), so that rendering across the end. The cross-end of the logic is not based on JS engine, but the self-developed DART VM to cross the end, and the logic is written by dart language.

kraken

The cross-end consists of two parts, the rendering cross-end and the logical cross-end. Sometimes you just need to render a cross-end, sometimes you need a logical cross-end, sometimes you need a full cross-end engine, and there are scenarios for all three.

Kraken is a cross-end rendering engine, which implements CSS rendering based on the drawing capability of Flutter and achieves cross-end rendering.

Self-developed rendering engine

Cross-end engines rely heavily on the underlying implementation of components and apis, and open source solutions extend this as well, so teams of a certain size will choose to build their own.

Self-developed cross-end engines will be different from Rn and WEEX:

  • The rendering part does not need to implement virtual DOM rendering, but directly connects to THE DOM API, and the upper-layer application realizes cross-end rendering based on these DOM apis. This theoretically allows for docking with any front-end frame.

  • The logical part is also based on js engine, which directly injects some c++ implemented apis through binding, or injects some android and ios implemented apis through bridge at runtime.

The benefit of a self-developed cross-end engine is that components and apis can be self-extensible and respond more quickly to business needs. The two-end consistency of components and apis, as well as the design of unified API are the difficulties.

What are the general principles of cross-terminal

In fact, cross-terminal and cross-platform approaches are similar in that they both implement a container and provide it with a unified API, which is implemented by different platforms to ensure consistent functionality.

To be specific, the cross-end is divided into rendering and logical cross-end. Sometimes you only need a single rendering cross-end solution (such as Karen) and a logical cross-end solution, sometimes you need a full cross-end engine.

The weeX and React Native rendering parts are realized by virtual DOM rendering, which is implemented by android and ios respectively. The logical part uses JS engine, and some Android and ios apis are injected through bridge.

The flutter was drawn directly using the Skia drawing library and logically across the dart VM.

But regardless of the implementation, the idea is the same: cross-end engine needs to implement a rendering engine, implement a VM, implement various components and apis based on this architecture, cross-end container connected to a UI framework, and then the business code can implement cross-end rendering and logic based on the container API

web container

In fact, Web Container is also a cross-platform technology. It is a container implemented in the browser. The NODE API is implemented through WASM, so that the node code can be run in this container. Actually the idea is quite common, but it is a new scene.

There’s another container on top of the browser container, the container doll.

conclusion

We talked about the difference between cross-platform, which means across operating systems, and cross-side, which means across clients.

We talked about Docker, browser, JVM, Node, deno, electron, Web Container, etc. They are all cross-platform (operating system) solutions. Cross-platform has advantages and disadvantages, but the disadvantage is that the API design is difficult. Node, deno, Java, etc have their own layer API design; It is also difficult to ensure API consistency; Secondly, the extension is more complex (jni for JVM, c++ addon for node, etc.).

We talked about react Native, Weex, Flutter, Kraken, etc. Some of them are bound to react, Vue and other front-end frameworks, rendering directly from the Virtual DOM, and some of them are implemented with DOM API, which can connect to any front-end framework. Of course you can do the render or logical cross-ends alone. The rendering cross-side can be provided by Android and ios, or drawn by yourself, and the logical cross-side can be used by JS engine (which can be connected to the front-end framework) or dart VM.

Hopefully, this article has given you an understanding of the ideas and pros and cons of cross-end and cross-platform containers, as well as a quick understanding of new technologies such as Web Containers.