Shulou(Shulou.com)06/02 Report--

Research and analysis of technical documents before refactoring, including why technology selection chose react, matters needing attention in the process of application, and so on.

First, why choose React

React is the most widely used front-end framework. Comparison of Angular, React and Vue among the three SPA frameworks.

Angular appeared first, but it does not have the innovative performance optimization of React in principle, and it is relatively cumbersome. Vue appeared the latest, its core principle learned React, but the grammatical form of change, relational speaking, React is a pioneer, Vue is a learner. The React community has strong vitality and innovation, and revolutionary innovative products continue to emerge, including React Native,Vue, which can use JS to operate native controls, and later followed up to learn similar Weex, but the two are much less mature.

At present, the ecosystem of React is much larger than that of Vue. In the largest technology communities, such as github and stackoverflow, the search results of React are about 10 times that of Vue. In addition, according to recent statistics, the number of sites using React is hundreds of times higher than that of Vue. Greater ecology means more available resources and more effective reference and help when you encounter problems, which is the core reason for choosing React in addition to performance.

After choosing React, the application will improve in the following areas.

First, the original inter-html jump has a brief white screen, especially on machines with poor Android performance, while React does not have this problem as a single-page app. Second, the virtual DOM provided by React includes the Diff algorithm, that is, a copy of the original dom copy. Compared with the modified dom, only different dom nodes are rendered to achieve minimum cost rendering. There is no doubt that vdom's innovative performance optimization methods improve the performance. Third, the core component technology in React, easier to bind event behavior, dynamically update specific dom, more modular code, easier to reuse code, clear structure and easy to maintain. Second, use React on the mobile side

The three frameworks have their own things on the mobile side. Ionic,React of Angular, Weex of React Native,Vue. Among them, ionic is based on cordova technology and is still a browser application. The latter two have risen to the level of operating native controls, making a native interface, in which React Native is much more mature than Weex and has been used by many companies, while Weex users are few.

From a comprehensive point of view, the choice of React ecology is obviously the best, the transition from the current cordova to cordova+Reactjs, and then a smooth transition to React Native, comparable to the optimal mixed development mode with native performance. The reason for smoothing is that nearly 90% of the code (JS) in React Native can be used on IOS and Android, and the rest of the native code can basically find available resources, just like plug-ins in cordova. After all, if you need to master JS, OC (or swift), java (or kotlin) at the same time to develop React Native, then no one will use this technology; of course, if you have native development knowledge, it will be helpful to develop React Native.

The direct transition to React native involves changes in the underlying architecture of the application, which has a large span, and it is relatively easy to convert to cordova+Reactjs, and it is also easy to change from cordova+Reactjs to React Native, because most of the Reactjs code can be reused.

III. The choice of Reactjs development tools

First of all, the development of scaffolding officially released Create-react-app, which integrates the most popular packaging tools of webpack-, the transcoder of babel- to improve the compatibility of js versions, as well as ESLint- code detection tools and other commonly used tools. At the same time, these tools are optimized. It is worth mentioning that the scaffolding hides the configuration files of these tools, which is intended to allow users to focus on coding, but in practice, they usually have their own configuration requirements, and the hidden configuration files can appear when npm run eject is executed.

React-router is an officially recommended routing management tool. Because the single-page application is different from the original html interface jump, the jump is essentially carried out between components, so there needs to be a routing management tool to unify management. It is worth mentioning that React-router in conjunction with webpack enables code to be loaded on demand.

Generally speaking, the webpack package will generate a compressed js file, and the single page application will load the file as a whole. Because the js file contains all the previous js code, although it has been compressed, it still has at least a few hundred kb. When the application is a little more complex, the packaged file will become larger accordingly. When loading, regardless of whether the code is executed or not, it will be downloaded and loaded, resulting in a waste of performance, which is obviously very important on the web side, while in cordova, packaging the js code directly locally is tantamount to skipping the download step but there will still be a loading process. By writing the require.ensure code in router and modifying the configuration accordingly in webpack, js can be divided into multiple files, and the corresponding js files can be loaded when needed to achieve on-demand loading.

