Comparison of React-Native and the underlying framework

Sajjad Hussain
Sep 16 · 4 min read
Image for post
Image for post

Framework

  • js layer This layer provides various components for developers and some tool libraries (event distribution, etc.).
  • The C++ layer mainly deals with the communication between java/OC and js (JSBridge) and the execution of Java (JS script engine).
  • Native layer (Object C/Java layer) mainly includes UI renderer, network communication and other tool libraries. There are different implementations according to different operating systems.

UI

Based on the react framework (virtual dom)

  • First, the Js layer builds Component through Virtual Dom written by jsx
  • The Native layer converts it into a real DOM and inserts it into the page of the native App.
  • When there is a change, the difference object is generated through the diff algorithm
  • Finally, the Native layer applies the difference object to the page elements of the native App.

Communication

Realize the interaction between js and java/oc based on JSCore

  • Parse JSX code into java code
  • Read the JS file and execute it using the JS script engine
  • Return an array, the OC/Java object will be described in the array, the properties of the object and the method to be executed will be described, so that the object can set the properties and call the method.

Pros and cons

Advantage

  • Native rendering->native experience
  • React facilitates front-end development
  • Hybrid technology cross-platform development, cost and difficulty are lower than native
  • Hot update for easy iteration

Disadvantage

  • The supported styles are a subset of CSS, which will not meet the growing needs of web developers;
  • There are still some instability problems under existing capabilities, such as performance and bugs.
  • All rendering work is handed over to the client for native rendering, which will have a closer to the native experience, but in fact, some simple interface elements are completely capable of rendering using Web technology.

The underlying framework of the applet

Dual thread architecture

  • The rendering layer uses WebView to render WXML+WXSS
  • The logic layer uses JsCore to execute js scripts
  • Webview thread isolation, one webview thread per interface
  • Thread communication via WeChat native
  • Logical layer network requests are forwarded via WeChat native

The reason

  • UI rendering and Java script execution are in two threads separately, so as to avoid some logical tasks from preempting UI rendering resources.
  • In order to solve management and security issues, a sandbox environment is provided to run the developer’s Java code (logic layer), thereby preventing developers from using open interfaces provided by some browsers, such as jumping pages, operating DOM, and dynamically executing scripts. .
  • The separation of the rendering layer and the logic layer also provides the possibility to run in different environments (small programs and small program developer tools)

UI

Page rendering

1. In the rendering layer, the host environment will convert WXML into JS objects first, and then render the real Dom tree.

2. When data changes occur in the logic layer, the data needs to be transferred from the logic layer to the rendering layer through the setData method provided by the host environment

3. Compare the differences before and after, apply the differences to the original Dom tree, and render the correct UI interface

Component system

Exparser component framework + native components

When native components are rendered

1. The rendering layer webview creates components, inserts them into the DOM tree and calculates the layout (position and width and height)

2. Notify Native through the communication mechanism, and Native will insert a native area according to the layout and render

3. When webview knows that the position or width and height have changed, notify Native to make corresponding adjustments

Communication

View layer <-> client (most native components involved)

  • iOS uses WKWebView to provide messageHandlers features
  • Android is to inject a native method into the window object of WebView, which will eventually be encapsulated into a compatibility layer such as WeiXinJSBridge

Logical layer <-> client

  • The iOS platform can inject a global native method into the JavaScriptCore framework
  • On the Android side, it is consistent with the rendering layer

Developer tools

  • In the developer tools, the logic layer actually uses a hidden label to simulate JSCore. And through local variableization of BOM objects that are not supported in JSCore, developers cannot use BOM normally in the applet code, thereby avoiding unnecessary errors
  • The bottom layer of the developer tool maintains a WebSocket server, which is used to establish a reliable message communication link between WebView and the developer tool, so that interface calls, event notifications, and data exchange can proceed normally, so that the applet simulator becomes a unified Overall

Pros and cons

Advantages: separation of rendering layer and logic layer -> fast rendering and fast loading

Disadvantages: thread communication delay, setData has no diff operation, frequent operations will have obvious performance problems

Same point

  • Have the advantages of hybrid technology
  • Close to the original experience
  • Cross-platform development
  • Use Web-related technology framework to write business code
  • Each has implemented a cross-language communication solution to complete the communication between Native (Java/Objective-c/…) and Java (the rendering layer and the logic layer in the applet)

Cloud Belivers

Everything you need for your next application task

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store