美文网首页
前端React系列七:ant-design-pro架构

前端React系列七:ant-design-pro架构

作者: IT前沿技术分享 | 来源:发表于2024-08-27 08:58 被阅读0次
image.png

React 通过 JSX 提供灵活的组件化开发,将 HTML 与 JavaScript 逻辑结合,使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能,通过高效的差异对比和异步渲染,使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持,丰富的第三方库和工具(如 Redux、React Router)以及广泛的企业采用(如 Facebook、Netflix)推动其发展。Create React App 简化项目初始化,内置现代开发配置。React Developer Tools 提供强大调试功能,React Native 扩展技术栈到移动端,Hooks API 推动函数式编程,使代码更简洁和可重用。


React系列系列:
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四:Ant Design简介
前端React系列五:React+CRA+TS+Ant Design高效开发前端
前端React系列六:ant-design-pro简介
前端React系列七:ant-design-pro架构
前端React系列八:ant-design-pro辅助开发命令
前端React系列九:Umi简介
前端React系列十:Umi环境变量


前言

Ant Design Pro 是一个完整的前端解决方案,专为企业级中后台应用而设计。它基于 Ant Design 设计语言,采用 React 技术栈,并集成了 UmiJS 和 Dva 等工具。以下是对 Ant Design Pro 架构的详细分析:

总体架构

我们可以通过下面的大图来了解整个 Ant Design Pro 的架构。

image.png

Ant Design Pro 的架构由以下几个关键部分组成:

  • UI 层:基于 Ant Design 的高质量组件库。
  • 数据层:通过 Dva 管理应用状态和数据流。
  • 路由层:由 UmiJS 提供路由管理。
  • 构建和工具链:Webpack、Babel、ESLint 等工具集成。
  • 开发和测试:Jest 和 Enzyme 进行测试,Prettier 和 ESLint 确保代码质量。

核心技术栈

UmiJS

  • 插件化框架:UmiJS 是一个插件化的前端框架,提供了强大的路由管理和工程化支持。
  • 文件即路由:根据文件结构自动生成路由配置。
  • 动态加载:支持按需加载,提升性能。
  • 插件机制:通过插件系统扩展功能,适应不同的项目需求。

Dva

  • 状态管理:基于 Redux 和 Redux-saga,简化了状态管理。
  • 模型(Model):将 state、reducers、effects、subscriptions 结合在一起,通过 model 组织状态和逻辑。
  • 数据流:提供清晰的数据流动,便于调试和维护。

Design

  • 组件库:提供了丰富的 UI 组件,如表单、表格、按钮等,提升开发效率。
  • 设计语言:统一的设计规范和风格,确保应用界面一致性。
  • 定制化:支持主题定制和样式覆盖,满足个性化需求。

项目结构

Ant Design Pro 的项目结构合理,便于组织和管理代码。典型的项目结构如下:

/public         // 公共资源文件,如 HTML 模板和静态资源
/src
  /assets       // 静态资源,如图片、样式文件等
  /components   // 通用组件
  /models       // Dva 数据模型,用于管理全局状态
  /services     // 与后台接口的交互逻辑
  /utils        // 工具函数和公共方法
  /layouts      // 布局组件
  /pages        // 页面组件
  /locales      // 国际化资源文件
/config         // UmiJS 的配置文件
/mock           // 模拟数据,用于本地开发和测试

核心功能

组件化开发

  • 高质量组件:Ant Design 提供的组件封装了常见的 UI 交互模式,开发者可以直接使用这些组件构建页面。
  • 模块化:通过组件化开发,提升代码的复用性和维护性。

路由管理

  • 文件即路由:UmiJS 根据文件结构自动生成路由配置。
  • 动态加载:支持代码分割和按需加载,优化性能。

状态管理

  • 简化 Redux 使用:Dva 提供了简洁的 API,将 Redux 和 Redux-saga 的优点结合,降低了使用门槛。
  • 模型概念:通过 model 将 state、reducers、effects、subscriptions 结合在一起,便于管理。

国际化支持

  • 内置国际化:Ant Design Pro 提供了国际化支持,通过 /locales 文件夹管理多语言资源文件。

权限管理

  • 基于角色的访问控制(RBAC):支持基于角色的权限管理,开发者可以根据业务需求定制权限规则。

模拟数据

  • 本地开发和测试:通过 /mock 目录和配置文件,支持模拟数据的生成和接口的模拟。

构建和工具链

Webpack

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等,从而减少前端的工作量。当然,Webpack 功能很强大,能帮我们完成的工作远远不止这些。

  • 模块打包:将模块化的 JavaScript 文件及其依赖打包成静态资源。
  • 插件和加载器:通过插件和加载器扩展功能,如 Babel-loader 处理 ES6+ 代码,CSS-loader 处理 CSS 文件。
  • 开发服务器:提供热模块替换(HMR),提升开发效率。

Babel

  • JavaScript 编译器:将现代 JavaScript 语法转换为旧版本浏览器兼容的代码。

fabric

pro 内置了 fabric 作为了编码规范,fabric 提供了严格但是不严苛的 lint 规则集,包含 eslintstylelintprettier 三种工具,可以显著的提升代码质量,规范代码风格。

  • 代码质量:通过 ESLint 进行代码静态分析,发现潜在的问题。
  • 代码风格:通过 Prettier 统一代码格式,保证代码风格一致。

umi 与 webpack

运行时和编译时

Pro 的底座基于 umi, umi 与 webpack 相比增加了运行时相关的能力,我们在开发中有时候可能难以区分。

  • 编译时 指的是代码在编译的时候做的事情,这个阶段的环境一般是 node 环境,可以使用 fs,path 等功能。但是同时因为没有使用 webpack ,所以 jsx,引入图片等非 node 的能力是无法使用的。
  • 运行时 是指代码已经编译完成开始运行的阶段,这个阶段一般是浏览器环境,不能使用 fs,path 等功能,访问 url 也会有跨域的问题,但是这个环境被 webpack 编译过,所以可以写 jsx,导入图片等功能。

运行时和编译时两个环境用起来容易混淆,这里有一个简单的版本:

  • src 文件夹中都是运行时的代码,都会经过 webpack 编译。
  • 其他目录的都可以认为是编译时,可以使用 node 能力。

这也是为什么我们不能在 config.ts 里面写 JSX 的原因。

umi-插件化的前端框架

umi作为Pro 的底座 ,它是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力,同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。

如果不喜欢 umi 默认的配置,可以在这里看看有没有你喜欢的配置。如果还是不能满足就要自定义 webpack 了,chainWebpack 可以自定义内置的 webpack 配置。

webpack 对于 node 也是有版本需求的,不同 webpack 对 node 版本的依赖也不同,所以最好的办法是升级到最新的长期维护版本

开发和测试

Jest 和 Enzyme

  • 单元测试:通过 Jest 编写和运行单元测试,确保代码的正确性。
  • 组件测试:通过 Enzyme 测试 React 组件的行为和渲染结果。

总结

Ant Design Pro 是一个强大且灵活的前端框架,结合了 UmiJS、Dva、Ant Design 等现代前端技术,提供了丰富的功能和工具。其合理的项目结构、高质量的 UI 组件、完善的状态管理和国际化支持,使其成为构建企业级中后台应用的理想选择。通过使用 Ant Design Pro,开发者可以快速搭建高质量的中后台应用,提高开发效率和代码质量。

相关文章

网友评论

      本文标题:前端React系列七:ant-design-pro架构

      本文链接:https://www.haomeiwen.com/subject/zjslhjtx.html