## 什么是FISH-X

FISH-X 是 FISH 下一代新版本。与阿里技术栈保持一致，在阿里开源项目（如桌面端Ant-design)上面继续开发，而不是从零开始做。

## FISH-X 平台完整蓝图

![](/public/architecture.png)

- Fish-Desktop-X，简称 FDX
- Fish-Mobile-X，简称 FMX
- Fish-Store-X，简称 FSX
- Fish-Topo-X，简称 FTX
- Fish-Koa-X，简称 FKX
- Fish-CLI-X，简称 FCX
- Fish-Unit-Test-X，简称 FUTX
- NGWEB-DSL-X，简称 NGX

其中，Fish-CLI-X 是底层工具；

Fish-Store-X 是一个全公司共享的前端模板 Store；

NGWEB-DSL-X 是自定义领域建模语言，我们自定义自己的标签规范和语言，然后通过 NGWEB-DSL-X 映射成运行时代码，从而摆脱前端技术不稳定给公司带来的技术风险，这个思路类似于微信小程序和钉钉小程序。



## FDX特点

- 整体上，FDX 与 FMX 相同的 React 技术栈，这样做的原因是最大程度降低业务组织的学习难度。
- 从阿里开源的组件库 AntD 上 fork 分支，而不是从零开始。这样做的目的是，降低对人力的需求。因为 UI 组件库的代码量非常庞大，FDX 做完之后预计会达到 10 万行 JS 代码的规模。目前我们的 FISH 版本已经超过 7 万行 JS，长期维护这样一个庞大的代码库需要消耗比较多的人力，这是很现实的成本。这里存在一个问题，阿里目前开源的 AntD 组件库是非常互联网化的风格，组件的外观很好看，但是每个组件的 feature 都相对比较简单，而软创目前的大部分业务项目还是后台管理类的项目，这些项目需要 UI 组件的特性非常复杂，我们需要投入比较多的人力来进行扩展和改造。
- 根据实际业务抽像出的标准组件接口。 组件接口作为媒介沟通页面跟具体组件实现。比如我们用到了某一个开源的 UI 组件，我们会根据实际业务抽象出一份标准接口，对开源组件进行二次封装之后再调用。这样即使后续需要更换其他组件，也不需要对页面进行改动。所有的 UI 组件，不论是我们自己造轮子写的，还是开源的，都是按照：1. 定义接口 -> 2. 进行封装 -> 3. 实现并上传 znpm 服务器 -> 4. 项目 depencency 中引用来自 znpm 的组件 IDL。 这样的流程来进行引用。
- 支持前端界面的微服务化，解决跨业务系统界面集成的难题。同时促进 UI/UX 规范化，方便跨业务系统集成

## @whalecloud/fdx 开发指南

### 主要目录结构

```
├── src          # 组件源码
├── docs         # 组件文档与demo
├── public       # 网站静态资源
├── .dumi        # 网站主题样式
└── package.json
```

### 本地开发

```bash
$ npm i
$ npm start
```

### 编译

```bash
$ npm run build
```

编译内容将输出到 `/es`, `/lib`, `/dist` 目录

### 发布

```bash
$ npm publish
```

### 文档编译

```bash
$ npm run docs:build
```

### 网站部署

将文档编译输出到 `/docs-dist` 目录的内容，全部拷贝到服务器上