Redux is the most widely used third-party state management tool, and its function is that when multiple data states interact in the application, it can manage the state more conveniently and the code structure is clear. The following figure gives a visual explanation. As the actual development is generally divided into personnel / sub-functional modules independent development, considering the cost of introducing redux (redux itself is slightly complex), you can not use redux in modules that do not have most interaction, but in similar forms involving additions, deletions, changes and queries, and instant messaging websocket and other modules suitable for redux.

Select the appropriate UI component library for the project, simplify the development of UI style to a certain extent and consider using the transition animation effects provided by it. There are many choices in this respect. Google Material Design-style Material-UI is the most popular on github, but its design language is quite different from our current APP. Tencent's weui and Ali's antd-mobile are similar, and the configuration items when antd-mobile and create-react-app scaffolding are more complicated, because Ali was intended to match his own scaffolding dva (encapsulated react-router and redux), so he temporarily chose weui. Post-development has specific component requirements that can be used in conjunction with other ui libraries.

As for the transition animation when the page jumps, some UI libraries give some transition styles, such as touchstone. However, the library is no longer maintained, poorly documented, and is incompatible with the new version of react-router. Later, browsing the official documents found that there is an official animation library react-addons-css-transition-group, using this library combined with css3 animation three-piece set of animation,transition,transform can achieve a variety of animation effects including basic transition effects, such as progressive translation.

In addition, with regard to css, because it is a single-page application, if there is no processing, the direct import css file will eventually be packaged into a css file, which will cause the style to be applied to the whole world and cause the same name style to pollute each other. There are many ways to solve this problem. Facebook is actively exploring the css in js way, but writing inline style code directly is not readable. At present, css-modules is the most widely used solution, that is, turn on the module option in the webpack configuration and use the styles object to write styles.

The principle of the solution is that the css class name is packaged and compiled into a hash string, keeping it unique. But when you want to use the global style, you have to configure it again, which is a little complicated, and the way its class name is written as an object needs to be modified as a whole. In addition, when using it, we find that the class naming method does not support-underline, and hump is recommended. However, most of the style class names in html before us are named in horizontal lines, which means that the class names in the original html and css should be modified accordingly, considering that there are a lot of style class names. Give up in this way.

In addition, there are a large number of users of react-css-modules based on css-modules using high-level components, allowing horizontal line naming and simple distinction between global and local styles, but benchmark tests show that it will greatly slow down performance, so it is also abandoned. To solve this problem, it is necessary to maximize compatibility with the original css writing, that is, with minimal changes, because of the large number of previous css class styles.

Webpack css-loader has an attribute: local plus after the class will become a local scope, that is, webpack will automatically hash the type of class transcoding processing, but it is clear that the class name one by one: local is some rigid work, so think of the use of scss's nested attributes: local in a css file unified before the class name. This involves adding scss support to the scaffolding create-react-app, performing the installation on the command line, and adding the watch-css instruction to the scripts of package.json, changing the original css file to the scss file, and then adding: local at the outermost layer, executing the watch-css command, the css file can be automatically generated next to the scss file, and the class name is automatically prefixed with: local prefix. In the practice of this method, it is found that the styles of not all classes are compatible with: local. The corresponding file name can be used instead of: local, all you need to do is to maintain the uniqueness of the file name, which is satisfied under the original project. In this way, the way of introducing css into the original file, the way of introducing global css does not need to be changed, so as to minimize the cost.

Scss is sass 3 to introduce a new syntax, its syntax is fully compatible with css3, and inherited the powerful features of sass, sass and less is the front end to expand css commonly used way, adding nesting, variables, inheritance and other syntax, but need to be compiled into css for final use (stability considerations).

