preface

I've been sifting through a lot of candidates' resumes lately, and I've seen a lot of descriptions of front-end engineering: > "I've been working on front-end engineering..." Box-sizing: border-box! Important; word-wrap: break-word! Important; "> Great reforms have been made in..." . First of all, I have a lot of hope. And then after the exchange and discussion to bring me more feedback is disappointed. This area is, of course, the 'non-mainstream front end'. But personally I think it's interesting and necessary to learn; So today I simply talk about front-end engineering, I hope to bring help to you.Copy the code

Take a look at the front-end history

In order to take care of the readers who are integrated into the front-end family in different time periods, the author carries out a simple review of the development of front-end R&D “mode”. The review goes through several stages to understand the need for “engineering”.

  1. A time when the front and back ends are not separated: Back then the so-called front-end job was more about writing pages. And then there is through some technology (ASP,JSP…) Fill the page with data; This part of the technology is more back-end, so the front-end may not be involved in this part of the work. (Of course, there will be bickering, no one wants to do. Who doesn’t have a say?
  2. The period of semi-separation of the front and back ends: In a part of the work of the two sides of the background, on the study of how to carry out front and back end separation, convenient to better realize the division of collaboration between the team. Many technical solutions such as SSR(Server side render) + node technical solutions in the context of node development; The server will process the HTML template directly to the front end, the front end is responsible for display.
  3. The front and rear ends gradually separate completely: With the advancement of various technologies, various architecture schemes such as RESTful architecture gradually emerge; That is, the two parties call through protocol (HTTP/HTTPS /socket) for communication data transmission. That way, there might not be too much bickering about each other’s work. However, there are also some problems, such as the DESIGN of THE API, the front-end definition of the interface may be more ideal (the server side has a large internal technical architecture services such as cross-cluster, in this context may be really difficult to implement [also to help the backend sibling lol]); Therefore, I think it is more reasonable for both sides to discuss and design to promote.
  4. .

What is front-end engineering?

In the background of increasingly updated research and development technology solutions. The front end has gradually changed from “Page development engineer” to “APP development engineer “; Front-end work with the complexity of the business, the user experience is not a simple work, facing cooperation problems, performance problems and so on… So with the paradigm shift comes a lot of problems:

  1. How to provide team development efficiency?
  2. How to improve the quality of project development?
  3. How to enhance project maintainability?
  4. How to introduce more talents?
  5. .

In order to solve a series of problems, it is necessary to select a good technical architecture scheme and promote the landing of front-end engineering. How many aspects does engineering involve?

  1. Global normalization
    • Coding specification: project structure specification; HTML, JS, CSS coding specification; Naming conventions; Interface specifications and so on.
    • Collaborative specification: document specification; Resource management norms; Visual | interaction specification and so on
  2. Development patterns are componentized
    • Module componentization: common CSS extraction; Public JS extraction; Common resource extraction and so on
    • Technology componentization: Base function library componentization; Public page componentization and so on
    • Business componentization: similar business overlapping function componentization and so on
  3. Instrumentalization & automation
    • R&d instrumentalization: resource loading and integration
    • Automatic construction of r & D generation environment
    • Automated deployment, unit testing
    • Persistent integration…
  4. Technical optimization, performance optimization, program optimization…
    • Under the background of technological optimization, technological innovation and progress must be made in the era of cold weaponsJqueryA spindle; The advantages of MVC MVVM design pattern believe everyone is self-evident, so why not choose to progress.
    • This is an inevitable phase in the 2C business, where user experience becomes more and more important. It’s not just about the implementation of the application, it’s about the user experience. In short, the time it takes to load a first screen can lead to user loss.
    • In terms of program optimization, for example, the team may not have the opportunity to implement every detail of engineering, and it may backfire to push the overall direction forcefully. There is no best, only the most suitable.

What can engineering solve?

# Let’s see what a simple everyday phenomenon can help us solve.

First, in the context of non-instrumentalization (Webpack build generation), many developers encounter a problem. Requiring users (test, production, user) to manually clear the browser cache each time a project is deployed; This is a big headache; It takes a lot of explaining.” Static resources to clear the cache…” So how do you solve this problem from the engineering side?

. <link herf ="XXXX.css"> ... <script src="XXX.js"> ....Copy the code

There seems to be nothing wrong with the code above why the program needs to clean the browser cache every time. The reason is the cost of modern browsers for performance. The same static resources will be cached locally. So how to solve this problem? It is very simple to look at the following pseudocode:

. <link herf ="XXXX? +'new Date()'.css"> ... <script src="XXX? +'new Date()'+.js"Copy the code

A lot of careful students in the construction of engineering production packaging have seen such as webpack packaging its file generation is generally “chunk” + hash +.js/ CSS is the above solution. But then there’s the question of how do you decide whether or not each file needs to be cached for performance optimization? Like some images that don’t need to be reloaded every time how much bandwidth is wasted? I’ll leave that for you to think about. Or take a look at how build tools like WebPack solve the problem.

The end!

The necessity of front-end engineering and personal growth has played a big role; I’m sure you all have some idea.

Finally, I think it is necessary to learn. It also makes it look less boring on a resume. A lot of people just write “fluent in languages, familiar with technologies…” . Heck, that’s just going to make it harder for your interviewer. Every language designer probably can’t claim to be familiar with every detail of a language that changes every day. For example, in the case of JavaScript, the light standard is hundreds of pages in a growing context; Who can remember? To learn to develop their own language engineering ability, architecture ability. Come on ~ feel free to leave a message if you need to communicate.