读《前端架构设计》 兼谈架构与框架

《前端架构设计》

架构？框架？傻傻分不清楚

在中文里面，“架构”和“框架”只有一字之差，你要问个普通人“架构”和“框架”有什么区别，可能十有八九是说不清楚的。那么在IT圈里，这个问题的答案就很清楚吗？搜一搜“架构 框架”关键字，排在前面的搜索结果几乎都是“架构和框架的区别”，可见在中文世界里面这个问题是有很多人有疑惑的，否则也没必要写文章来澄清概念。

那么Architecture（架构）和 Framework （框架）在英文世界里面意思就很清楚吗？搜索 Framework vs Architecture ，会发现也有大量 What is the difference between framework and architecture? 这类的话题，可见 Architecture 与 Framework 的区别在英文世界里也是一个 confusion 。

所以在读《前端架构设计》这本书的时候，我发现还真有必要把“架构”和“框架”的概念和区别搞搞清楚。

---

什么是架构？

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

上面这段是在本书第一章的第一句话，不知道你能否从这句话里看出“架构”是个什么意思？反正我看过这句后依然是很懵懂的。

当思考前端架构师的角色时，我总会联想到传统的建筑设计师。

接下来的这句话，把架构师和建筑设计师联系起来，有那么点意思了，架构师是做设计，建筑设计师也是做设计，有点相通。再来看一看原文是怎么写的 ——

When I think about the role of a frontend architect, I always think about the characteristics that it shares with that of a traditional architect.

对比“前端架构师”（frontend architect）和“传统的建筑设计师”（traditional architect）的英文原文，我们会立即豁然开朗 —— 原来“架构师”（architect）就是 “建筑设计师”（architect）嘛！既然“架构师”就是“建筑设计师”，那么架构（architecture）和建筑学（architecture）也就可以对应起来了！

我们看看维基百科是怎么给建筑学做定义的 ——

The style of design and method of construction of buildings and other physical structures.

翻译过来：建筑学是建筑物或其他具体构造物的设计风格与建造方式。

再看看计算机领域里的架构是怎么定义的 ——

Computer architecture is a set of rules and methods that describe the functionality, organization, and implementation of computer systems.

翻译过来：计算机架构是描述计算机系统的功能，组织和实现的一套规则和方法。

简而言之，计算机世界里的架构就是现实世界里的建筑学，都是规则和方法论以及具体的实现蓝图。

---

前端架构师的职责

有了前面的概念铺垫，接下来的东西就好理解了

在建设过程中，建筑设计师需要设计和规划方案，并且跟进施工过程。这与前端架构师的工作有着异曲同工之妙，不同的是后者建造的是网站，而不是建筑物。比起浇筑混凝土， 建筑设计师会在设计工程构图的工作上倾注更多的精力。同理，相比编写具体的代码，前端架构师更专注于开发工具和优化流程。

归纳起来，前端架构师的职责就是：（1）体系设计，建立系统设计的规范，清晰描绘产品和代码的最终形态 ；（2）工作规划，设计出能流畅运转的系统，制定完整开发工作流；（3）监督跟进，能够持续地优化工作流程，保证项目高效率完成。

那么前端架构师是不是只要做好管理工作，不再需要写代码呢？作者的答案是否定的 —— 前端架构师不仅要写更多代码，更要会用多种编程语言，还要使用大量的工具。代码量并未减少，只是代码的读者发生了改变。前端开发人员面向终端用户写代码，而前端架构师面向的则是团队里的开发人员。

---

架构与框架

前面写了一堆，为的是搞清楚什么是架构（architecture）和架构师（architect），现在再厘清什么是框架（framework）就容易多了。

我们先看看建筑学（architecture）里的“框架”是什么意思 ——框架指建筑工程中，由梁、柱等联结而成的结构。

比如，建筑师（architect）设计好了雷峰塔的外观 —— 

雷峰塔

看上去像是中国古代建筑里典型的砖木结构，但具体怎么建就是涉及选框架（framework）的问题了。其实最后重建的雷峰塔并没有采用传统的砖木结构框架，而是用的钢筋混凝土框架，甚至里面还有电梯！

回到本书的内容里，前端架构师除了要设计网站的外观（HTML、CSS），还要负责Javascript的框架（framework）选型，你可以根据需要去选 Angular、React、Vue…… 当然，没有哪个JavaScript框架是完美的，随着技术的发展，任何框架（framework）也都会有过时的一天！

---

总结

《前端架构设计》一书让我们了解什么是前端架构，而前端架构师的工作又是什么，也让我们能够厘清前端架构和前端框架之间的关系。

如果这是你第一次制定架构计划，请记住你将要迭代很多次!不要把你所有的希望 寄托于一个单独的解决方案、框架或者平台，除非它一次又一次地被证明是有效的。