vue 图形化设计工具_前端框架的图形化探索方向一个尝试, Respo Composer

最新推荐文章于 2024-08-05 11:19:40 发布

覃含章

最新推荐文章于 2024-08-05 11:19:40 发布

阅读量839

点赞数

文章标签： vue 图形化设计工具

本文链接：https://blog.csdn.net/weixin_35322457/article/details/112375403

版权

本文介绍了Respo Composer，一个用于构建Todolist界面的图形化工具，旨在提升前端界面开发效率。通过DOM树编辑、组件化、Mock数据和Action支持，实现界面的快速构建和预览。虽然当前功能有限，但展示了前端图形化设计的潜力和可能性。

摘要由CSDN通过智能技术生成

之前参加活动的时候想起一个问题, 怎么样才能让设计做出的稿子能更多被前端复用. 特别是在代码方面. 应该说设计工具已经包含了前端界面的大量信息, 编写代码包含相当多的重复劳动的. 但这是一个问题.

包括 React Vue 这些年逐步演进, 最初 React 的 Virtual DOM 能够在 Virtual DOM 的基础上通过热替换大幅提升前端的开发效率, 以及 ClojureScript 工具链进一步优化了热替换的使用体验, 给开发的效率带来提升. 现在, React Vue 本身讲更多的精力投入到性能的优化还有逻辑复用的问题上.

我想问的问题是, 界面和交互的开发效率怎样进一步提升?

提出这个问题同时也意味着另外的问题会暂时被搁置, 比如说框架的代码执行效率和最终体积, 比如说代码的复用和维护性. 对于大公司来说可以用钱弱化的一些问题. 而我的问题侧重点是, 如果界面和交互的规模不是很大, 维护周期也不长的话, 为了提升开发效率, 我们能作出怎样的改进?

Respo Composer 方案介绍

题图当中是我在春节前后进行的尝试, 开发了一个 Respo Composer App, 用来图形化建构 Todolist 的界面. 这个工具的功能非常局限, 但是完整展示了我最初的意图:

有个 DOM 树的编辑工具, 可以设置页面的布局和节点的样式.
工具将 DOM 节点组件化做编辑, 并且提供一些内置的组件, 方便快速编写.
有基本的插入 Mock 数据的方式, 界面能够根据 Mock 数据通过逻辑节点渲染不同的样式.
节点当中支持 Action, 渲染函数能够收集 Action, 可以外部响应 Action 修改数据, 数据再传入函数渲染新版的界面.

基础的界面基于 DOM 树的形态. 对于前端来说不陌生, 对于设计师来说可能不够优化. 最左边的是组件列表,实际上应该是说模板. 中间是树, 右边是选中节点的属性(类型, 布局, 样式..等等).

每个节点实际上对应着一个数据结构. 这些基本上都应该说是模板引擎的范畴. 同时, 也提供了预览区域, 编辑组件的同时, 能看到渲染的效果, 比如上面的 task 渲染出来之后, 是一个简化的任务, 包含卡片, 文字, 图标这些元素:

关于具体的操作, 我简单录制了过相关的视频, 因为没有裁剪所以内容略长,

Composer Todolist 开发版本 Demo (12分钟)v-wb.youku.com

这个界面修改之后会保存一份 EDN 格式的一份文件, 相当于 Clojure 的 JSON, 这份数据可以被用在后续的代码操作当中,

https://github.com/Erigeron/composer-todolist/blob/master/src/composed/composer.edngithub.com

关于操作, 我也录制过视频, 大致介绍了步骤,

Composr Todolist 交互部分初步演示(12分钟)v-wb.youku.com

更连贯一些的一个基础的 Todolist 添加任务的功能, 通过 Composer 可以实现, 完整的操作有个比较长的录屏做了演示:

Respo Composer 使用演示 (31分钟)v.youku.com

前面的操作, 加上 Respo 生态提供的工具链, 最终可以生成一个 Todolist 出来. 虽然功能上是有残缺的, 不过我觉得足够表明这个方案的可行性了.

Todolistrepo.erigeron.org

Respo Composer 实现原理

上面的 Demo 托管在 GitHub 上, 有兴趣的话可以尝试, 私有的一些工具比较多, 不容易上手, 不过按照 README 运行应该不难把 Composer 界面打开,

Erigeron/composer-todolistgithub.com

基础工具的 Respo 还有 Composer 的代码, 可以在 Respo 的 GitHub 主页找到. 目前 Composer 支持的节点有限, 首先每一个节点都用这样数据结构表示出来:

{
  :id "r", :type :button, :layout nil
  :props {"text" "Archive", "action" "~:archive"}
  :attrs {}
  :presets #{}
  :style {}
  :children {}
 }

这些属性跟 DOM 自带的属性有不小的差异,

type - 节点的类型, 包含下面一些组件.
props - 节点支持的属性, 每个类型的节点有各自的属性:

Type       props              Action
----

box                           action, data
space      width, height
divider    kind, color
text       value
some       value, kind
button     text               action, data
link       text, href         action, data
icon       name               action, data
template   name, data
list       value
input      value, textarea    action, data
slot       dom
inspect    title
popup      visible
case       value(?)
element    name