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

旧城等待， 2022-11-11 14:41 106阅读 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 条评论，106人围观）

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

相关阅读

相关如何使用 AngularJS 控制器，构建出更加灵活和可维护的 Web 应用

AngularJS 是一款强大的 JavaScript 前端框架，它使用 MVVM（Model-View-ViewModel）的架构模式来进行应用程序的开发。在 Angular

╰半夏微凉°/ 2024年03月17日 20:53/ 0 赞/ 40 阅读

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

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

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

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

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

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

相关设计数据密集型应用第一章：可靠性，可伸缩性，可维护性

第一章：可靠性，可伸缩性，可维护性 [原文地址][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

叁歲伎倆/ 2022年10月10日 06:22/ 0 赞/ 132 阅读

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

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

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

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

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

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

相关 ELF - 灵活可扩展的 HTML5 构建工具

通常当我们开始一个新的 HTML5 场景营销活动项目时，需要创建项目目录，初始化基本的项目文件，然后再添加构建（grunt/gulp/webpack）相关的文件（一次两次三次…

╰半夏微凉°/ 2022年05月21日 11:11/ 0 赞/ 130 阅读

相关试读《Node.js项目实践：构建可扩展的Web应用》感悟

试读《Node.js项目实践：构建可扩展的Web应用》感悟接触Node.js

﹏ヽ暗。殇╰゛Y/ 2022年04月12日 09:58/ 0 赞/ 147 阅读

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

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

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

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

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

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