Sunshine Xiaoqian, a senior front-end engineer, takes you hand in hand to solve front-end engineering problems and learn the application of engineering ideas in the three stages of development, construction and deployment in this small volume.

🎙️ Author introduction

Sunshine Xiaoqian, a frontline Internet company senior front-end development engineer. In addition to business, I am also engaged in front-end infrastructure construction related work, including team SOP formulation, internal component library building and maintenance, and other work for development efficiency improvement. At the same time, there are some engineering practices such as front-end performance improvement.

At ordinary times, I am keen to share my experience and the pit I stepped on with you, hoping to bring help to you.

💡 Booklet background

Front-end development today has very different requirements than it did five years ago. Five years ago, when I got my first job after graduation, I was asked a question: “There is a button on the page. Can you change the copy on it?” 5 years from now, you can only edit one button copy and you won’t be able to get a job. To this day, the basic question people ask when looking for a job is: “How does Vue implement bidirectional binding? How is Webpack packaged? What is the difference between plugin and loader? …”

Front-end development started with page style changes embedded in a template engine and simple DOM manipulation, and evolved to handle complex interactions and business logic. Especially with the development of Ajax, Node and other new technologies, front-end development is gradually equipped with the ability to develop medium and large businesses, which undoubtedly marks that the front-end has stepped into the engineering stage.

This also means that the requirement for us is no longer “front-end development”, but a higher “front-end engineer”, the era requires us to have engineering thinking and engineering problem solving ability.

Imagine one day an online problem reports that someone has a blank screen, and you look it up to find a new syntax that doesn’t work on older browsers. But you used Babel in your project! I opened the editor and looked at the babel.config.js file for a long time without seeing anything. So you Google “How do I configure Babel?” Transform-runtime, babel-polyfill… After following the configuration in the first article and finding it does not take effect, change the configuration in another article and then change the configuration. Finally, after two hours or a day of trying, the white screen problem was solved! At this point, although you do not know which line of code is changed to take effect, do not know why this configuration, but know to quickly press the save button, for fear of modifying the configuration and problems! And pray that the next time do not have similar problems reported over!! And then rushed back to the project to meet the deadline, as for the cause of the problem, next time we must…… Next time be sure to…

Is this scene familiar to you? Probably hit a nerve with a lot of techies. This is probably what some of us tech developers do on a daily basis, confused by tedious WebPack or other Babel/TS configuration files. To sum up, it is:

  • Do not know how to do technology selection, blindly follow the crowd;
  • Do not know how to do dependency management and common library management;
  • Dependence on project installation is not clear about its purpose, others have I also want to have (” > dish <);
  • The basic configuration of the project depends on copy;
  • If the project configuration goes wrong, it depends on Google and blind trial, or restart.
  • …

All of the above shows that you lack front-end engineering knowledge.

🏠 Set ideas and framework

This small volume will focus on modern front-end development, to introduce the relevant content of front-end engineering in detail, and guide you to use professional knowledge to solve front-end engineering problems, including how to modular, how to design components, how to improve the reuse of code, how to improve packaging efficiency, how to do performance optimization. After all, the days of writing static HTML, CSS, and JS pages are over.

This volume is conceived in three phases: development, construction, and deployment. The overall mind map is as follows:

🤔 What will you learn?

I hope you can have the following harvest after studying this booklet:

  • Consolidate the foundation and build the knowledge system related to front-end engineering;
  • Help study and work with engineering thinking, improve development efficiency;
  • Learn to systematically develop front-end infrastructure solutions;
  • Break through the “can use API”, from the essence, analyze the underlying principle of the problem.

🤗 for whom to learn?

This volume is suitable for junior front-end engineers who have worked for 1-3 years. For example, the following “symptoms” exist:

  • Lack of front-end engineering knowledge, need to check and fill the gaps;
  • I spent most of my time developing business code and wanted to get out of the cookie-cutter business requirements and improve myself.
  • You want to build your application infrastructure from zero to one and develop systematic solutions.

So, do you want to be a engineer or just want to be a developer?

Look forward to you to join the small volume of learning, also hope you can stick to learning, there is a road frequently for the diameter, learning the sea is long, we work together “product short step, to thousands of miles”, the ultimate realization of “engineering and front-end development combined, so that the development of twice the result with half the effort”.

🛒 How can I purchase this booklet?

Original price ¥29.9, on the new special, limited time 60% off, calculate down a cup of milk tea is less than the money, is very cost-effective. Click on the picture below or scan the poster qr code to join the learning!