Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hello! Umi UI #86

Open
sorrycc opened this issue Sep 2, 2019 · 81 comments

Comments

@sorrycc
Copy link
Owner

commented Sep 2, 2019

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

参考

@sorrycc sorrycc added the UmiJS label Sep 2, 2019

@stelalae

This comment has been minimized.

Copy link

commented Sep 2, 2019

占座

@QiuZi619

This comment has been minimized.

Copy link

commented Sep 2, 2019

占座2

@bougieL

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@lifegit

This comment has been minimized.

Copy link

commented Sep 2, 2019

期待

@Leskur

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

1 similar comment
@Ihavedreams

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

@laozhu

This comment has been minimized.

Copy link

commented Sep 2, 2019

喜大普奔 🏃‍♀️🏃

@JoMartinezZhu

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@jeffrey-fu

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

@EternalShallow

This comment has been minimized.

Copy link

commented Sep 2, 2019

厉害厉害

@yyqxjwxy

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

@Gzbox

This comment has been minimized.

Copy link

commented Sep 2, 2019

666666

@769062159

This comment has been minimized.

Copy link

commented Sep 2, 2019

恭喜恭喜

@liuchuzhang

This comment has been minimized.

Copy link

commented Sep 2, 2019

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

@laninblue

This comment has been minimized.

Copy link

commented Sep 2, 2019

期待

@zy-zero

This comment has been minimized.

Copy link

commented Sep 2, 2019

优秀

@lanweifeng

This comment has been minimized.

Copy link

commented Sep 2, 2019

支持!!!

@ISBN9527

This comment has been minimized.

Copy link

commented Sep 2, 2019

👍

@Py-js

This comment has been minimized.

Copy link

commented Sep 2, 2019

@wanderingCoderX

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

@kimmerchen

This comment has been minimized.

Copy link

commented Sep 2, 2019

优秀,JeckChan 占坑

@estrayn

This comment has been minimized.

Copy link

commented Sep 2, 2019

@chokingwin

This comment has been minimized.

Copy link

commented Sep 2, 2019

666

@singone

This comment has been minimized.

Copy link

commented Sep 2, 2019

持续关注

@wangjingithub

This comment has been minimized.

Copy link

commented Sep 2, 2019

占座,支持

@AieraFlyyyy

This comment has been minimized.

Copy link

commented Sep 2, 2019

前排

@gouding

This comment has been minimized.

Copy link

commented Sep 2, 2019

[赞] 支持

@YufJi

This comment has been minimized.

Copy link

commented Sep 2, 2019

👍

@afc163

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@wubaiqing

This comment has been minimized.

Copy link

commented Sep 2, 2019

66666666

@leitongda

This comment has been minimized.

Copy link

commented Sep 2, 2019

@genmmao 能说下是怎么弄的么

@SMbey0nd

This comment has been minimized.

Copy link

commented Sep 2, 2019

后排围观

@yazhengwang

This comment has been minimized.

Copy link

commented Sep 2, 2019

👍,去体验下去

@benmo1602

This comment has been minimized.

Copy link

commented Sep 2, 2019

围观

@dengnan123

This comment has been minimized.

Copy link

commented Sep 2, 2019

超赞

@DuduStyle

This comment has been minimized.

Copy link

commented Sep 2, 2019

good

@jianglin-wu

This comment has been minimized.

Copy link

commented Sep 2, 2019

前端进一步简单化了

@longfeixueyi

This comment has been minimized.

Copy link

commented Sep 2, 2019

之前开发公司的UI框架,很多思想来源于大佬们

@jaywcjlove

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@crossjs

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@zlyyyy

This comment has been minimized.

Copy link

commented Sep 2, 2019

9999

@ruizhengyun

This comment has been minimized.

Copy link

commented Sep 2, 2019

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

@sorrycc

This comment has been minimized.

Copy link
Owner Author

commented Sep 3, 2019

@ruizhengyun iPad 上的 WhiteBoard

@codeXian

This comment has been minimized.

Copy link

commented Sep 3, 2019

666

@azl397985856

This comment has been minimized.

Copy link

commented Sep 3, 2019

图话的不错哦

@lghxuelang

This comment has been minimized.

Copy link

commented Sep 3, 2019

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

@OPY-bbt

This comment has been minimized.

Copy link

commented Sep 4, 2019

🎉🎉🎉🎉🎉🎉

@czjxy881

This comment has been minimized.

Copy link

commented Sep 4, 2019

666

1 similar comment
@nickrogit

This comment has been minimized.

Copy link

commented Sep 5, 2019

666

@zhouyi318

This comment has been minimized.

Copy link

commented Sep 5, 2019

66666666

@Yunin Yunin referenced this issue Sep 6, 2019
@simdd

This comment has been minimized.

Copy link

commented Sep 9, 2019

这是脑暴的功能规划。

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

错别字:导致 应为 导入

@sorrycc

@sorrycc

This comment has been minimized.

Copy link
Owner Author

commented Sep 9, 2019

@simdd Fixed.

@johanazhu

This comment has been minimized.

Copy link

commented Sep 9, 2019

围观

@AlvinMi

This comment has been minimized.

Copy link

commented Sep 12, 2019

🎉🎉🎉🎉🎉🎉

@pokect

This comment has been minimized.

Copy link

commented Sep 17, 2019

占座

@Wmstone

This comment has been minimized.

Copy link

commented Sep 18, 2019

来晚了

@candywxt

This comment has been minimized.

Copy link

commented Sep 20, 2019

@cklwblove

This comment has been minimized.

Copy link

commented Sep 22, 2019

👍👍👍👍👍👍👍👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.