《前端架构设计》学习笔记一--架构的种子

前言声明：该系列是对《前端架构设计》一书的阅读笔记，包含大量原书的文案

序：引言

前端架构的种子

编写前端样式总是作为延后的事情来考虑

如果把前端开发当作“一个值得做出战略规划和有投资价值的关键元素”

如果我们在CSS框架、文档工具、构建流程的命名规范，甚至标记本身这些方面拥有话语权会怎么

 

前端架构师的含义

软件架构师的职责就是要保证项目中的每一步都在总体架构的指导下进行，而不会随机决定

前端领域缺少架构，需要架构讨论使用什么技术栈、内容类型是什么，如何被创建、保存以及展示在页面上

不拘泥于做一些零碎的工作，遇到优先级不高的情况

 

一、前端架构原则

前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效、可持续的工作流

相比编写具体的代码，前端架构师更专注于开发工具和优化流程

作为前端架构师，我们认为有多个关键的决策需要在项目启动之初就制定下来

 

1.1 前端架构师的工作职责

　　体系设计（规范）

　　　　前端架构师掌控网站背后的前端开发方法和系统设计学。通过设计所有前端开发人员都要遵循的系统规范，前端架构师清晰描绘了产品和代码的最终形态

　　工作规划（规范落地）

　　　　前端架构师的目标是设计出能流畅运转的系统。

　　　　系统推动一个完整的开发工作流，并且能得到持续有效的反馈

　　　　完整的工作流可能会用到多种工具，如版本控制器，任务调度器、CSS处理器、文档工具、测试组件和服务器自动化工具等

　　监督跟进（持续优化）

　　　　前端架构设计绝不是一劳永逸的工作。前端架构师的一个非常重要的能力，就是能够持续地优化工作流程

　　　　前端架构师不等同管理角色，他需要写更多代码，会多种编程语言，还要使用大量的工具

　　　　前端开发人员面向终端用户写代码，而前端架构师面向的则是团队里的开发人员

 

1.2 在团队中引入前端架构的难题

先有鸡还是先有蛋

没有前端架构的工作我怎么会有前端架构的经验，没有前端架构的经验，你怎么胜任前端架构的工作

你被要求证明这种工作流程是有效的，又怎么会有机会去实际地为某个项目设计前端架构呢？

 

二、启动一个Alpha项目

有人直接给你一个机会去指定到底是“先有鸡还是先有蛋”，不管理由，你就是这么认为，以此为基础进行下去，这样我们解决了“先有鸡还是先有蛋”的问题

BOSS说给你一个机会去实践前端架构设计的理念

 

2.1 开端

创建一张很长的愿望清单

　　模块化内容：尽可能复用小的组件，而不是弄出几十个、甚至上百个不同的内容块

　　全面测试：现有前端代码合并入主干，影响几个月前代码的运行。需要像测试后端代码一样测试我们新提交的代码

　　流式处理：引入Git工作流程，用它来管理应用代码。将简单易出错的手动步骤自动化：如图片压缩，代码压缩、混淆、部署等

　　详细的文档：根据项目的受众不同，每个人接触到该项目时，能够找到适合自己的、详细的文档

 

2.2 全副武装

我们编写的代码、开发的流程、磨练的技术若能够充分验证这套方法论的合理性，在下一个项目中该有自信为自己的前端架构而战。

能够在项目的重要决策中发挥影响力；挑战现有的工具和流程，构建更智能、可重用性更高的代码

 

三、前端架构的核心

作为前端架构师，我们必须驾驭必要的工具和流程，而这两者正式成功构建网站的要素

3.1 围绕四个核心工作

这四个核心的主题、技术和实践是构建可扩展和可持续优化的系统的基础

他们引入了在任何前端开发项目中都需要进行的一系列讨论

这些讨论会帮助我们确立对项目的整体期望，包括代码质量、实现每一项需求所需的时间和工作量，以及保证所有开发工作能够按时完成的工作流

 

前端架构师的强项之一就是花一个小时就能了解某个新框架或者gulp插件，找出其亮点和不足，并确定它在项目中的可行性

书中包含大量的技术和概念，但没有人精通每一种技术。

前端架构师精通这些内容的一小部分，胜任一大部分，余下部分则是入门水平

 

3.2 四个核心的含义

代码

　　专注于如何实现系统架构中国呢的HTML、CSS、Javascript

流程

　　思考怎么用工具和流程构建一个高效且避免出错的工作流

　　改变现有的落后开发流程，前端工作在开发流程中不再滞后于UI设计和后端开发

测试

　　保证新代码和老代码能够很好的兼容

　　创建覆盖面广泛的测试方案，能确保老代码还能正常运作

文档

　　作为前端架构师，你要善于在项目开发的同时编写良好的文档