Summary of experience in building large-scale tool projects with react+mobx+jquery

Content outline:

1. Function introduction
2. Technical Architecture
3. Performance optimization
4. Share details
5. Open source description

1. Project function introduction

I haven't written a technical article for a long time. This time I will share with you a recent project, a large-scale tool project built with react+mobx+jquery. Check out the project URL .

If you have used Yiqixiu, Maka or Baidu H5, friends of Sohu Express should be very familiar with this tool. Users can easily edit HTML5 code through drag and drop operations, which greatly saves development costs. The template can also be edited for a second time to quickly generate a new H5 page. Today's protagonist is H5DS (full name: HTML5 Design software), which is a WEB H5 production tool. Make it easy and fast for people who don't know how to write code to make H5 pages.

Before making a product, planning is very important, which will directly determine the success or failure of the project! Some projects take 1 year, 2 years or more to plan, and only after planning can we accumulate a lot! At this time, we need to escape the programmer's thinking, and don't look at the entire project from the perspective of program development!

Product thinking: When a programmer requires a product manager to understand some code, as a programmer, he must also have a product thinking. Before making a product, he must have a spectrum in his mind, what kind of product to make (large project, small project, boutique project) , just do some practice...)? Target user groups (to C, to B, for designers, for programmers...)? Product positioning (for high-end users, for low-end users)? What are the needs and characteristics of user groups (understand programs? understand design?…)? User’s operating habits (for example, most designers use PS, do they follow the design style of PS?…)? Wait, there are a lot of questions. Before making a product, try to summarize these questions as much as possible, and then give the product a better positioning.
Programmer's thinking: An excellent tool has high scalability, ease of use, and excellent performance. Our goal is not only to be a tool, but also to be a highly scalable tool like vscode. How to solve the problem of high scalability ? How to do the kernel extraction of the editor? These should be things programmers consider.
How to promote it? How to pack? How does it work? How to make this project popular and accepted and recognized by everyone? How to get more programmers involved? These are questions to consider from an operator's point of view.

Taking into account the above points, we are not only an excellent programmer, but also an excellent product manager, but also a grounded operator. When we are in the early stage of the project, whether it is product, programmer, operation promotion, etc. It has to be taken into account that although one person cannot do all the work, but knowing something will not be fooled by others. If your goal is to be a manager and not just a programmer, then these skills should be mastered to some extent.

2. Technical architecture plan

The technical selection is as follows:

前端：react, mobx, less, jquery

Backend: nodejs, mysql, ngnix

Tools: babel, webpack, gulp, eslint

The technology selection of H5DS is basically the technology stack of JS. It can only be said that this technology is very front-end. Next, I will explain why it is chosen this way.

why react ?

The idea of making the entire H5 page is as follows: Although the generated H5 page is a single page, there are still multiple sub-pages under the single page, which can be roughly divided into three categories. The APP contains the content of the entire page. Page contains the content of a single subpage, and Layer is the element inside each subpage. This will make our thinking clear. Each H5 page corresponds to a JSON file, and JSON is converted into a JSX template, and then JSX is converted into HTML through renderToStaticMarkup. I think this picture is the most effective illustration. React's powerful server-side rendering function can directly convert JSX as HTML. No one has said that the server rendering method can only be used on the server side. Here I use it directly on the front end, and the effect is very good. The specific method renderToStaticMarkup

// 这个JSON 文件大致格式
{
  ...,
  "name": "H5页面名称",
  "desc": "H5页面描述信息",
  "pic": "主图URL",
  "pages": [ // H5由多个子页面组成
    {
      ...,
      layers: [] // 子页面由多个图层组成
    }
  ]
}

// JSX -> HTML 的方法
import { renderToStaticMarkup } from 'react-dom/server';
renderToStaticMarkup(JSX);

why mobx?

I am a savage developer, I like to use the simplest code to implement business, and mobx is more flexible and changeable, there are not so many restrictions and constraints, and redux is like a well-known child who sticks to the rules, although the constraints can make the code more standardized, if It is a specification accumulated with a large amount of code. I still feel that it has been separated from the actual meaning of technology. It also increases the maintenance cost. I am definitely not a qualified programmer. If I can code less and do more, I would rather sacrifice the specification by any means. .

why jquery ?

Many friends told me this before: If you use react, don't use jquery. What jquery can do can also be done by react, so why use other libraries? Not normative at all. In fact, my answer is often like this: I am more willful, and I like jquery! Why is it generally believed that jquery and react should not coexist? There are roughly the following points:

From the framework level, react can modify the DOM through the state, and the data will go from the Virtual DOM to the real DOM. If jquery is used, the DOM is directly modified, and the result is that the state and the real DOM cannot correspond. React It also lost the meaning of his existence.
From an ideological point of view, the idea of jquery directly operating dom and react goes against it.

But the actual business is ever-changing. Which framework can say that it can easily implement all businesses? jQuery is a tool library, and react is a ui library. If it is used properly, I personally think it is a very good choice to cooperate! Sometimes using jquery to manipulate the DOM can beat React in terms of performance. Such as drag and sort function!

The question of technical selection is over, let's talk about the architecture of the entire project!

If you look carefully at the third module, you will find that it is actually separate from the middle business layer, which is more conducive to the expansion and secondary development of the project. The third module here is defined as the kernel. Based on this kernel, we can do the web layer, the server layer, and the extended layer layer. The kernel is more like a ueditor, which can be directly referenced in the project, so that the kernel no longer depends on it. Any server can be used independently.

3. Performance optimization processing

For tool projects, performance is a very big challenge. I have summarized the following common performance optimization points:

Data cache. (indexeddb, localStorage, localSession)
Interactive optimization. (anti-shake debounce, throttle throttle, event delegation)
memory freed. (componentWillUnmount, DOM release, reference address release)

4. Sharing of technical details

1. Image cropping cache scheme

Because image cropping is a commonly used function in the editor, if the traditional cropping mode is used (the front end transmits cropping information to the server, the server completes the cropping, and returns a new url), the pressure on the server is very large. In order to save these performance costs, we I created a cropping method. After the picture is cropped, it is not directly thrown to the server. This method greatly saves the cost of the server. The specific business process is as follows:

2. Performance optimization scheme for drag sorting

Drag sorting if implemented with pure react. The business should look like this:

If you use jquery + react to achieve:

The second method combined with jquery greatly reduces the execution of the render function in react, and does not need to perform the diff operation multiple times, realizing a high-performance dragging scheme.

3. Adaptation scheme for all models

We fixed the size of the display area to 320 * 486. To be compatible with all models, we need to scale it, either 100% high or 100% wide, calculate the scale of the display area through JS, and then center it, It can achieve maximum compatibility with various models. The background is global, and the schematic diagrams respectively represent the instances of the commonly used sizes of mobile phones, the processing of exceeding the height, and the processing of exceeding the width. The red part is the display area, the gray part is the original size ratio of 320*486, and the black shaded part is the gray part for scaling. filled area.

Five, about open source instructions

In the near future, we will open source the project on gitee and github for everyone to learn and use. Embracing open source is our choice, but we hope that everyone can abide by the usage specifications. For individuals, we are free, but for commercial use, we charge for this. Decided to believe that everyone can understand.

Welcome to join the QQ group communication: 549856478