antd技术栈体系

Ant Design https://github.com/ant-design

新产品设计研发，对线上的产品进行全新改版重构，推荐使用 Antd组件库; 从体验设计，代码优化，代码规范，都有规范可循。

1. Ant Design v5
   1. Ant Design Pro v6 中台解决方案
   2. Antd Design Mobile v5
   3. Ant Motion 动效设计库
2. ProComponents
   1. 基于 Ant Design4x开发的模板组件，提升CRUD操作的效率，更加专注于开发而不是实现细节
   2. 缺点：不兼容 antd3x
3. Umi蚂蚁金融系
   1. 与 Bigfish 框架无缝对接
   2. 集成Dva - 基于 redux、redux-saga 和 react-router 的轻量级前端框架
   3. midwayjs Nodejs 企业级框架
   4. Umi Hooks https://hooks.umijs.org/zh-CN
      1. https://github.com/alibaba/hooks
      2. https://hooks.umijs.org/zh-CN
4. TechUI
   1. 蚂蚁系的中后台业务 UI 资产，服务企业级产品以及蚂蚁中后台产品
   2. TechUI 服务于蚂蚁集团内部的 UI 资产库，包括模板组件，业务组件，区块等多种类型的资产
   3. 通过 ProComponents 的形式开源了部分模板组件
   4. 内推 https://www.yuque.com/ant-design/course/about
5. Fusion Design
   1. 阿里系的中后台UI解决方案
   2. https://fusion.design/pc/template/728
6. Ice Design
   1. 淘宝系的开源
   2. icestark 微前端
   3. https://ice.work/scaffold
   4. https://ice.alibaba-inc.com

ProComponent

Ant Design 设计体系一脉相承，无缝对接 antd 项目；Umi体系
每一个npm包，都是一个独立的组件，一个组件 ≈ 一个页面
使用 TypeScript 开发，提供完整的类型定义文件

npm i @ant-design/pro-components --save
yarn add @ant-design/pro-components

pro-table 表格

1. https://protable.ant.design
2. 在antd Table 之上扩展了更多便捷易用的功能
3. 默认封装数据请求，自动数据过滤，标题工具栏，预设格式化翻页，搜索、筛选、刷新等常用表格行为
4. 提高了开发效率，相应的也提高了组件的理解复杂度

pro-editor 编辑器

https://pro-editor.antdigital.dev/

pro-editor技术栈

• leva

antd-color-editor

pro-flow 流程编辑器

Github https://github.com/ant-design/pro-flow
网站 https://ant-design.github.io/pro-flow

antd-mobile

https://mobile.ant.design/zh

react npm社区

• ahooks
• antd-mobile
• antd-mobile
• dayjs
• lodash-es
• history
• rc-touchable
• gsap 动画库
• react-gsap
• qrcode
• screenfull
• decimal.js
• js-cookie
• url-parse
• ua-parser-js
• DevDependencies
• postcss-pxtorem
• jest
• jest-config
• jest-environment-jsdom
• dumi-theme-mobile
• zustand
• immer
• array-move
• rxjs
• lodash
• omit，isequal，isempty,flattern, template,union, unionby, get
• mockjs
• re-resizable
• react-copy-to-clipboard
• react-json-view
• prettier
• unstated-next，https://www.npmjs.com/package/unstated-next
• highlight.js
• diff，https://www.npmjs.com/package/diff
• antd
• @ant-design/pro-table，pro-utils
• dnd-kit
• 列表、网格、多个容器、嵌套上下文、可变大小的项目、虚拟化列表、2D 游戏
• https://zhuanlan.zhihu.com/p/430177180

微前端

和框架无关，沙箱能力、CSS Module 样式方案，让微应用更安全地接入

qiankun

https://qiankun.umijs.org/

icestark

https://micro-frontends.ice.work/

微前端相关文档
https://www.yuque.com/search?scope=&p=1&q=%E5%BE%AE%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84&type=content&advanced=&related=

umijs

https://bigfish.antfin-inc.com/doc/intro
Bigfish = umi + umi-preset-bigfish

1. Bigfish 框架本身是轻技术、重业务的
2. 对接的技术层我们放在 umi 层做
3. 和业务相关的放在 Bigfish 层做

1. 基于 umi 整合了前端工具链的企业级前端开发框架
   1. 提供开箱即用的研发和构建方案，最小化成本开发
   2. 强大的生态系统：打通了 OneAPI、TechUI、OneX、云凤蝶、Basement 等生态，让研发更加高效
2. 从工程角度集成了各类功能，并且提供从初始化开发到最终上线整套技术方案
3. 解决了前端开发经常遇到的前端技术栈整合配置麻烦、缺少统一规范的最佳实践、前端联调发布上线链路复杂三大痛点
   1. 提供最佳实践：提布局、权限、网络请求、错误处理、数据流等场景的最佳实践指导，
   2. 不再纠结方案选择，拥有一套标准和高效的研发方案
   3. 一站式发布部署：和 Basement 打通，从工程初始化，到研发迭代管理，到一键发布静态资源及页面渲染

参考 https://www.yuque.com/songmeinuo/private/ua3oyn
bigfish文档 https://www.yuque.com/alvin-eofll/kxfnwq/shtlxi

ant design pro

https://pro.ant.design/zh-CN

dva

react数据流框架

Ice Design

微前端框架 icestark

Fusion Design

Alipay Design

https://design.alipay.com