乐趣区

关于前端:Macaca-DataHub-40-体验功能全新升级

jiezi

Macaca DataHub 是可继续的数据 mock 计划

  • GitHub: https://github.com/macacajs/m…
  • 官网地址：https://macacajs.github.io/ma…

DataHub 4.x 次要变更

  • 反对接口分组，让 API 治理更加容易
  • 编辑器降级为 Monaco，在 DataHub 中领有 vscode 般的体验
  • 细节上的大量优化，少数缺点修复

1. 接口分组治理

随着保护接口变多，咱们会须要分组等治理形式

起初也有社区用户提了这条 issue，DataHub 开发组成员在也退出了探讨，snapre 决定实现这个能力。

具体细节可关上 PR 查看，通过一段时间的在细节和体验上的打磨，2022 年 2 月 28 日 GMT+8 18:00，咱们终于合了这个 PR，从此，DataHub 进入了 4.x 时代，这也是新体验，新性能的开启。

好，接下来咱们就先睹为快：


好，看到这里，不本人上手体验一下是说不过去了，只需两步便可开启体验：

  • 第一步：全局装置 macaca-dathub

    $ npm i macaca-datahub -g

  • 第二步：一键启动服务 

    $ datahub server

能够看到如下的提醒，能够看到 DataHub 面板启动在 9200 端口，socket 启动在 9300 端口：

DataHub server start at: http://127.0.0.1:9200

Websocket server start at: 9300

2. 降级 Manaco 编辑器

给你在 vscode 中编码的体验

在 3.0 时代，咱们场景数据和 Schema 数据的编辑次要是集成了 CodeMirror 进行实现，现如今，咱们迎来了一次大的降级重构，咱们引入了现如今最风行的 ManacoEditor 编辑器，这个编辑器也是 vscode 的内置编辑器哦，所以在应用体验上简直和 vscode 别无二致，好，间接上图：

是不是和 vscode 中编写代码一样丝滑，这就对了，DataHub 总是在用户体验上探究最佳的实际。

3. 开发中退出的细节

好产品总是在细节上拿捏到极致


不晓得大家有没有关注到 MonacoEditor 编辑器右上角那个若有若无的 格式化 JSON 按钮，这个按钮的次要性能是用户输出一个非法的 Object 能够一键转为 JSON，默认暗藏只为的是在家人们编写场景数据时不受太多其它元素的烦扰。

4. 后续打算反对

  • 暗黑模式，应用更加爱护眼睛
  • 直通 issues，通知我你们还须要哪些反对

一个小 Demo 带你体验 DataHub

思考到后面的 4.x 的降级内容可能对新用户有点蛊惑，故有上面的内容

在目前大多数的开发场景下，个别都是前后端拆散模式开发一个 Web 利用，前端工程师通过 Vue、React 等框架来独立开发前端页面，比如说就 Vue 我的项目，咱们通常通过 /src/api/ 目录下的文件与后端对接 API，对于 React 我的项目来说的话就是 /src/service 目录下的文件与后端对接 API，然而前后端开发进度通常不是同步的，故大多数场景下前端工程师都须要 mock 一些数据来测试编写好的页面，通常咱们都会用一个 /mock/ 文件夹来寄存侵入式的 mock 数据，这些数据通常都不能共享，还有很多痛点困扰着前端工程师的开发，故 DataHub 应运而生，

Just enjoy the data out-of-the-box.

这是 DataHub 的外围主旨，在屡次迭代中，外围开发者始终秉恒着这个理念

为了让前端的同学们疾速体验到用 DataHub 助力前端开发带来的便当，我特意写了一个示例我的项目放在了 GitHub 上，读者能够返回 https://github.com/snapre/datahub-sample 下载体验，下载后大抵流程如下：

启动前端开发服务 (React + Vite)

$ cd frontend
$ npm install
$ npm run dev

配置 DataHub 环境

  1. 全局装置 macaca-datahub:

    $ npm install macaca-datahub -g

  2. 一键启动服务:

    $ datahub server

  3. 关上 DataHub 启动的地址:

    $ http://127.0.0.1:9200
  4. 创立一个 Hub 并关上数据上传模式:

  5. 导入我的项目下的模板数据: project_sample.json
  6. 进入刚创立的 Hub，开始用 DataHub 助力前端开发:

Just enjoy the data out-of-the-box

进阶

启动后端服务联调 (Eggjs)

$ cd server
$ npm install
$ npm run dev

可在联调阶段通过实时快照疾速录入场景数据

用户心声

😎一位帅气的前端开发小哥说：

用过 Datahub 来开发，Datahub 不仅能够生成对应场景的 Mock 数据，也能保留和共享 Mock 数据。Datahub 的场景治理不便且易于上手，数据都能可视化操作。除此之外，Datahub 能良好反对多端应用，能够为简单工程提供数据反对。点个赞！

😋一位前端工程师说：

很不便的数据管理及多场景切换性能，再配合自动化测试几乎太省心了。

👏一位资深前端技术专家说：

如果你的业务面临数据环境不稳固、品质回归老本高、跨团队合作重复劳动效力低，那么 DataHub 相对不会让你悲观。

之前社区的一些材料

  • 知乎专栏：《可继续的数据环境计划 – Macaca DataHub》
  • 知乎专栏：《当 Egg 遇上 DataHub 教你轻松搞定多场景服务》
  • 杭州 NodeParty：《DataHub2 – 你的最初一个 mock 计划》
  • 云栖社区：《支付宝小程序摸索之路》
退出移动版