前端技术架构与工程-第1章-前端工程化

前端的时代意义

业务逻辑与交互逻辑

• 表现层（Interface Layer）
• 表现控制层（Interface Control Layer）
• 业务逻辑层（Business Logic Layer）
• 数据访问层（Data Access Layer）
• 数据储存层（Data Storage Layer）

分层架构是实现关注点分离的必要途径

业务逻辑是现实业务规则的编码实现，决定了数据被创建、储存和修改的规则。

交互逻辑指的是将数据展示给用户的方式。

前端的边界

分层架构最典型的优势之一是负责各层级的开发者可以实现并行开发。当前，前端仍然是围绕交互逻辑展开的。

架构与工程

代码和流程是软件工程的核心关注点。

从代码的角度考虑，工程的目标是保证软件的高可用性、可扩展性、可伸缩性、性能以及安全，这些要素共同组成了软件的技术架构。

架构之外，工程从更宏观的角度完善开发和维护流程的管控，强调项目迭代的规范性、有序性、可控性和高效性，并根据架构特征提供额外的辅助功能。

架构是工程的子集。

暂将前端工程化于架构之外的部分称为 前端工程服务体系。

前端工程化 = 前端技术架构 + 前端工程服务体系

零散的前端架构

前端架构包括的环节：

• 源码组织规范
• 组件化 / 模块化
• 数据管理
• 性能优化
• 前后端分离

模糊的前端工程边界

前端与测试

单元测试、集成测试、端到端测试、验收测试。单元测试和集成测试通常由开发人员在将应用程序交付测试之前进行。端到端测试通常由测试工程师完成，测试范畴包括功能、性能、健壮性、稳定性等。验收测试指站在用户的角度去评估应用程序是否满足了需求，由需求方（通常为产品经理）负责。

前端架构师的职责

• 根据业务特征设计合理的前端技术架构
• 根据架构特征搭建高效的前端工程服务体系

技术架构

熵增（正熵）代表系统趋向无序，熵减（负熵）代表系统趋向有序。软件架构中，熵增的极端结果是 彻底的重构。架构师的职责是通过及时、有效的干预，令软件架构产生负熵，以保持系统的有序。

软件架构的两个基本要素：分治和聚合。通过合理地解耦各个组件 / 层级的功能提高系统的高效性和灵活性，所有组件 / 层级在完成各自功能的同时组合为完整的软件系统。

编程语言

前端架构师在编程语言方面的工作并非集中于语言本身，而是在充分了解语言特性的前提下制定适用于业务类型的开发规范和技术栈。

技术规范

包括编码规范、项目源码的组织结构、依赖管理、第三方技术选型。唯一原则是一致性。

Code Review 的目的：

1. 发现代码逻辑的缺陷以及算法对性能的不良影响；
2. 纠正开发者不规范的编码方式。

组件化

融入了面向对象的理念，要考虑封装性、扩展性、可组合性、可复用性等。

按照与产品逻辑耦合程度的强弱，可分为基础组件和业务组件。

前后端分离

宗旨是将前端开发与后端开发解耦，实现开发、维护、部署、发布的相对独立性。方案分两类：SPA 架构和 Node.js 渲染层。

性能

• 加载性能，主要目标是尽可能快地将网站呈现给用户
• 执行性能，主要目标是快速响应用户的操作

前端架构师要在深刻理解浏览器渲染原理、编程语言特性、HTTP 等知识的前提下制定适用于前端并且与 Web 整体架构相契合的性能优化策略。

工程服务体系

前端工程化最基本的原则是在保证产品功能的前提下尽可能地降低迭代所消耗的成本。成本分为：人力成本和沟通成本。

前端工程服务体系的目标：

• 降低开发本身所消耗的人力成本
• 降低跨团队协作消耗的沟通成本

开发

• 减少重复性体力劳动
• 建立规范的代码版本管理规范
• 辅助跨团队并行开发

构建

• 编程语言：构建针对编程语言的相关功能可以理解为编译，即将源代码转换为客户端可执行的过程。CSS 预编译、特定开发框架编译
• 性能优化：压缩混淆、自动生成 CSS Sprite、动态模块按需加载
• 部署策略：给静态资源 URL 加入 Hash 指纹和 CDN 路径
• 开发效率：文档生成、动态构建
• 审查评估：规范审查、性能评估

部署

部署最核心的地方并不是对不同类型资源的处理而是对流程的控制

持续化

工程化的第一步是合理地使用工具以提高各个环节独立的工作效率；第二步是搭建自动化流程来提高跨团队协作开发的效率，降低迭代整体所消耗的时间成本；最终的目的是持续化。

监控和统计

对前端稳定性的监控一方面针对的是前端本身的交互逻辑，但更多针对的是数据接口，也就是服务端的稳定性。在前端调用接口没有返回预期结果时立即反馈到监控平台并且报告错误信息，便于第一时间定位到问题症结。

本文摘自《前端技术架构与工程》