react 构建可维护可扩展的前端应用

一、前端项目的理想架构

1. 前端项目的理想架构，可维护、可扩展、可测试、易开发、易构建

2. 对于易于开发，如下所示：

• 开发工具是否完善
• 生态圈是否繁荣
• 社区是否活跃

3. 对于易于扩展，如下所示：

• 增加新功能是否容易
• 新功能是否会显著增加系统复杂度

4. 对于易于维护，如下所示：

• 代码是否容易理解
• 文档是否健全

5. 对于易于测试，如下所示：

• 功能的分层是否清晰
• 副作用少
• 尽量使用纯函数

6. 对于易于构建，如下所示：

• 使用通用技术和架构
• 构建工具的选择

二、拆分复杂度，按领域模型组织代码，降低耦合度

1. 项目的演变，如下所示：

• 项目初期，规模小，模块关系清晰
• 项目逐渐复杂，添加了更多组件和其它元素
• 项目收尾，文件结构，模块依赖错综复杂

2. 将业务逻辑拆分成高内聚松耦合的模块，可以通过 React 技术栈实现

三、拆分复杂度，如何组织 component、action 和 reducer

1. 文件夹结构，如下所示：

• 按 feature 组织源文件
• 组件和样式文件同一级
• Redux 单独文件夹
• 单元测试保持同样目录结构放在 tests 文件夹

2. 组件和样式、组织 Action 和 Reducer

3. 对于组织 component、action 和 reducer，如下所示：

• 按 feature 组织组件，action 和 reducer
• 使用 root loader 加载 feature 下的各个资源
• 做到高内聚松耦合

四、拆分复杂度，如何组织 React Router 的路由配置

1. 在每个 feature 中单独定义自己的路由

2. 使用 JSON 定义顶层路由，解析 JSON 路由到 React Router 语法

3. 对于组织 React Router 的路由配置，如下所示：

• 每个 feature 都有自己的专属路由配置
• 顶层路由使用 JSON 配置更易维护和理解
• 如何解析 JSON 配置到 React Router 语法

五、使用 Rekit，创建项目，代码生成和重构

1. Rekit 背景，如下所示：

• 前端技术功能越来越强大，开发变得越来越复杂
• 一个独立功能通常需要多个文件组成
• 代码模版很复杂
• 重构极为困难
• 项目复杂后很难理解和维护

2. Rekit，更好的代码导航，如下所示：

• 语义化的组织源代码文件
• 使用子 Tab 来展示项目元素的各个部分
• 直观的显示和导航某个功能的所有依赖

3. Rekit，一键生成项目元素，如下所示：

• 直观的 UI 用于生成组件，action，reducer 等
• 模版代码遵循最佳实践
• 支持命令行方式创建项目元素

4. Rekit，重构非常容易，如下所示：

• 右键菜单重命名或者删除某个项目元素
• 所有相关代码都会一次性重构从而保证一致性
• 详细的 log 信息显示重构的完整修改

5. Rekit，可视化的项目架构，如下所示：

• 项目总体架构的可视化图表
• 项目依赖关系的图表

6. Rekit 是如何工作的，如下所示：

• 定义了基于 feature 的可扩展文件夹结构
• 基于最佳实践生成代码和管理项目元素
• 提供工具和 IDE 确保代码和文件夹结构遵循最佳实践

六、使用 Rekit，遵循最佳实践，保持代码一致性

1. 对于遵循最佳实践，如下所示：

• 以 feature 方式组织代码
• 拆分组件，action 和 reducer
• 拆分路由配置

2. 对于通过代码自动生成保持一致性，如下所示：

• 文件夹结构一致性
• 文件名一致性
• 变量名一致性
• 代码逻辑的一致性