Subtitle: Does the Front End Really Not Need Architectural Capabilities?

preface

I don’t know if front-end developers have faced this dilemma:

Received a large batch of demo projects, 20+ domain names, the complexity of each project is not high, but the number of projects is amazing, between projects full of repetitive logic code…

One day the product says it’s changing the style for a project, and everything has to be synchronized… Must have been a front man who wanted to smell the roses

The body of the

In order to understand the following text, as you can see, the various domain names corresponding to the same repO are extremely difficult to maintain, and as an obsessive developer, this phenomenon is absolutely intolerable. So I went through the REPO for each project and found that there was a lot of similar logic, including the layout of the front page and the presentation of the project. In the end, further analysis, based on the idea of ‘seeking common ground while reserving differences’, is summarized.

There are two main categories of projects:

Pure display class 1-2. Pure display class with simple UI page 2. Custom class

V1.0

For the above two types of projects, the code of the project is combined and the configuration center is introduced to carry out the corresponding configuration according to host. I don’t know what you’re talking about.

const config = [{ host: 'host1', title: 'xxxx', loadingPage: true, loadingBgImg: 'xxx', loaidngText: '', menu: True, engine3DType: '', menuList: [{icon: 'xx', title: 'xx', data3D: [], templateUrl: '', modelJson: '',}, {icon: 'xx', title: 'xx', data3DUrl: '', templateUrl: '', modelJson: '', }, ...], navigator: ture, ... }, ...] ; const item = checkDev() ? getItem(debugHost) : getItem(window.location.host); // Page related data display /UI display /3D engine selection, etc., according to the configuration information, specific control (for ease of understanding can also be understood as permission control system).Copy the code

The following figure shows the upgraded configuration.

V2.0

Consolidated, oneself in the process of project development seems to be a great deal of mental burden, but the maintenance of a large number of domain names, still need to take different publisher, ops students mental burden is very big, still can therefore think of communication, let share a domain, to share a JKS project, so the development operations are very harmonious.

Hence the diagram below.

Instead of reading configuration according to host, it changes to read configuration according to PathName, and implements pure front-end routing. Wow, front end engineers are really nb.. Laugh cry 😂)

V3.0

But so far, while it looks like something has been fixed, it doesn’t feel optimal. In the future, as the project becomes more complex and the number of complex projects increases, I think new problems will arise.

V4.0 (Updated 2021-04)

View class added new project configuration page, support user configuration input, save developers time.

But as a siege lion, isn’t it for the purpose of “fast, accurate and ruthless” “siege”?

conclusion

In fact, in the work, it is found that many developers rely on the brain to think systematically, busy with repetitive brick moving and busy, slowly lose the ability to think proactively. This abandonment of active thinking is really scary in the long run. In order to continue to grow and improve, I hope you will continue to learn and exercise your ability to think systematically.