From Hybrid to React-Native: History of the mobile terminal JS Nanzhengbeizhan

Note: due to ignorance Dart, so this does not flutter content elaborate, really sorry

In fact, writing this article, I know, certainly someone asked me: Why do not you write flutter? Sorry, flutter in the name of course I know, but I just wrote a JS, as well as some knowledge of Java, the programming language used and flutter, I do not touched, so naturally not dare speculate, please understand

Hybrid

Hybird is a mixed-use development application, you can achieve interoperability JS and Java code, simply use ios / android native implementation, progress and development costs can not stand, and simple to use h5 / js development, experience more pages can not stand. Hybird The aim is to achieve a trade-off between the two H5 and Naive

Hybird implementation

Hybrid is based on the native webview controls to achieve, it is mainly to solve two problems:

Shengduan how the original call JS code
JS code for how the original call Shengduan

This problem is further extended, subdivided into the following four questions:

Q1 : JS how to call Android Code
Q2 : how to call JS Android Code
Q3 : JS how to call IOS Code
Q4 : how IOS code calls JS

Q1 : JS how to call Android Code

JS is how we talk about the next tune Android code

There are three kinds

JSInterface
JSBridge
UrlRouter

1) JSInterface

From our front-end look, ah, like this drops ~: In Android ah, a man named WebView control, this control is used can be put inside a web page and then run it! Our front-end for the time being it understood as a Android APP in an embedded micro-browser, ha ha. And then, the WebView control objects can also call a method.

Called webView.addJavascriptInterface (interface object, interface name) of the method, after the call, webView controls inside HTML pages of JS code, you can call the native method just addJavascriptInterface method in the interface object of the! So this way, we can indirectly call the native Android code from a JS, from building bridges

For example, given the following example, we JSInterface a class, which can eject a method of showToast native Toast

Android native code

webView.addJavascriptInterface(new JsInterface(), "control”);
// …
public class JsInterface {
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
            log("show toast success");
        }

}

JS code

// the WebView in JS code, note that the above control is defined namespace addJavascriptInterface 
function showToast (Toast) { 
  JavaScript: control.showToast (Toast); 
}

Reference material

Good communication and h5! Several hybrid communication common

2）JSbridge

From our front-end look, ah, in fact, it is like this drops ~: that is, Android, ah, there is such a WebChromeClient component, which is a sub-class mentioned above WebView control. Yes, it can also put a page to run it in there, and it cow beer is this: you are in the internal pages of the JS doing three things can be WebChromeClient to listen to the outer layer: namely, the front end of the alert method , confirm and prompt method method. As long as you move these three methods, the data they transmit will be blocked and access to external WebChromeClient, which provides a convenient channel for JS tune Android code. Oh, three methods so much energy? Under normal circumstances, we would choose the prompt method, because the alert JS method used relatively more frequently, there is a possible conflict

3）UrlRouter

This stuff is the same as or above, Android WebChromeClient control of the class, it has a shouldOverrideUrlLoading this method, this method can control the JS internal pages Url request to intercept, of course, you write the data in the Url also they are collectively acquired.

Summary: Plainly JSInterface, the main role is to provide JSBridge and UrlRouter native code JS tune the way, take a bridge

Q2: Android how to adjust the JS code?

1）web view.loadUrl

有了上面的经验你肯定知道，这事还是webview这位老哥来做的，它可以通过调用webview.loadUrl方法加载一个HTML页面，这样HTML中的JS脚本不就被调用了吗？

webView.loadUrl(“...//my.html”);

2）webView.evaluateJavascript

上面的loadUrl有一个问题，它会导致页面刷新，而且通过加载文件的方式执行JS代码总不是我们认为最优雅的方式，我们可能期望的是执行一段指定的代码，而非一个文件，webView.evaluateJavascript就是做这件事情的，以下的代码可以执行一段JS代码

webView.evaluateJavascript（“JS代码”，Callback对象）

哦，对了，不好意思，上面讲的是Android的，下面讲下IOS怎么做

Q3: IOS代码怎么调用JS

1.可通过webview.stringByEvaluatingJavaScriptFromString方法调用JS方法，但前提是该JS方法在顶层Window对象上

webview.stringByEvaluatingJavaScriptFromString("方法名(参数)”)

Q4: JS怎么调用IOS代码

可通过 shouldStartLoadWithRequest方法进行拦截JS请求，从而感知JS的调用发起，并进行相应处理，以达到JS调用ios的效果

Hybrid也曾在移动端连接H5的童话世界中风靡一时，但由于对webview以及H5的过度依赖，导致它的体验性问题一直让人困扰，所以自从React-Native横空出世后，后者便蚕食了前者的半壁江山。

React-Native

RN的作用

跨平台：可以为IOS/Android，甚至Windows Phone开发原生应用
相对良好的UI体验，平衡开发成本和用户体验后相对合理的选择

RN的本质

不是WebView,和Cordova等Hybrid方案划清界限
不将JavaScript预编译为Native代码，和Xamarin等方案划清界限。Xammarin的方案是AOT的，运行前就编译为原生代码，RN则采用JIT+解释器的方案（IOS另当别论）
RN是虚拟机类的方案，依靠运行时系统JavaScriptCore运行

RN的4个线程

UI线程：也成为主线程，负责本机的Android/iOS的UI呈现，在android中它负责android测量/布局/绘制
JS线程：执行JS/React代码，进行API调用，处理触摸事件等，对视图的更新被进行批处理，并在事件循环结束时发送给UI线程
Shadow线程：处理虚拟DOM布局变更的线程
本机模块线程：如android/ios系统自带的原生API

RN的3部分

Native端（IOS/android）
JavaScript端
Bridge：上面介绍的多个线程之间相互通信，以及JS和Native端通信的方式的统称

线程协调过程示例

以下面一段RN代码的执行为例，它在JS线程中执行

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <View style={{width: 100, height: 100, backgroundColor: "red"}}></View>
</View>

注意原生端有自己的布局实现，所以上面的flex属性和CSS是没有任何关系的。
为了实现布局，同时又不阻塞JS线程，布局计算将转移到Shadow线程中进行。
Shadow线程进行计算，并最终将计算结果得到的布局参数传递给主线程（UI线程），实现UI的构建

RN中的Bridge做了什么？ && RN线程如何交互？

异步：线程之间，例如JS线程和UI线程，以异步的方式进行通信，这样它们就不会互相阻塞了
批处理：以优化的方式，把消息从一个线程传递到另外一个线程
序列化：两个线程不会操作或者共享同一块数据，它们之间会通过序列化和反序列化的方式交换消息

RN线程异步带来的某些问题 && 未来的解决方案

RN中的JS线程和UI线程之间是没有同步的方式的，这可能造成一些问题，但RN未来的Fabric也许能提供这一功能

RN的Web化:react-native-web

react-native-web 组件的内部，会把 React Native 的 API 映射成了浏览器支持的 API。将RN的代码转化成浏览器能支持的代码

RN-web和普通的React的区别？

RN-web尽量做到不侵入RN代码，不影响RN代码的逻辑，争取能够在基本不动RN项目代码的情况下，将其H5化，RN-web项目的基本逻辑还是RN，不是React

RN-WEB的作用

实现IOS/Android/Web的三端构建