preface

The Rax q&A group often asks questions like, “I’m running Rax version 1.1.4, what should I do to use applets native components? “From this problem, it is not difficult to see that from the perspective of users, Rax is no longer a single point feature like React DSL-driven multi-terminal rendering, but a more diversified cross-terminal solution, which is more three-dimensional: DSL + RESEARCH framework + auxiliary tools + platform.


Typically, the first line of our response is: “What project are you using? Can I take a look at build.json?” Therefore, it is not difficult to see that the multi-terminal solution provided by Rax is closely related to the engineering and R&D framework.

Since graduation, the author has also participated in some multi-related Rax affairs, including Taobao applets, Rax applets, Rax App development framework and so on. The purpose of writing this article is to summarize some of the achievements of this year’s cross-end project of the Front-end Committee, and to further understand what happened in the process of realizing multi-end consistency of Rax cross-end framework as well as the thinking and choice behind it.

Rax App development framework

From the perspective of developers, what we deal with them directly is the Rax App development framework. So, what is the FRAMEWORK of Rax App development? 1. Rax App provides the ability to build multi-end products, which is the most essential appeal of developers; 2. Rax App provides out-of-the-box build configuration capabilities; 3. Rax App provides best practices for project development; 4. Rax App will adapt to different containers to provide multi-terminal and consistent performance as far as possible.

More importantly, unlike many multi-end solutions on the market, Rax App does not focus on the ability of any particular container. Our goal is to make all supported containers the best in the industry in terms of performance and use experience.

The thinking behind the Incremental React DSL

Rax App itself is inseparable from Rax DSL. From the current perspective, Driver design is still advanced. Even the React-Reconciler can be found in Rax Driver. The essence of multi-terminal rendering is the ability of the renderer to draw the view API, so the Driver provides a good way to decouple the business logic itself from the container drawing capability through the VDOM.

JSX itself brings with it a rich community ecosystem and an easy-to-use, intuitive development approach for business use. Further, in order to simplify the complexity of business use of some scenes, Rax provides JSX+ writing method, which can easily complete conditional rendering through x-if instructions. However, this is currently not a good TypeScript support, and will be addressed in the upcoming TS 4.2 release.

In the future, Rax DSL and React DSL will have more judgments and choices in line with wireless business scenarios under the condition that the usage of Rax DSL and React DSL are as consistent as possible or a subset.

Engineering and multi-terminal solutions

Ability to profile

Rax App currently supports the construction of Web/ applets /Kraken/Weex products. It provides PHA, SSR and other performance improvement schemes on the Web, compilers and run-time dual-engine schemes on the applets, and Kraken and Weex are supported on the Native side.

Small program

Small program capability is an important part of the front End Committee’s cross-end project. In S1, Rax itself has focused on improving the performance of run-time solutions and providing dual-engine hybrid solutions out of the box.

Solution implementation is not described in this article, you can see the following article:

  • Rax applet solution under multidimensional contrast
  • How to choose applets framework in 2020

What I would like to introduce more is, in the process of implementing these solutions, what is our thinking? And what problems you encountered and how you solved them.

UI resource references

In the scheme of Rax applet, we support the ability to use native applet components, Rax compile-time components, native applet pages and plug-ins in run-time projects, and support the use of native applet components, plug-ins and pages in compile-time projects.

Behind the rich combination of capabilities we need to consider, IDE response speed, user motion speed, use consistency and so on. Improves IDE hot update response by avoiding repeated writes to JSON configuration files. By copying package.json, automatic installation dependencies avoid redundant installation processes due to Alipay build restrictions. Using AST analysis to automatically find native DSL writing helps developers by directly importing Buttom from ‘.. /miniapp-native/Button/index’

Dual engine mixing and subcontracting loading

Behind dual engine mixing and subcontracting loading, we follow the principle of “convention over configuration” in addition to engineering builds. For example, place compile-time components written with JSX under miniapp-Compiled; In the subcontracting mode, the level 1 directories under SRC/Pages are independently subcontracted, while building Web artifacts that behave almost equally.

