Application practice of React Native three-terminal fusion in Hujiang

Learnonce write anywhere.

Some components have poor performance.

There are some early development costs and convergence development costs.

At present, most of Hujiang applications are completed independently by three terminals, and the overall reuse rate is very low.

Access online pages through Web containers to achieve multi-end reuse requirements.

The great thing about native is that it’s a great experience.

Its disadvantages are also obvious, once there is a need to frequently release, Android and iOS need to maintain two sets of code, the overall code reuse rate will be very low.

The business side needs to write a lot of compatibility code to judge. For example, in Hybrid you call container-exposed methods, and in H5 you call native methods.

The experience is much worse than the original.

When using online pages, there will often be the problem of CDN hijacking by the operator. When encountering network problems, the code cannot be displayed, which makes everyone very headache.

Three-terminal fusion is the hope that a set of code can be reused three. However, from our perspective, not all pages need to be three-way, and we will limit the complexity of the page with some restrictions.

We consider using the React Web component, with React at the bottom.

The second option is to use Bable to compile React Native code directly into React code.

Another solution is to provide a complete Web framework to display React Native code to the browser.

If you use the React Web component +React, initial development costs are lower.

The components of ReactWeb are very complex, and the cost of developing each component and API is still high, resulting in component code redundancy.

The API is uncertain, and the hidden risk is that if React is tweaked, the entire framework will be tweaked accordingly.

The underlying optimizations can be complex. React is difficult to control, and some business scenarios need optimization. We only optimize the React Web layer, but the optimization of this layer may not be well mapped to the next layer.

This solution is actually a bit of a rash idea, and the business complexity is very high because there is no control over the code written by the business side.

Its biggest advantage is that the business side can make the transformation later and then make the next adjustment. But the cost of the scheme is still too high.

Finally, we chose Web Component + customization framework.

We regard React Native code as a DSL language, and put a layer of our Own React framework in the middle to ensure three-terminal compatibility of some components. We will also use some community three-terminal components to make some modifications to meet our business requirements.

This solution removes uncertainty from component and framework dependencies.

A lot of functionality that would have been done in a component can be done in the framework layer, reducing redundant code in the component.

The React internal calls may use only a providesModule for inter-module calls, but Web components cannot directly invoke these capabilities in the framework in this way. We can take these apis out of the ground and introduce them directly into the Web Component + customization framework solution.

The other thing we need to do is make sure that the components are compatible, that they work on both the Native side and the Web side.

The API will also be extended to hybrid solutions. You can make a hybrid judgment at the API level, provide some richer API capabilities on the Web, and then adjust them based on actual development.

React Native is treated as an H5 page with a better experience in our business.

Most people who develop React Native code are Web developers and don’t use a lot of components and apis for Web development. For those components and apis that won’t be used, we’ll write an empty method and give a hint.

Handle the props in the React Native component, convert it to the corresponding Web implementation, or hand the initial processing to the framework for secondary processing.

Process the React Native API, call the Web API, and call the Hybrid API in the downgrade solution.

At the framework level, we still use React. The React framework includes component life cycle, setState and update queue, event system, and Vitrual DOM.

We streamlined the framework to eliminate some of the unstable apis, the apis provided by React but not by React Native, propTypes, event composition, and support for older syntax and browsers, simplifying parts of the transaction system and scheduling system.

The features to be added to the framework are the props(Style) processing, the partial public API, and the React Native framework API.

The advantage of integration is that it reduces the frequent introduction of apis, optimizes the cost of writing the entire component, and makes the package size smaller. Reduced repetitive props checks and improved operational efficiency. Integrate Webpack2 to help businesses reduce some of their introduction of unnecessary code.

The role of a horizontal team in RN development is to provide a complete technical architecture solution, as well as the assurance of the technology after landing.

We provide a set of test containers for the development environment.

Web development sends test packages to quickly see how things are running in the APP.

Provides the ability to hot update application code.

When the error rate reaches a certain value, the monitoring alarm will be triggered, and then an email will be sent to remind the business side, and the business side can choose through the configuration center.

Login, BI, Share, APP, RouterManger.

We believe that the best way to optimize performance is to maximize strengths and avoid weaknesses. At present, we are mainly engaged in preloading and targeted optimization, as well as optimization of RN itself.

More components will be needed in our custom component layer in the future. We will consider encapsulating some capabilities on React, as well as making more adjustments to the actual business.

That’s all for today. Thank you for listening!