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

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

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

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

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

Respo Composer 方案介绍

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

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