New in the booklet | From 0 to 1 landing front-end engineering!

In recent years, with the increasing complexity of front-end projects, 前端工程化more and more companies and developers have paid attention to them.

From a business perspective, front-end engineering has become a standard for front-line Internet front-end teams, and teams with a small scale will design a front-end architecture that meets current business needs according to their own business. For front-end developers, front-end engineering has gradually become the dividing line between beginner and intermediate front-end and senior front-end . For example, the primary and intermediate front-ends of many large factories are only responsible for writing business code, while senior front-ends use front-end engineering to contact higher-level front-end architecture design and advance to technical management positions.

This is why many front-end developers are proficient in using react/vue/next/nust/webpack/koaother front-end frameworks, but promotions and salary increases are still out of reach. Therefore , if front-end developers want to break through the limitations of their work and achieve leap-forward salary increases, mastering front-end engineering is essential!

What is front-end engineering

Having said that, what exactly is front-end engineering? Front-end engineering refers to the use of software engineering technologies and methods to standardize front-end development technologies, tools, processes, experience, solutions and other indicators. It has four characteristics of modularization, componentization, standardization, and 降低成本automation 提升效率.

• Modularity is the top priority of front-end engineering. Its 前端工程化performance is to split and assemble code and resources at the file level. Specifically, it is to split a large file into interdependent small files, and then assemble them together. with loading.

• Componentization is an important foundation of front-end engineering, focusing on splitting and assembling interaction and design at the functional level. Specifically, it is to divide an interaction design with general functions into functional units composed of templates, styles and logic to achieve efficient code. Reuse and improve development efficiency.

• Standardization is an important part of front-end engineering. The main function is to condense loose specifications together through specified standards , standardize all workflows, and coordinate with all developers to define workflows in a standardized way. Every mature front-end team has a team. A battle-hardened standardized solution.

• Automation refers to handing over a series of tedious and repetitive engineering processes to the program for automatic processing according to preset scripts. The entire workflow does not require manual participation, freeing developers' hands and allowing them to focus more on the development of business requirements .

Many students 前端工程化are often at a loss when they encounter the following situations before they understand:

• Code snippets such as build configuration, packaging configuration, public components, tool functions, etc. must be copied and pasted every time a new project is opened;

• The coding styles of team members are very different, causing the code pulled from the repository to run and make the console red;

• Specifications, environments, modules, warehouses and documents for team collaboration, too many infrastructure measures make it impossible for new team members to start;

• With the iteration of requirements, the project structure and engineering documents are constantly changing. Improper handling will make the project go directly to the road of reconstruction.

In fact, as long as the development thinking and solutions of front-end engineering are applied to the project, and its advantages are utilized, these requirements can be easily realized, which can reduce costs and increase efficiency for the business.

In a word, front-end engineering is not a specific tool, but the overall structure and overall planning of the project, which enables us to dynamically plan the development trend of the project within a determinable time in the future, so as to improve the service cycle of the entire project to users . Learning front-end engineering can not only understand the complete process of a project, but also can quickly locate and solve problems in a complex process when encountering difficulties. It can also formulate some scalable processes or foresee the future development direction of the project according to its own knowledge reserves.

How to systematically learn front-end engineering?

However, it is not easy to systematically learn front-end engineering. Seeing this, some students may say: "Isn't front-end engineering just encapsulating the component library? Then I will also be front-end engineering!"

前端工程化可不知识会封装组件库就可以了。首先，我们要有明确前后端分离的任务能力。简而言之，就是要能一眼看出该任务属于前端还是后端，划分好前后端的职责更利于前端工程化的接入。这也是基于前端工程化解决问题的基础。其次，我们要掌握前端工程化的四大核心特性，模块化、组件化、规范化和自动化。知道它们是怎么实现的，它们各自的标准是什么，因为所有前端工作流程都离不开这些核心内容，

虽然很多社区也都有前端工程化相关文章教程，但它们只针对前端工程化的某个技能，零零星星的知识点与断层式的学习很难充分实践前端工程化。

作为一名网易的资深前端工程师，近三年来，JowayYoung 一直在前端工程化领域实践，利用工程架构的知识重构了众多项目，包括但不限于服务器、脚手架、组件库、工具库、多包仓库、私有仓库、服务部署、文档系统、监控系统、CI/CD和可移植容器等。有了这些前端工程化技术的加持， JowayYoung 负责的项目也从手动处理流程全部替换为自动处理流程，以解放团队双手，让其他成员更专注于自身业务需求。

基于此，JowayYoung 将这些经验总结了下来，希望能在这本小册中与你分享。为了让前端工程化小册适合更多开发者，JowayYoung 会以小白的身份，与你一起深入工程的各个环节，带你走完前端工程化落地的全过程。

具体来说，小册主要分为 6 大模块。

• 规范篇：熟悉模块/代码/提交三大开发阶段规范，通过规范约束自己，保障工作质量与提升开发效率。
• Service : Familiar with 云服务器/域名系统/站服务器the deployment service environment, master the overall deployment and tool configuration, and learn to independently launch websites and applications.
• Environment : Familiar with Node/Nvm/Npmthe deployment and development environment, build one independently 接口服务, and practice 环境/镜像/数据/进程four Nodeapplication methods.
• Construction : Familiar with 构建工具packaging class library modules, package one independently 类库模块, and 测试用例ensure the production quality of the code.
• Organization : Familiar with Monorepo模式managing multi-package warehouses, maintaining one independently 多包仓库, and Npm Scopepublishing modules to public warehouses.
• Deployment : Familiar with 自动化工具deploying front-end projects, build one independently , 私有仓库and automatically deploy it to the public network when submitting code.文档站点CICD

In short, while learning specific skills, we must pay attention to engineering solutions, and using it flexibly will greatly improve our work ability and our own competitiveness.

The booklet is in the new special period, and it is 6discounted ~

You only need to be ￥17.94able to land 前端工程化, say goodbye to talking on paper!

What are you waiting for, come and learn!