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

旧城等待， 2022-11-11 14:41 181阅读 0赞

#### 一、前端项目的理想架构 ####

1.  前端项目的理想架构，可维护、可扩展、可测试、易开发、易构建
2.  对于易于开发，如下所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.  组件和样式、组织 `Action` 和 `Reducer`
2.  对于组织 `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` 背景，如下所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java最佳实践案例：构建健壮、可维护的Java应用

在构建健壮、可维护的Java应用时，我们需要遵循一些最佳实践。下面是一些具体案例： 1. **模块化设计**： - 使用Maven或Gradle进行项目管理。 -

川长思鸟来/ 2024年10月14日 06:51/ 0 赞/ 56 阅读

相关架构：构建可扩展的网站架构。

发低耦合系统是软件设计的终极目标之一，这一目标驱动着软件开发技术的创新与发展，从软件与硬件的第一次分离到操作系统的诞生；从汇编语言到面向过程的开发语言，再到面向对象的编程...

柔光的暖阳◎/ 2024年04月17日 17:48/ 0 赞/ 75 阅读

相关 Apollo与微服务架构：构建可扩展的应用程序

前言 ![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png] 「作者主页」：[雪碧有白泡泡][Link 1] 「个人

小灰灰/ 2024年02月21日 11:19/ 0 赞/ 65 阅读

相关探索前端构建可视化应用的思路

一、前言前端社区里，低代码/无代码是被讨论的火热赛道。简单来说低代码就是通过编写少量代码的方式完成应用的开发及上线，而无代码是低代码的子集，不需要编写代码通过配置的方式

客官°小女子只卖身不卖艺/ 2024年02月05日 19:01/ 0 赞/ 61 阅读

相关什么是可扩展前端架构？

![aaae50cfa63919c7192e0539172f00d8.png][] 关于软件开发，可扩展性这个词的两个最常见的含义与代码库的性能和长期可维护性有关。你可以同时

╰半夏微凉°/ 2023年10月09日 18:07/ 0 赞/ 8 阅读

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

一、前端项目的理想架构 1. 前端项目的理想架构，可维护、可扩展、可测试、易开发、易构建 2. 对于易于开发，如下所示：开发工具是否完善生态圈是否繁

旧城等待，/ 2022年11月11日 14:41/ 0 赞/ 182 阅读

相关如何创建可扩展和可维护的前端架构

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群现代的前端框架和库可以轻松地创建可重用的 UI 组件。在创建可维护前端应用方面，这是一个很

我就是我/ 2022年09月16日 03:55/ 0 赞/ 178 阅读

相关 Node.js项目实践：构建可扩展的Web应用

[![Center][]][Center 1] [Node.js项目实践：构建可扩展的Web应用][Center 1] 《Node.js项目实践：构建可扩展的

梦里梦外;/ 2022年08月08日 13:52/ 0 赞/ 172 阅读

相关高性能和可扩展的React-Redux

> 注意：文章很长，只想了解逻辑而不深入的，可以直接跳到总结部分。 -------------------- 初识首先，从它暴露对外的`API`开始 R

雨点打透心脏的1/2处/ 2022年04月03日 09:44/ 0 赞/ 151 阅读

相关《构建可扩展的Web站点》书评

谈到Web站点，或者俗称的“网站”，想必很多程序员朋友都不陌生。很多朋友也正是从纯粹HTML的“网页制作”对计算机产生了兴趣，随后开始涉及后台的“网站程序”，最终走入了IT领域

小咪咪/ 2021年12月04日 06:37/ 0 赞/ 206 阅读