In addition to the above said, Rax small application project also did a lot of things, we really value, each business propose on the appeal, in the experience, build capacity in this huge system, we also hope to and develop Web development of small programs, to seek the optimal solution we can think of. In today’s complicated business, there is no perfect solution, only to constantly weigh and choose the best practices we recommend.

Web

Wireless Web page is also the field that Rax has been deeply engaged in for the longest time. We provide SSR solution faster than React and PHA solution combined with WebView: Provides capabilities like multi-page TabBar, slide-across, caching, Prefetch, same-layer rendering components, and more through framework capabilities, as well as more basic snapshot and survivability capabilities.

Configuration to simplify the

One of the most annoying things about the front-end is webpack, thanks to build Scripts, which has pulled through the group’s front-end engineering architecture. Therefore, Rax App can easily be configured like the following:

alias
{
  "alias": {
    "@components": "src/componentns"}}Copy the code
minify
{
  "minify": false
}
Copy the code
babelPlugins
{
	"babelPlugins": ["babel-plugin-import"]}Copy the code

See this document for more usage. What I want to say is that the common build configurations of Rax App almost always take into account that you can easily achieve the build effect that your business wants without worrying about the implementation behind it.

Runtime experience consistency

In this section, I will take the life cycle as an example.

React: componentWillMount () componentDidMount (); React: componentWillMount (); What does the full life cycle mean more? It’s more about the life cycle of an application.

What can a full life cycle do?

  • Burial point: for example, I need to report an exposure point when the page is switched over.
  • Monitoring: for example, how to collect errors reported on some pages, assuming that we have our own monitoring system, how to see what problems exist in our online business.
  • Responsive interaction: for example, when switching from page A to page B, if page B performs similar login operations and then returns to page A, we need to have a life cycle of page A to realize some view changes, such as permissions, or state switching, etc. Our team now provides a solution for multi-terminal framework, hoping to make the development experience of users in the development of background, PC, wireless and other multi-terminal applications consistent, so as to reduce the starting cost of development team members.
  • Clean up timer: Avoid memory leaks or unnecessary event callbacks.
  • Get startup parameters: for example, in applets, required during application startup, such asonLaunchPhase to get some startup parameters and so on.

Therefore, based on the above requirements and the real pain points in the business, we made a consistent life cycle of multiple experiences, which is mainly divided into two parts:

  • App lifecycle: Includes App startuponLaunchEvent, application erroronErrorEvent, appliedonShowEvent, appliedonHideEvents. In the future we may include events for TabBar clicks, such as the ability to do some exposure burying when clicking on TabBar, which will expose the relevant life cycle for TabBar operations.
  • Page life cycle:usePageShow 、usePageHideSuch as Hooks,onShow.onHideSuch events.

Why are usePageShow, usePageHide called Hooks, onShow, onHide called events? This is because a lot of useXXX that I see in community solutions are actually CALLS to the API, not really Hooks, that is, the way the API is called has nothing to do with Hooks themselves. Which is different from onShow in that usePageShow is triggered after the component has finished rendering, whereas onShow is triggered when the component sample is initialized as soon as the page comes in. That will trigger this onShow event.

Whether it’s Weex, Kraken, applets, Web, etc., our solution is completely consistent, including the trigger timing and trigger order, so that your business logic is completely consistent at the time of development. UsePageShow is done after the component is rendered, and onShow is done when the component is instantiated, when the page is first entered.

Conclusion: Rax cross-end framework outlook

Rax’s vision is to open up multi-terminal system based on front-end ecology. In the construction of cross-end architecture, the R&D framework needs to play the role of both builder and leveller of experience consistency. In the future, we will through the research and development of Rax App framework provides more best practices, such as monitoring, buried point, data request and so on, it will also keep as far as possible restraint, stability, test coverage, ensure the framework itself generated bundle only contains code to meet the needs of users, to explore new solutions improve construction speed and so on.

Finally, THE author would like to say that the growth and development of Rax cannot be achieved without the support of all business parties. Thank you for choosing Rax, and thank the students who may be neglected or neglected by us in answering our questions. It is good to have you, and Rax will be even better with you.