E-commerce Components

什么是FISH-X

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

FISH-X 平台完整蓝图

• 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 规范化，方便跨业务系统集成

本地文档及示例查看

yarn install

npm run docz:dev

组件发布

• 修改组件代码
• 修改根目录下 package.json 文件中version中的版本号(版本号要比之前的大)
• 根目录先执行 npm run compile 再执行 npm run dist 最后 npm publish，要切换到npm官方源进行发包。

官网文档更新

请至CI/CD流程pipeline中手动运行prepare和doc