Giters

sorrycc / blog

💡

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hello! Umi UI

sorrycc opened this issue · comments

commented

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

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

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

先看视频介绍。

介绍 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 上反馈给我们。

参考

commented

占座

commented

占座2

commented

昨天体验 beta 版了，挺好用的

commented

期待

commented

666

commented

666

commented

喜大普奔 🏃‍♀️🏃

commented

占位，准备自己开发公司的UI

commented

666

commented

厉害厉害

commented

666666

commented

恭喜恭喜

commented

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

commented

期待

commented

优秀

commented

支持！！！

commented

赞👍

commented

赞

commented

666

commented

优秀，JeckChan 占坑

commented

赞

commented

666

commented

持续关注

commented

占座，支持

commented

前排

commented

[赞] 支持

commented

👍

commented

一期的功能还比较简单（只有配置和任务），我们着重于基础设施的搭建，希望和社区一起通过 这些 API 把更多可视化辅助编程（VAP：visual assist programming）的想法在 Umi UI 上落地。

commented

炸了 ？

commented

赞

commented

占座，支持一个**，抵制反华势力

commented

哈哈哈

commented

🎉🎉🎉🎉🎉🎉🎉

commented

666

commented

帮助大家提高开发效率！

commented

perfect

commented

这几天正在搞这个东西，没想到又被大佬给干了，算了，一个人搞不过一堆人，膜拜。

commented

gkd，lets use it！

commented

这几天正在搞这个东西，没想到又被大佬给干了，算了，一个人搞不过一堆人，膜拜。

umi 只有大佬一个人在做。
上面是错误信息

🤦‍♂️ 弄错了。

commented

Mark

commented

赞！！

commented

厉害啊

commented

赞 +1

commented

真快～

commented

@DiamondYuan 三个人维护， 还有 @ikobe 和 @ycjcl868 。

commented

🐂🍺！

commented

Congratulations!

commented

前排

commented

很棒！先研究下怎么玩

commented

🎉🎉🎉🎉🎉🎉🎉

commented

也是在前两周，在内部开发了一个类似的工具；可以生成符合内部规范的代码工具，由于我主要负责后台管理系统这一块，就先开发列表及表单的页面的生成，填写配置文件文件后，命令行执行工具命令即可生成，生成后的面直接使用基本不需要修改，还是提升很高开发效率。

commented

66666666

commented

@genmmao 能说下是怎么弄的么

commented

后排围观

commented

赞👍，去体验下去

commented

围观

commented

超赞

commented

good

commented

前端进一步简单化了

commented

之前开发公司的UI框架，很多**来源于大佬们

commented

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

commented

你们这些赞的，占座的，有意思么？没有建设性。要赞的话点表情

commented

9999

commented

这个画图挺好的，什么软件, cc?

commented

@ruizhengyun iPad 上的 WhiteBoard。

commented

666

commented

图话的不错哦

commented

图生动形象，效率高、示意性强

commented

🎉🎉🎉🎉🎉🎉

commented

666

commented

666

commented

66666666

commented

这是脑暴的功能规划。

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

错别字：导致 应为 导入

@sorrycc

commented

围观

commented

🎉🎉🎉🎉🎉🎉

commented

占座

commented

来晚了

commented

棒

commented

👍👍👍👍👍👍👍👍

commented

棒棒达

commented

赞 学习 一波