Recently, I have been doing one thing. It’s about bringing software design principles to the front end. It’s up to you to understand, and I’m tired of arguing with trolls.

Take a look at the conclusions of more architects. Ng2 is very extreme (DDD mode development can be said to have been implemented in NG2 long ago, wait for you to discover)

The slogan of the programmers of 2022 should start: No crap code, improve maintainability. Predecessors planted trees, posterity is really cool.

In 2022, I hope most people will improve their systems thinking and refuse to work ineffective overtime. Let the bad code die.

In our country programmer development is mostly such a development mode, a new function module to a person to develop. Others rarely participate. Until the person goes out and develops the component, does the unit test, and then when the black box test passes, it’s ready to go live.

Not long ago, I published an article about how React implemented a policy mode for rendering components (just to give you an example, the business is much more complicated than this). Then I found some funny comments, maybe they didn’t understand why they did it.

You can skip this article if you want to heap code. Because this is an article for system designers.

I’ll start by talking about strategy mode to render components and why I did it this way. Here’s what’s going on.

There is a display module in a page, which needs to display different content modules according to different people. If there is no system design for design, it is developed in accordance with the above mode, so it is probably the following situation. I don’t care if it’s map mapping or whatever, but the solution is either you can’t do props iterations while maintaining the map, or you can stack code on top of if else code. It’s a nightmare for code review staff. Because it’s all about the rules you write?

In my team, the company assigned me a bunch of graduates, about 7, only 2 intermediate programmers. Graduates, do you think he development module, a complete project experience has been the lack of the originally, we should do the superior need to control the project schedule, instead of the entire module to a person to develop, why most of the development are to a person, not just because of the superior won’t design system, to break up the module.

If we are developing a new feature, the pattern should be the following: if components are the smallest unit of development, then each small feature implementation is the smallest unit of module (note that I mean one person per file here/avoid merge conflicts).

However, most of our development is as follows: WHEN I look at a file heap of code, my colleagues in code review want to hit others, and I want to cry when other colleagues jointly develop conflicts.

Having said so many basic concepts, I started to get down to business. First of all, our team said that fresh graduates were the majority at the beginning.

I made a call to the top layer and that’s all I did new PersonContext(data).renderView().

function HomePage() 
{ 
    const fetchGetQuery = () = >{ 
/** * The best way to listen is to use RXJS, so that your PersionType changes. /** * The best way to listen is to use RXJS, so that your PersionType changes Your view changes at the same time. You only need to listen for the ViewStrategy type */ 
    if(true) {return new Woman() 
    } 
} 
const data = fetchGetQuery() 
return <Observer>{() => { return ( <> {new PersonContext(data).renderView()} </> ) 
}}</Observer>; 
}
Copy the code

If the business changes later, the following may happen.

The first one is we have some conditional judgments that are easy to implement in React, for me. For example, I need one more props for business expansion

New PersonContext(data).renderView(props),
You need < Component :props1=”1″ :props2=”2″> compared to the other two big frameworks.

The only reason not to use map is if there is a similar function in the future, but the older module does not need it. I just need to inject the new factory component object into the new module. I don’t want to maintain the map code.

Is it much clearer when I draw the call relationship? I just defined the call relationship during the design, and then handed over the design of each layer to the person with the corresponding ability to implement, and finally carried out the integration test. Moreover, it is important that you do not have to work too hard and do not have too much pressure and burden on corresponding graduates. Personally, I do not recommend my staff to work overtime.

What kind of people do what is the fastest way to do one thing.

If we need to add something to each subsequent component, we can just change the render selector. If a single service is modified, go directly to the component to modify the corresponding logic.

Another advantage of unpacking is that you can locate the code more accurately and view less code when maintaining it.

Here I will not cite examples, know all understand, do not know trolls I am too lazy to explain.