Why build applets with React
Learn once, write anywhere.
Because React is the technology we’re most familiar with.
There has been a lot of poking fun at the poor API design of small programs, so I won’t repeat it here. Add to that a plenum of applet platforms, each with its own differences, and that’s a recipe for disaster for applets with cross-platform requirements.
The React community ecosystem is very large, and by introducing React and the logical abstractions provided by React Hooks into small programs, we can directly take advantage of the large amount of technical precipitation in the React ecosystem (e.g., React – Use, Field-form).
More complete TypeScript support. You can also use TypeScript to write existing applets, but due to the architecture of applets, there is a natural separation between the template layer and the logical layer (pages). Even if you use TypeScript in the logical layer, you cannot use type-checking and auto-completion in the template layer. By introducing React, all our code runs in the logical layer and can be statically typed throughout, giving you a sense of security.
Existing programs
Currently, most of the solutions using React to build small programs in the community are implemented by static compilation. The so-called static compilation, is the use of tools to code syntax analysis, the JSX part and logical part of the extraction, respectively, the production of small program template and Page definition.
The biggest problem with this approach is that it has a lot of limitations, because the parsing is static, so they tend to restrict the dynamic writing. In addition, because of the dynamic nature of the JavaScript language, parsing itself is a complex task, so these schemes are often very complex to implement.
Most importantly, when statically compiled, your code turns into applet code that doesn’t actually have React at runtime. You’re just writing React instead of actually using React as an application.
Our solution
Earlier this year, @xcodebuild showed you how to use React with Hooks in small programs. This is a very innovative solution. After we have perfected this solution and verified it in the online applet, we officially released the applet development framework based on React:
https://www.remaxjs.org
Remax allows you to build small programs using React, which you can think of as React Native for small programs.
Remax principle
First of all, let’s look at the architecture of small programs (Alipay and WeChat are much the same) :
As mentioned above, the applet architecture is divided into two layers. The logical code you write runs in a separate process, and each page has its own renderer process (i.e. a WebView) to render the template. The entire applet runs in the APP container (that is, Alipay and WeChat itself). The logical layer and the view layer communicate by establishing a message channel.
Here’s the React architecture:
The bottom layer is React itself, and the upper layer of Reactdom and ReactNative are called “Renderer”. Renderer and React use Reactreconciler to render elements (also known as “virtual DOM”) to the corresponding platform. Remax is a Renderer that we implemented to render the “virtual DOM” to the view layer of the applet.
As you can see, we run React and Reactreconciler in the logical layer of the applet and render the generated “virtual DOM” to the view layer with Remax. So we can use real React to build small programs.
The last
As mentioned in the first paragraph, running React in a small program brings a lot of imagination. Small program itself is a kind of innovation, it divided the application into two layers to improve the rendering speed of the view layer, but slightly after the start option using private and backward (at least for now is backward) technology solutions for defining small programs, and the followers in order to attract developers WeChat small program also USES the similar design. Remax hopes to break that down and bring a whole new mini program development experience to developers through an open ecosystem.