Front-end engineering that Xiaobai can understand
Front-end engineering has recently been used by many companies or enterprises, and it has become a very hot term, so I am curious about the cause and effect in the middle.
01 Preface
I also heard about the content of front-end engineering in recent years. When I heard it, I felt very tall. When did the front-end become an engineering level? But now with the updating of technology, I gradually believe in the development of the front end. When I was surprised before, I still think what the front end should do-cut the picture and set the template.
This article will talk to you about the past and present of front-end engineering. There is no technology in it. Everyone can read with curiosity.
02 Front-end development? crop?
In fact, the concept of the front end was basically not there before. At that time, a lot of tricks were the development of the back end, so the development of java was very popular, almost standing at the top of the contempt chain. So why don't I learn the back end? Because my (back) phase (end) believes (too) the front (difficult) end (over) development.
So there is no way, I just find another one to learn, because the art is not good, then find the front end! Some things can be immediately effective.
Front-end history
It must be admitted that the front end has now undergone two rebirths. Only today's rapid development, the first time is from a static website to a dynamic website; the second is the introduction of Node.js, which can make the scripting language JavaScript run on the server side, but this liberates productivity and makes the front end no longer Humble.
Many people think that the dynamic website has not existed very early? At the beginning, I felt the same way. After all, writing a script can make the page move, but the dynamic here does not mean that, it can interact with the user. You can think about the history of the front end before, just put together a few page templates, and then use js plus a few animations, you will feel that your website is amazing. At that time, the website was basically non-interactive, that is, the page for others to see, nothing more.
Sometimes a perfect page you have worked hard to debug, when sent to classmates and friends, the page may also be messy. That's right, that's the era of incompatibility, which will drive every front-end crazy, but it's different now. Many frameworks have helped you get it done, and there are few compatibility issues.
Development model
Since I have not experienced a mixed front-end and back-end development model, when I started to learn the front-end, vue and elementui were all already out, so I was born a few years later with happiness, and let the people help the group Front road.
When I googled the front-end engineering, I found that the previous start mode was quite confusing, and there was no strong logic in it. The approximate development mode is to cut the picture, do the design part and write a script (I believe everyone knows the software dreamweaver, which can be used for web design and front-end code writing). Then the page template is handed over to the back end, the front and back ends are mixed together, and the coupling is very high. This is really a situation where the whole body is moved. I believe everyone knows the famous JSP. I also learned this when I was in college, which is basically useless (the course will be canceled in the next session).
Later, the backend couldn't bear it anymore. What's your frontend stuff is very fragmented and illogical.
Well, the front end chewed this bone in a mind-bending mentality, gave all the page related things to the front end, and the back end was responsible for sending me the data. This is the beginning of the dynamic website mentioned above, thanks to the birth of Ajax. Since then, the front-end work will not need to cut the picture, and your work will become how to do templates, design and beautify the page.
03 Front-end engineering
After we developed the page before, the rest will wait for the back end to give you the data. But your front-end development is fast, but the back-end interface can't keep up, what can you do? The smart front end came up with the "fake data" thing, that is, I first simulated the data myself, and your back end must return the data to me in my format (a good format to communicate with the back end).
No, there are many tools for data simulation, such as easymock and so on. Everyone can fly away from the control of the back end. We can develop this project synchronously. Each process is in a complete and deliverable state. We can demonstrate this process to customers at any time without waiting for the back-end interface. At first glance, the project team did a good job at the front end (promotion and salary increase). But this is far from the concept of engineering. We know that the project can be divided into four parts: design, development, testing, and deployment.
design
The design here is mainly designed by the product manager and the UI design together to design the vision of the product and the functions to be realized. The simpler is to design the functions required by the user through the product design and hand it over to the development.
The front end mainly passes the evaluation of the product page, mainly to evaluate the development cycle and the difficulty of the project, and then the choice of the technology stack. The back-end will design the system architecture, including system interface, permission control, performance, maintainable and reusable design. Basically, the front-end and back-end designs are all about technology types.
Development
Then the state of development will be carried out, according to the needs of development. At this stage, we must pay attention to the development of some small functions and whether they can pass all test cases. I do n’t know if you have heard of the technology of agile development. This is an efficient model to ensure that every part of the function can be used in the development process. His original intention was to be able to efficiently develop iterations and quickly change user needs. The componentized and modular design of the front end is the premise to ensure agile development.
test
The role of the test is to perform a small-scale verification of the function itself. Generally speaking, there will be many test cases. Only after you pass all the test cases can you proceed to the next operation. The test is directly oriented to the user. At this time, we will experience the product from the user's perspective, and test all possible operations of the user to see whether the service or data are normal. The front-end engineer is the main person responsible. Usually may also include stress testing, etc., used to test the performance of the product, this time is the main responsibility of the back end.
deploy
The deployment process is a very important part. If the preliminary work is not done well, you may encounter many problems after the project goes online, making it difficult for you to locate the problem and maintain the project. The development model with separate front and back ends can effectively reduce the occurrence of faults, and can quickly locate and solve problems. In fact, it also benefits from the process of unit testing and project engineering split.
The deployment here can deploy some static files to a static server or CDN, and place the data interaction on the web server to achieve a similar "read and write separation" function, which can maximize performance.
In the process of development, you can use the development model with separate front and back ends. This is a technology-independent model and is a consideration of engineering thinking. Many interviews will ask you to talk about the understanding of front-end engineering. In fact, it is nothing more than why there is front-end engineering, how to do it, and what are the benefits. Basically, this is a kind of engineering thinking and has little to do with technology. In general, there are the following three advantages:
- Parallel development, shorten the development cycle
- Quickly locate problems and solve problems quickly
- Deployment can be dynamically and statically separated, simplifying the process and improving the robustness of the program
04 Summary
In fact, I found some books that talked deeply about the concept of front-end engineering, such as the packaging tools and continuous integration of the front end. Of course, this is also a part of front-end engineering. In short, its core is "decoupling", so that the previous tangled veins can be rearranged into a maintainable and reusable state.
To sum up, front-end engineering is to simplify the development process and develop in parallel, without affecting each other and being able to easily merge the entire project. The core goal is to establish a development environment and improve the overall development efficiency.
