JavaScript react Web library concept analysis and based on the finger South _ other

The purpose and meaning of the react Web is very clear: let react native code run on the web so that a set of code runs at each mobile terminal, for the front-end and the business, this is a qualitative improvement in development efficiency. At the beginning of the project, we consulted the react team about similar issues, and the core students of their team @vjeux thought it was cool and they wanted to do it in the future. It may also be possible to publish the react Web when publishing react Native for Android. (yy)
Technical Framework
based on the React native adaptation scheme, there are several:
1. Establish a bridge standard, RN and RW each use the best way to achieve this set of standards.
For example, based on flex layout, we achieve a consistent set of Flex Component, <Flex>, <Cell> and so on.
2. Fully to the RN, RW implements all of the implementation of the RN API.
In the discussion, the latter was eventually chosen.
Because the idea of react the web, let react native code run on the web side, then decided that RW is just a build and packaging tools, the implementation of the absence of RN,RW is not much meaning, then the overall technical direction is very clear: the implementation of the RN consistent style, Component and APIs are eventually compiled into the web version through the build tools.

Example

Let's take a look at the React Web project creation process:
First step: Install the React Web and configure it
This step is primarily to install react-web packages and dependent dependencies, and configure Webpack packaging scripts.
To simplify this step, we developed a command-line tool REACT-WEB-CLI only two lines of command to execute. The command-line tool also supports the ability to start a debugging server, package, and so on, as described later.
To install the CLI tool:

NPM Install React-web-cli-g

Install configuration react Web etc:

React-web Init < current project directory >

After the execution is complete, the NPM install related library under your project directory, and automatically creates the Web/webpack.config.js file, which has a well written configuration. At this time the directory structure is:

.
├──readme.md
├──android/
├──index.android.js
├──index.ios.js
├──ios/
├──package.json └──web/
 └──webpack.config.js

Step Two: Add the Portal file and configure it
each project needs to have a portal file that is typically used to introduce calls to other components and initialize the project, such as Index.ios.js, which represents the entry file for the project on the iOS platform. To conform to the React Native file naming specification, we create a index.web.js as the portal file, and we need to specify the file as the entry file in Webpack. Open the Web/webpack.config.js file and modify the config variable:

var config = {
 paths: {
 src:path.join (Root_path, '. '),
 index:path.join (Root_path, ' index.web ')
 , },
};

Then we create the Index.web.js file. This file is actually very much like Index.ios.js, just a little different. The main difference is that IOS only needs appregistry.registercomponent (' Awes ', () => Awes); You can let Xcode's Native code receive processing your JS code, and the Web side needs to be inserted into the DOM node to be able to use. So we need to add the following code at the bottom of the index.web.js:

Appregistry.registercomponent (' Awes ', () => Awes);
if (Platform.os = = ' web ') {
 var app = document.createelement (' div ');
 Document.body.appendChild (app);
 Appregistry.runapplication (' Awes ', {
 roottag:app
 });
}

Then the Platform component needs to be introduced in the top require section. So the configuration part has already been processed and the React-web Start command is ready to start the debug server!

Can be arbitrarily modified to try, with the react Native simulator inside the experience almost the same.
Step three: Test and package the Web version code
when you have completed the development and tested the WEB side, you are ready to pack and publish. The commands packaged by the REACT-WEB-CLI tool are:

React-web Bundle

After the package is complete, the file will be stored under the web/output/directory, you can open the index.html directly (if the app has a request, you need to view the local server), then check it and release it.
What happened in the process?
Curious students see here may have some questions, the above command line tools Some of the commands do what? Why does the react Web package react Native code with a web-side code? React Web safe and reliable, what's inside?
Here is a brief introduction to the implementation of the react Web and what the above steps actually do.
The react Web implements the Web side of the React Native component
React the code and Platform environment separation, a layer, so that developers can do at the platform environment level to do some processing, so that the same code to adapt to more platform environment.
For example, React-canvas writes code in React's syntax, does some processing on the platform's environmental level (runs your react code and renders it canvas), and then achieves a specific goal (improving performance on the mobile side).
React Native, a code that runs on both IOS and Android is the same thing. The React Native team has done some processing on the Native app of the corresponding platform to parse the code that executes the react syntax.
also has the isomorphism (isomorphic) the application, the server side uses react + node.js to generate the HTML, the client uses react obtains carries on the client correlation interaction and the function, is also the same reason.
To this end, react v0.14.x version began, specifically divided into two libraries react and react-dom, in fact, the browser platform for the special processing stripped out, a separate react-dom library.
React Native more special place is that the implementation of the bottom of the component is Native implementation, so does not support span, div and other tags. and animation, and so on, is directly called Native for interface rendering. Therefore, the web side is not supported, but most of the components can be simulated with web technology. The animation can use the CSS3, the base element can use the equivalent HTML tag simulation, the layout as well as the compatibility question may use the CSS to handle, therefore the react web only needs to carry on the react Native the component to use the Web technology to realize again, through the react this layer, can realize a generation Code runs on multiple platforms.
To give a very simple example, the Text component:
The implementation of the React Native is implemented by invoking a number of react Native underlying code.
For the web side, output one line of text to use <span> tag, so the implementation of the react Web directly to a <span> tag, tied some events or something on the OK.
You can safely use the React Native component that runs in the UI Explorer demo.
webpack to help you switch your packaging targets.
To make a compatible WEB-side component, would it not be packaged to replace all the require (' react-native ') in all packaged components into require (' React-web ')? How else would you use my Web component to package?
The powerful Webpack comes with an alias configuration entry to help you solve this problem:

Resolve: {
 alias: {
 ' react-native ': ' React-web ', '
 reactnativeart ': ' React-art ',
 },
 extensions: [', '. js ', '. Jsx '],
},

In this way, whenever require (' react-native ') is replaced with a react-web package at the time of packaging, the React-web module.exports is consistent with react-native so that the code does not replace or work.
In addition, the plug-in can also implement another method of introduction, see below.
introducing components through the haste method to improve performance
Webpack and other packaging tools that support the COMMONJS specification package all the components of require in the file. For react Native, the size of the code doesn't matter, and it's a little bit more important on the Mobile web. Especially if your project only needs Text components, but because require (' react-web ') results all the components are packaged in, it is more sad.
Based on the Webpack plug-in, you can also introduce a component to solve the problem in a different way, which you can call it haste. In this way you need to load the Webpack plug-in haste-resolver-webpack-plugin, the default Webpack configuration has been loaded for you, you can use it directly in the component:

var Text = require (' Reacttext ');

And not the way it used to be:

var {Text} = require (' react-native ');

This way, when Webpack is packaged, only the contents of that component will be packaged in, thereby reducing the volume and improving performance. How does this happen? When the Webpack package for a plug-in is loaded, it scans all components and reads the information @providesModule the component's head (such as the Text component), and then automatically navigates to the file for packaging when the component name is require in the other file. You can also differentiate the platform, even the same name, by packaging the platform to package the corresponding file (according to the Index.xxx.js naming rules to determine the file).