What should be paid attention to in the combination of Reactjs and cordova

The development of Reactjs uses the official scaffolding Create-react-app, and finally generates a single-page web application through npm run build, which can be placed in cordova's www directory. Because the two parts are developed independently, while the original development was developed directly under the cordova project directory with the www directory, this difference will cause some problems. For example, after some plug-ins in cordova are installed, export functions or variables are introduced for use, because they are separated at the beginning, and these variables can not be found in create-react-app, resulting in the error of variable undefined in build. Although the variable can be found and run normally after it is finally put into the cordova project, the console reports a bunch of error in the first step of react development will hinder debugging and affect the development experience.

There are some react cordova libraries on github, but in essence they all need to be packaged through npm run build, so it does not solve the problem of introducing plug-in variables and will be mutually exclusive with create-react-app. So to find a way to ensure that the variables provided by the plug-in do not report errors in React, you can take a circuitous approach here without affecting the ESLint error detection mechanism. When Build, the console reports errors only for the code under the src folder, and there is an index.html under the public folder that will eventually be packaged into the www directory, so you can add global plug-in variables when deviceready in this file (note the uniqueness of this kind of global variables, can be guaranteed by adding plugin prefixes or using namespaces, etc.), and pass the value to the code under the src directory This bypasses the console build and error messages during debugging.

Another tip can be to put the react project directly under the cordova project directory and specify that the files generated by the final build will be placed in the www directory, eliminating the process of manually transferring files.

It is also important to note that because the default public path in React is an absolute path, you need to use the file protocol to place it locally when placed in cordova, add "." before the public path of webpack's production configuration, or add a line "homepage" to the package.json file: ".. / www" or "homepage": "." Change to the relative path, otherwise the file will not be found, the last way is recommended here.

V. the directory structure of the React project

First of all, IDE selects webstorm, which is powerful. Before, the project team can continue to use it, but it should be noted that when the directory contains the installed dependent node_modules, because of the large number of files in this folder, webstorm will take up a lot of resources when establishing code association intelligently, and occasionally get stuck on some computers. This phenomenon also occurs on my computers with relatively high configuration (solid state disk plus 8g storage). The solution is to configure the ignore node_modules folder in file-setting-File types.

The above figure shows the directory of the create-react-app project, and the main code is placed in the src directory. The Components contains all the components. React strictly implements the component technology, componentization is not only convenient for reuse, but also can clearly divide a page into several parts and finally put into a parent component display, because jsx technology will js and html together, after the division of each part has its own functional logic and page display, so it is more clear and easy to maintain. In fact, react puts forward the idea that everything is a component, only some components render part of the interface, while others do not have render.

In the figure above, the common file under components is used to put the common components written by project members, such as public request methods, etc., the external components are put in external, and the components of the work log module written by me are put in work_log. Each functional module creates a folder, and the naming rules are uniformly underlined, which is also the method used before. The division and hierarchical relationship of specific functional modules can be referred to before.

It is worth mentioning that in the past, the hierarchical relationship of html must be strictly two-tier (involving the logic of the jump path), resulting in the final occurrence of not putting a functional module into a folder. For example, the files contained in the above work log are directly placed in the setting folder with other functional modules. Now, as long as the routing is configured uniformly in React-router, it is essentially a jump to a certain component, and there is no restriction on the jump path.

Various constants are stored in the Constants folder, such as various interface paths. Fonts stores font icon files, images stores pictures, several components of redux are under the redux folder, and scss/css style files are distributed by styles. Index.js is the parent component of the portal and top level, while router.js maintains the routing relationship of the entire application.

The above is the technical analysis document of this survey, browsing a large number of technical documents, open source community and technical forums and combining with practice to explore the selection ideas and reasons, there may still be some points that have not been added. In the future, it will continue to be improved with new knowledge and practice.

Author: Liang Xin

Source: Yixin Institute of Technology

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.