多年以后，你再也不是那个切图仔，而前端也不再是简单的拼页面。从最初我们高举规范化大旗，什么语意化命名，统一规范。到今天，我们对工程化的信仰。每个前端团队也都在为自己的业务不断探索，追求更加完善的工程化解决方案。

最近刚读完《前端架构设计》这本书，收获颇丰，谈谈几点理解。

本书主要结合作者在参与RedHat项目的网站架构经历，介绍了前端架构的原则和核心，并围绕着前端架构的四个核心：代码、流程、测试、文档，针对每一部分进行了深入的探讨并提出了相应的实践方案。作为一个刚工作不久的前端新手，书中详细地介绍了前端架构的职责和使命，其中介绍的一些工具和概念之前都未听说过，读完之后也增加了我的见识，对于自己的职业规划也有了更加清晰的认识。

前端是近年来一个新兴的职业，在Web开发的早期，前端一直被认为是低端的名词，“切图仔、美工、网页设计师……”，从这些名词中，你可以想象到早期的“前端”的工作内容。架构从何而来？后来，在前后端一体的时代，“前端”写页面模板，后端读取模板，生成静态页面发送给浏览器渲染，那时的架构是后端架构，采用的是后端MVC模式，前端只是MVC的V层。随着Web2.0时代的到来，前端开始从刀耕火种的蛮荒时代向现代的工程化方向演进，前后端分离，前端开始慢慢建立完善的流程和体系，前端架构开始出现。

架构的本质是什么？有人说是管理，对机器和代码的管理，那么前端架构是管理什么呢？
读完本书你就知道，前端架构是对代码、流程、测试、文档的管理，最终目的是实现高效、可持续的工作流。架构师的职责是遵循前端架构的原则，开发和完善各种开发工具、自动化工作流，设计项目架构，提高整个团队的开发效率，让团队成员可以更好的协同工作。

代码

从代码的管理来说，前端代码主要包括HTML、CSS、JavaScript，前端架构的职责是建立代码规范、提高代码质量，让代码更加健壮。下面列举几点我的理解：

• 1、HTML语义化
• 2、OOCSS、ACSS、BEM、SMACSS，WTFCSS？你值得拥有
• 3、采用LESS、SASS、PostCSS对CSS进行处理
• 4、使用ESLint进行代码检查，墙裂推荐

流程

从流程管理来讲，前端架构的职责是明确前端开发的各个环节，从需求分析到原型设计，到具体的代码提交和测试，再到最终的部署和维护。在自动化和工程化日益完善的前端领域，你可以采用更先进的方法。通过设计更加完善细致的自动化流程，才能构建出更加高效、更加健壮和可扩展的应用。具体来说，包括工作流设计、团队协作工具、构建工具、持续集成等等。下面是我的几点理解：

• 1、需求面向整个项目参与者：设计、后端、前端
• 2、Git进行团队协作
• 3、采用Grunt、Gulp、Webpack、NPM等自动化构建工具
• 4、使用Jenkins、Travis CI等服务进行持续集成
• 5、框架选型

自动化构建工具的出现有效地解决了前端开发中的效率问题，至于工具的选择，前端架构需要调研每种工具的特点，评估其优点和缺点，根据项目的需求选择更加适合的工具。同样，框架选型也是如此，Angular、React、Vue等MVVM框架一时炙手可热，在项目的技术选型时，必须对整个技术架构考虑周全，包括可扩展性、可测试性等等。所谓框架，只是帮助我们解决问题的工具，提高开发效率，我们需要的是学习框架的思想，不要过度依赖框架。框架的选择要根据适当的业务场景，如果Jquery最适合当前的业务，那就是最好的选择。前端架构师的工作就是不断探索和评估新的技术、平台、方法和框架。

测试

从测试管理来讲，前端架构师的职责是通过构建完整的测试来把控网站和设计系统的开发，测试避免了架构师对整个应用的代码进行检查，而是使用各种测试工具来验证应用程序是否正常工作。前端测试一般包括单元测试、集成测试、视觉还原测试、E2E测试等等，其实很多公司的前端是不会写测试用例的，或者很少，可能是繁忙的业务导致没有时间写测试，但是，事实证明，写测试用例的时间是值得的，写测试可以在提交代码之前验证你的代码是否是符合预期的。与测试相关的另外一个概念是测试覆盖率，测试覆盖率反映本次测试的函数或语句被测试到的比例。通过写测试还可以提高开发人员书写函数的健壮性。下面是我的几点理解：

• 1、编写测试用例，进行自动化单元测试
• 2、从各方面进行性能优化
• 3、确认所需的测试覆盖率
• 4、评估前端测试的标准

文档

对于文档管理，前端架构的职责是建立开发的文档并在项目开发过程中进行输出，所谓文档，就像Github项目的README一样，一个优秀的项目应该有完善的文档说明。同样，在团队项目中，特别是人员流动较为频繁的项目，更加应该建立完善的文档说明。此外，文档用来总结项目的踩坑经验，避免产生重复的工作量有很大的作用。下面是我的几点理解：

• 1、采用Hologram、SassDoc等自动化文档生成工具
• 2、建立项目Wiki，记录踩坑经验

总结

如书中所言，“对于任何优秀的架构而言，只要未到最后一刻，你的工作就不会结束。”只要需求变化，项目变得复杂，那么架构也会发生变化。一个优秀的架构师的工作就是搭建一个解决问题的框架，让团队成员能在框架下进行协同工作，完成项目开发需求。

在别处看到这样一句话，与诸君共勉。“多年以后，你再也不是那个切图仔，而前端也不再是简单的拼页面。从最初我们高举规范化大旗，什么语意化命名，统一规范。到今天，我们对工程化的信仰。每个前端团队也都在为自己的业务不断探索，追求更加完善的工程化解决方案。”