Hello! Umi UI

Umi UI 这个大坑，今年总算还是踩了。

其实去年还是前年就想做了，但这件事听起来太前沿，和业务关系不大，而且有很大的不确定性，所以优先级始终不高。而今年要在提效上发力，需要有一些可能会带来巨大变化的事情，于是被提上日程。

然后经过一个多月的开发，Umi UI 的第一个版本终于上了。

:rose:

:rose:

:rose:

先看 视频介绍 。

介绍 UMI UI

PRO CODE（写很多代码）和 LOW CODE（写一点点代码）我不确定哪个未来会发展地更好，但就个人而言，一直是倾向于 PRO CODE 的模式。而服务 PRO CODE 的 CLI 工具在某些场景下可能不够直观，所以需要可视化的辅助，但是有个底线是 代码是基础，可视化功能应该作为代码的辅助，你在可视化界面上的所有操作都将最终作用于代码 。

UMI UI 就是这个定位。

我们希望他能改变用户使用 UMI 的习惯，之前用户需要记很多命令，查很多文档，有了 UMI UI 之后，用户记住一个 UMI UI 就可以，进去之后，命令、配置、插件、数据、物料等等都有相应的可视化提示和文档指引。

优势

现在已有不少类似的竞品，比如 Vue CLI UI、iceworks@3 和 angular console，Umi UI 相对他们会有哪些可能的优势？

UMI 框架和生态

UMI 框架做了很多技术收敛，比如配置、命令、路由、构建工具等等，基于此，我们就可以在这些方面做 UI 可视化；另外是 UMI 的插件生态，已有的插件如有必要，都可以为他们的插件功能提供可视化能力。

插件机制

这是 Umi UI 的项目详情页，

• 左侧是一级菜单
• 右侧有标题、操作区、二级菜单和内容区
• 底下是状态栏
• 还会有更多。。。

有颜色的部分都是可以修改的（一期还只有 Panel 可以修改），你可以写个 UMI 插件扩展他。

比如加一个一级菜单，我们有提供 api.addPanel ，指定路径、标题、ICON 和右侧渲染的组件。

运行态交互

早就规划了，但时间原因一期没上。

简单说，就是我不希望用户需要进入单独的 UMI UI 控制台才能进行可视化操作，一些功能在代码的预览界面就应该可以做操作。

比如区块（物料）功能，用户进入到预览页面时，我们可以在想要的页面里的某个位置点击添加按钮，弹出区块选择，确认后下载区块，完成后会自动刷新页面。

再比如组件配置。

比如 antd 的按钮我们配置了可配置，点击后会弹出配置区域，配置后实时生效，保存后作用于代码。

原理

这是基本的架构图。

P 是插件。这里有两类插件，1 是客户端的插件，2 是服务端的插件。

左边是是 UMI UI，右边是通过 UMI DEV 启动的预览页面，两边是通过 CODE 通信的，即 UMI UI 里做修改，会作用于代码，代码变更后会触发 webpack 编译，然后作用于预览页面。

左边的 UMI UI 是一个类微前端的结构，但比通常的微前端更进一步，不仅仅路由可被扩展，前端页面里任何一部分都可挖坑，都可被插件扩展。

未来

这是脑暴的功能规划。

• 一期基本上是打基础，已发布，包括项目的创建、导致、进入项目之后的总览、配置和任务管理
• 二期会有一些进阶的功能，物料、数据、依赖管理等等都会开始做

欢迎大家试用，有任何问题和建议，可以在 issue 上反馈给我们。

参考

• Umi 官网
• Umi UI 介绍
• Umi UI 介绍（视频）
• Umi UI API 文档
• Umi UI 插件开发教程
• Umi UI 插件开发教程（视频）