web123456

Some thoughts on the front end

Ask a question

  • Do you have to make the front and back boundaries as difficult as a chasm?
  • Do front-end development and back-end development feel very similar?
  • What part of the front-end work does JS files undertake? How to standardize the level of JS file?

think:The code has been typing for a long time and the business has also processed a lot, but it seems that every time I am rushing to make progress, I rarely stop and review it. Today I will talk about some of my views on the front-end.

Briefly describe the front-end history

In the 2000s, there was no pure front-end concept. At that time, it was the era of slash-and-burn Internet cultivation. With the rapid development of clients and the continuous iteration of technology, there wasFront and back end separationSince then, the front-end has begun to be played out.
The function of the front end: 1. Interface 2.performance
Three front-end styles: HTML: page skeleton, CSS: page beautification, JS: processing business logic.
The early front ends were pure, and now the front ends are full of variety. For example, if you have a big front end, the outlet is a stack-breaking engineer. . . New concepts, technologies and frameworks are also emerging from the front end, which also reflects the rapid development of the front end.

Looking at the front end from the back end

The front-end is originally independent from the back-end business, and early engineers completed the interface work together. So now, are front-end engineers or back-end engineers living in a corner a bit pretentious?

The difference between front-end and back-end

Many people in this industry always like to label themselves, and the front-end and back-end are therefore clear in line with each other, but it can be said responsibly that no big shot in the industry is not a front-end and back-end. The biggest difference between the front-end and the back-end isThe front-end does not need to operate the database, and the back-end does not write CSS. Programming technologies are always connected because of the same logical thinking in dealing with problems, and they should be closely linked.

The shadow of the backend can be seen everywhere in the front end

  • The concepts of components, modularity, containers, etc. are all found in the backend, and the frontend is also applicable because of the same programming thinking.
  • The front-end MVVM architecture that has been popular in recent years has also been derived from the classic back-end MVC architecture.
  • In MVC architecturecontrollerIs it andJS FilesWhat's the same? Those who work in the backend know that the control layer does not write business, otherwise it will cause mixed projects and difficult to maintain. This is also applicable to the frontend.

The importance of front-end project hierarchy

The front-end basically relies on HTML+CSSJavaScriptThree axes, soOverall, the front-end is not as complicated as the back-end. However, once the project becomes larger, the front-end business should not be underestimated. At this time, it is very necessary to pay attention to layering, and now we can lead to the following thoughts.

       JS file of the pageIs it really suitable for writing business logic?

Of course the answer isDiscomfort and .When doing toy projects, you can write whatever you want. All business logic and all network requests are written in a JS file. butNon-toy projectThe maintenance and magnitude are huge. Due to the dynamic characteristics of the language JS, there are no strict type constraints in languages ​​like Java, which makes JS too arbitrary. Once the project becomes complex, it will inevitably be very chaotic. This is also recommended by many front-end teams of major manufacturers now.TypeScriptThe reason.

Summarize:

  • Don't have too many views on the front-end and back-end boundaries, the front-end boundaries are becoming more and more blurred
  • Writing JS code should be standardized and has clear hierarchies. The front-end should draw on the characteristics of the back-end MVC architecture.
  • For example, use the Model folder to extract the JS files for processing services, and let the JS files of the interface be used as the View layer.