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.

Sign up for GitHub

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

Jump to bottom

Hello! Umi UI #86

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

Hello! Umi UI #86

sorrycc opened this issue Sep 2, 2019 · 83 comments
Labels
UmiJS

Comments

@sorrycc
Copy link
Owner

sorrycc commented Sep 2, 2019 •
edited

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
@stechrayo
Copy link

占座

@qiuziGirl
Copy link

占座2

@bougieL
Copy link

bougieL commented Sep 2, 2019

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

@lifegit
Copy link

lifegit commented Sep 2, 2019

期待

@Leskur
Copy link

Leskur commented Sep 2, 2019

666

1 similar comment
@Ihavedreams
Copy link

666

@laozhu
Copy link

laozhu commented Sep 2, 2019

喜大普奔 🏃‍♀️🏃

@JoMartinezZhu
Copy link

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

@jeffrey-fu
Copy link

666

@EternalShallow
Copy link

厉害厉害

@yyqxjwxy
Copy link

yyqxjwxy commented Sep 2, 2019

666

@Gzbox
Copy link

Gzbox commented Sep 2, 2019

666666

@769062159
Copy link

恭喜恭喜

@liuchuzhang
Copy link

liuchuzhang commented Sep 2, 2019 •
edited

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

@laninblue
Copy link

期待

@zy-zero
Copy link

zy-zero commented Sep 2, 2019

优秀

@lanweifeng
Copy link

支持！！！

@ISBN9527
Copy link

ISBN9527 commented Sep 2, 2019

赞👍

@pyy-s
Copy link

pyy-s commented Sep 2, 2019

赞

@SunShaoze
Copy link

666

@kimmerchen
Copy link

优秀，JeckChan 占坑

@estrayn
Copy link

estrayn commented Sep 2, 2019

赞

@chokingwin
Copy link

666

@singone
Copy link

singone commented Sep 2, 2019

持续关注

@wangjingithub
Copy link

占座，支持

@AieraFlyyyy
Copy link

前排

@gouding
Copy link

gouding commented Sep 2, 2019

[赞] 支持

@YufJi
Copy link

YufJi commented Sep 2, 2019

👍

@afc163
Copy link

afc163 commented Sep 2, 2019 •
edited

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

@yazhengwang
Copy link

赞👍，去体验下去

@benmo1602
Copy link

围观

@dengnan123
Copy link

超赞

@DuduStyle
Copy link

good

@jianglin-wu
Copy link

前端进一步简单化了

@zero-fei
Copy link

zero-fei commented Sep 2, 2019

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

@jaywcjlove
Copy link

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

@crossjs
Copy link

crossjs commented Sep 2, 2019 •
edited

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

@zlyyyy
Copy link

zlyyyy commented Sep 2, 2019

9999

@ghost
Copy link

ghost commented Sep 2, 2019

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

@sorrycc
Copy link
Owner Author

sorrycc commented Sep 3, 2019

@ruizhengyun iPad 上的 WhiteBoard。

@codeXian
Copy link

codeXian commented Sep 3, 2019

666

@azl397985856
Copy link

图话的不错哦

@lghxuelang
Copy link

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

@OPY-bbt
Copy link

OPY-bbt commented Sep 4, 2019

🎉🎉🎉🎉🎉🎉

@czjxy881
Copy link

czjxy881 commented Sep 4, 2019

666

1 similar comment
@nickrogit
Copy link

666

@zhouyi318
Copy link

66666666

@Yunin Yunin mentioned this issue Sep 6, 2019
Closed
@simdd
Copy link

simdd commented Sep 9, 2019 •
edited

这是脑暴的功能规划。

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

错别字：导致 应为 导入

@sorrycc

@sorrycc
Copy link
Owner Author

sorrycc commented Sep 9, 2019

@simdd Fixed.

@johanazhu
Copy link

围观

@iiuhuy
Copy link

iiuhuy commented Sep 12, 2019

🎉🎉🎉🎉🎉🎉

@pokect
Copy link

pokect commented Sep 17, 2019

占座

@Wmstone
Copy link

Wmstone commented Sep 18, 2019

来晚了

@candywxt
Copy link

棒

@cklwblove
Copy link

👍👍👍👍👍👍👍👍

@sorrycc sorrycc mentioned this issue Oct 10, 2019
Open
@zsl1549
Copy link

zsl1549 commented Oct 10, 2019

棒棒达

@xerxh
Copy link

xerxh commented Nov 3, 2019

赞 学习 一波

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
UmiJS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests