Abstract: The technical documentation research and analysis before reconstruction, including why technology selection choice react, the application process precautions.
First, why choose React
React is currently the most widely used front-end framework. Three SPA framework Angular, React, Vue comparison.
- Angular appear first, but it did not React on the principle of innovation performance optimization, and their relatively cumbersome.
- Vue appear at the latest, its core principles learned React, just syntax changes, the relationship was a pioneer for React, Vue learners.
- React community has a strong vitality and innovation, emerging revolutionary innovations, including the use of JS can operate React Native native controls, Vue later follow-up study of a similar Weex, but both the maturity of a lot worse.
React ecosystem now much larger than the Vue, in both github, stackoverflow etc largest technology community search, the search results React Vue is about ten times, in addition, according to recent statistics site is using React Vue few a hundred times or more. More ecological means more resources available, and encountered problems can be more effective with the help of reference, which is in addition to the performance of selected core reason React.
After selecting React, applications will have to upgrade in the following areas.
- The first, between the original black and white html jump will be short-lived phenomenon, which is particularly evident in the poor performance of the Android machine, while React as a single-page application does not have this problem.
- Second, React provide virtual DOM contains Diff algorithm, is about a former dom copy, and contrast changes after dom, dom only render different nodes to achieve the minimum cost of rendering, vdom innovative performance optimizations to enhance performance beyond doubt .
- Third, React core component technology, easier binding event behavior dynamically update certain dom, code more modular and easier to reuse code, clear and easy maintenance of the structure.
Second, the use of the mobile terminal React
Three mobile end frame has its own thing respectively. Angular of ionic, React's React Native, Vue's Weex. Which are based on ionic cordova technology, is still the browser application. The latter two operations has risen to the level of native controls, made out of native interface, which maturity React Native much higher than Weex, has been used by many companies, but rarely Weex users.
React obvious ecological whole the best choice, for the transition from the current cordova cordova + Reactjs, then smoothly into React Native, comparable manner to develop the optimum mixture of native performance. The reason why is because smooth React Native in nearly 90% of the code (JS) can Android IOS and end use, remaining involved in native code can also find basic resources available, like cordova plug the same. After all, if you need control of both JS, OC (or swift), java (or kotlin) in order to develop React Native, then this technology will not someone; of course, conversely, if there are native to develop knowledge, then will develop React Native definitely help .
React native direct transition to the words of the changes relate to the underlying architecture of the application, a relatively large span, and turned cordova + Reactjs relatively easy, but by cordova + Reactjs just as easy to React Native lot, because most of the code can be reused Reactjs .
Third, the choice of development tools Reactjs
First of all official development scaffolding a Create-react-app, integrates webpack- the most popular packaging tools, babel- improve js version compatibility transcoder, and ESLint- code detection tools and other common tools, while these tools of comparison superior configuration. It is worth mentioning that the scaffold will these tools configuration file is hidden, the intention is to allow the user to focus on coding, but usually there needs to configure their own actual use, execution can occur at this time is npm run eject hidden profile.
React-router is the official recommended route management tool, because it is different from the single-page application interface between the original html jump, jump in real terms is between components, so the need for routing management tools to unify management. It is worth mentioning that, React-router may be implemented with webpack code loaded on demand.
In general, after webpack package will generate a compressed js file, open the application in a single page will load the whole file, since this file contains all the js js code before, although is compressed, the general still have at least a few hundred kb when slightly more complex applications, the package file is increased accordingly. The load time, regardless of those who have not implemented the code that will download and load it, resulting in a waste of performance, it is clearly important in the web at the end, but in cordova is directly packed js code locally, equal skip the download procedure but there will still be loading process. Require.ensure router by writing code and modified accordingly can be arranged in the webpack js into a plurality of files, corresponding js file loaded when needed-demand loading.
Redux is the most widely used third-party state management tools, and its role is when the application in multi-state interaction data, can be more convenient and unified management structure of the code clearly states, the figure below shows the interpretation of the image. Since in the actual development is generally divided art / min functional module independent development, considering the cost of introducing redux of (redux itself slightly complicated), may be used without multiple data interaction module does not use redux, while CRUD form similar directed and instant messaging and other websocket fit redux of the module.
For the project to select the appropriate UI component libraries, simplifying development of UI style to some extent, and consider using a transition animation effects it provides. In this regard have more choice, Google Material Design Material-UI style of the most popular on github, but its current design language and our distinct APP, Tencent weui Ali antd-mobile and more similar, which antd-mobile when used in conjunction with the create-react-app scaffolding configuration items more complicated, because Ali was intended to fit their scaffolding dva (encapsulates react-router and redux), thus temporarily select weui, late development needs of specific components can be combined with other ui library.
As for the transition animation when the page jumps, some UI library provides some transitional styles, such touchstone. However, the library is no longer maintained, poor documentation, and with the new version of the react-router incompatibilities with the use there. Later, visit the official document found official animation library react-addons-css-transition-group, using the library of animated three-piece combination css3 animation, transition, you can achieve transform a variety of animation effects including basic transition effects, such as progressive translation Wait.
Also on css, because it is a one-page application, so if not addressed, css files, then directly import the final package will lead to generate a css file style to a global, cross-contamination caused by the same name style influence. There are many ways to solve this problem solutions. Facebook actively explore readability css in js bad way, but write directly inline style code. Currently the most widely used solution is css-modules, namely module options open in webpack configuration, use styles to write the object style.
The principle is to solve the css class name in the package compiled into a hash string to maintain its uniqueness. But again when you want to use to configure the global style, slightly complicated, and it is the way the name of the class prepared for the way the object, you need to modify the whole, the other in the use of it, found no support - dash of class naming, support underline, we recommend camel, and before we html class name of the style named mostly horizontal, which means that the original html and css class name must correspond to revise, taking into account the style class name is very much in this way give up .
In addition there are number of people react-css-modules that use higher-order components based on css-modules will be more, allowing the horizontal line naming local and global style to distinguish between simple, but there are benchmark tests that show a greater degree will drag on performance, so it give up . To solve this problem the maximum extent compatible with the wording of the original css, ie minimal changes, because of the huge number of css before class style.
Webpack css-loader has a property: After local plus class will become a local scope, namely webpack will automatically hash transcoding process this type of class, but the class name is clearly a plus: local sort of dull work , so I thought I could use nested properties scss will be: local css file in a unified added before the class name. Involved here is to add support for scaffolding scss create-react-app, command line installation, and add instructions package.json watch-css of scripts, the original scss css file to file, and then the outermost layer Add: local, perform watch-css command to automatically generate css file next scss file, and automatically add the class name: local prefix, this method is found in practice that not all classes and all styles: local good compatibility, the corresponding You can use file names instead: local, have to do is remain unique file name, file name in this original project has been met. The introduction of such original css file way, the way the global introduction of css do not need to change, so that the minimum price.
scss sass 3 is the introduction of new grammar, the syntax is fully compatible css3, and inherits the powerful functionality of sass, sass and less front-end expansion css common way to add a nesting, variables, inheritance syntax, but needs to be compiled into css to end use (stability considerations).
Four, Reactjs and cordova which combine to note
Development Reactjs scaffolding Create-react-app official, and ultimately generate a single-page web application by npm run build, put under www directory cordova can be. Due to the development of two separate parts, while the original developers directly developed under the project cordova www directory containing a directory, this difference will have some problems. For example, in some plug-in installed after cordova export functions or variables introduced for use, since the beginning of the separation, the create-react-app and can not find these variables, it causes an error variable is undefined in the build time, although after finally put cordova project can be found in the variables and running, but the first step in the development of the console react reported bunch of error would prevent debugging, affecting development experience.
There are several react cordova on github repository, but in essence they all need to package by npm run build, it does not solve the problem the introduction of plug-in variables, and will have a place to repel the create-react-app. So, we need a way to make variables provided by the plug not being given React in here without affecting ESLint error detection mechanisms can take the roundabout way. Build the code for the error when the console under the src folder, and in the public folder, there is only the index.html file will eventually be packaged into under www directory, so you can add a global plugin in this file when deviceready variable (Note that the uniqueness of this class of global variables, or may be added using the namespace prefix plugin etc. guarantees), and the value is passed to the code in the src directory, so that the console can be bypassed and being given debug build.
Another little trick can react directly under cordova engineering project directory, specify the resulting file into the final build at www directory, eliminating the need to manually process the transfer documents.
There should be noted that due to React in the default configuration of public paths be absolute, when placed in cordova need to use the file protocol in place locally, need to be added before the public path webpack the production configuration ".", Or in package .json file add the line "homepage": "../www" or "homepage": "." relative path instead, otherwise the situation could not find the file will be recommended here last option.
The directory structure five, React project
First IDE select webstorm, powerful, before the project team with can use down, but the point to note is that when a directory contains a dependent node_modules, since this folder file number of very large installation, webstorm associated code intelligence when resource-intensive, on some computers will occasionally stuck phenomenon that in my configuration is relatively high (SSDs plus 8g memory on) appeared on the same computer, the solution is in the file-setting- file types are configured ignore node_modules folder.
The figure is a directory create-react-app projects, the main code in the src directory. Components included all the components. Each part after React stricter enforcement component technology, component-based reuse is not only convenient, can also be a page clearly divided into several parts and finally into a parent assembly showing because jsx technology html and js put together, split has its own logic and page display features, so more clear and easy to maintain. In fact we react proposed the idea and all are components, but some components render a part of the interface, while others did not render.
Adding authentication server address in ConfigureServices
Copy
public void ConfigureServices (IServiceCollection Services)
services.AddAuthentication (www.xincheng0001.cn "Bearer")
.AddIdentityServerAuthentication (Options =>
options.Authority = "http://www.dwyuLe.cc localhost: 5000 "; // authorization server address
options.RequireHttpsMetadata = www.yuanyyule.cn false; // does not require HTTPS
options.ApiName = www.qjljdgt.cn" API1 "
Add IdentityServer4 service middleware in the Configure method
app.UseIdentityServer ();
testing
the client-side values above the controller increases the [Authorize]
direct access to server resources http://www.jintianxuesha.com
There are common files used to put public assembly project members write their own methods such as public request, external put external components introduced under the figure above components, work_log put a component I wrote the logbook module, various functional modules are each create a folder, use the underscore naming a unified way, way before it is used. Before the division and hierarchy can refer to specific functional modules.
It is worth mentioning, before html hierarchy must be strictly two (related to the jump path of logic), resulting in the absence of a functional module into a folder in the last occurrence, such as contained in the above logbook before each file directly and some other functional modules placed together folder setting. Now as long as the unified configurations React-router good routing, in essence, to a component jump, jump to limit the path does not exist.
Constants folder to store various constants, such as various interface path. Fonts Fonts icon to store files, images stored pictures, under redux redux several folders are an integral part of, styles decentralization scss / css style file. Index.js entrance is also the top-most parent component, router.js route relationship is maintained throughout the application.
The survey above is the technical analysis documents, browsing a large number of technical documents, as well as the open source community Forum selection and combination of ideas and reasons for the practice and exploration results, may still be some point is not added to it, the future will incorporate new knowledge and practices continue to improve.