Analysis of AntDesign - Basic architecture

[mominger]

This article written together by me and Cherry

The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, pls feel free to let me know.many thx.

AntDesign is an enterprise-class UI design language and React UI library, Similar to it is Material-UI or Element React
This article is based on AntDesign 4.23.2
At the top is its basic architecture diagram, which will be analyzed layer by layer below
AntDesign official website
AntDesign source code

• 1 Directory
• 2 Tech stack
• 3 Component source code
• 4 Compile && Compiled components
• 5 Document
  • 5.1 AntDesign Document Library
  • 5.1 Story Document Library
• 6 Test
• 7 Code formatting
• 8 CI/CD

1 Directory

2 Tech stack

AntDesign builds on react-component

3 Component source code

There is planning to choose a few typical components to source code analysis in subsequent articles

4 Compile && Compiled components

Compile with commands in package.json

 "compile": "npm run clean && antd-tools run compile"

Can be found from package-lock.json, antd-tools actually corresponds to node_modules/@ant-design/tools/lib/cli/index.js
As below is the specific exploration for the compilation process

Find the package corresponding to antd-tools by package-lock.json

Compiling by gulpfile

Compile to ES6/ES5 modular code by gulpfile

Compile into bundle by webpack

Compiled component

5 Document

react-styleguidist
storybook 的 showcase

5.1 AntDesign Document Library

Use its self-developed bisheng documentation library
bisheng mixes markdown and jsx writing. Similar to storybook.

bisheng codes

bisheng effect

5.1 Story Document Library

Storybook is recommended as it is more welcoming than bisheng. For example, bisheng star 2.8K. But github storybook 74.1k.

Microsoft Fluent Component Library storybook effect

Microsoft VSCode Webview UI Toolkit

6 Test

Test command

Test configuration, such as setting enzyme, mock, etc.

jest configuration file

There are unit tests and snapshot tests in each component directory

7 Code formatting

Formatting codes by eslint+prettier, and execute husky checking before submitting
For details, you can check 9. Pre Commit in my other blog post Design a web architecture based on React18+Mobx `

8 CI/CD

Public component libraries, such as AntDesign, Element-react, will be published to npmjs, their source code will be hosted on github, and be publicly available for download and use
But the internal component library of the enterprise usually use jFrog + gitlab, which requires authentication to access
Travis CI is a CI/CD platform with integrating github. Enterprises usually use gitlab CI/CD or the more powerful jekins.

The following is the Chinese version, the same content as above

AntDesign is an enterprise-class UI design language and React UI library, 与它类似的还有 Material-UI 或 Element React
本文基于 AntDesign 4.23.2
最顶上的是它的基础架构图，会在下面逐层进行分析
AntDesign 官网
AntDesign 源码

• 1 目录
• 2 技术栈
• 3 组件源码
• 4 编译 && 编译后的组件
• 5 文档
  • 5.1 AntDesign 文档库
  • 5.1 Story 文档库
• 6 测试
• 7 代码格式化
• 8 CI/CD

1 目录

2 技术栈

AntDesign 基于 react-component 构建

3 组件源码

会在后续文章选几个典型组件进行源码分析

4 编译 && 编译后的组件

通过 package.json里的命令进行编译

 "compile": "npm run clean && antd-tools run compile"

从package-lock.json 可以找到，antd-tools 实际对应 node_modules/@ant-design/tools/lib/cli/index.js
下面是具体的探索编译的过程

通过package-lock.json 找 antd-tools 对应的 package

通过gulpfile进行编译

编译成 ES6/ES5 模块化代码

编译成bundle

编译后的组件

5 文档

react-styleguidist
storybook 的 showcase

5.1 AntDesign 文档库

用其自研的 bisheng 文档库
bisheng 混合了 markdown和jsx的写法。类似storybook.

bisheng 代码

bisheng 效果

5.1 Story 文档库

建议使用storybook，因为它比bisheng更通用。比如bisheng star 2.8K. 但 github storybook 74.1k.

微软 Fluent 组件库 storybook 效果

微软Microsoft VSCode Webview UI Toolkit

6 测试

测试命令

测试的配置，例如设置enzyme,mock等

jest配置文件

每个组件下都有单元测试和快照测试

7 代码格式化

通过eslint+prettier进行格式化，以及husky在提交前做检查
具体可以查看我的另一篇博文 Design a web architecture based on React18+Mobx里的 9. Pre Commit

8 CI/CD

一般公共组件库，比如AntDesign,Element-react,都会发布到 npmjs，源码托管到github，公开供人下载使用
但企业内部的组件库，则会采用 jFrog + gitlab, 需要通过鉴权才能访问
Travis CI 是和 github绑定的一个 CI/CD平台，企业一般用gitlab CI/CD 或者更强大的 jekins.