ltaoo's web

可视化布局工具有价值吗？

发表于  |    |   分类于

可视化布局虽然已经发展很久，但一直没有出现被大量使用的平台或工具，而实际上这类需求确确实实存在，那么，这类可视化布局工具到底有没有价值呢？

我们先来做一个需求。假设现在需要开发一个应用，该应用用于信息录入，分为「客户信息录入页」、「商品信息录入页」、「活动创建页」、「申请培训页」等，每个页面需要用户填写信息。以「申请培训页」为例：

其他页面类似，区别只在于要填写的内容不同。

确认好每个字段的标题、字段名、校验项等等之后就可以开始编码了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<FormItem {...formItemLayout} label="培训时间">
{getFieldDecorator('range', {
  rules: [
    {
      required: true,
      message: '请选择起止日期',
    },
  ],
})(
  <RangePicker
    style={{ width: '100%' }}
    placeholder={['开始日期', '结束日期']}
  />,
)}
</FormItem>
<FormItem {...formItemLayout} label="培训类型">
{getFieldDecorator('trainType', {
  rules: [
    {
      required: true,
      message: '请输入培训类型',
    },
  ],
})(
  <Input placeholder="请输入培训类型" />
)}
</FormItem>
<FormItem {...formItemLayout} label="培训对象">
{getFieldDecorator('trainTarget', {
  rules: [
    {
      required: true,
      message: '请输入培训对象',
    },
  ],
})(
  <Input placeholder="请输入培训对象" />
)}
</FormItem>
<FormItem {...formItemLayout} label="培训师">
{getFieldDecorator('trainer')(
  <Input placeholder="请填写培训师" />,
)}
</FormItem>
<FormItem {...formItemLayout} label="对接人">
{getFieldDecorator('liaison')(
  <Input placeholder="请填写对接人" />,
)}
</FormItem>
<FormItem {...formItemLayout} label="培训需求">
{getFieldDecorator('requirement', {
  rules: [
    {
      required: true,
      message: '请输入培训需求',
    },
  ],
})(
  <TextArea
    style={{ minHeight: 32 }}
    placeholder="请输入培训需求"
    rows={4}
  />,
)}
</FormItem>

每个字段、甚至每个页面的代码都大同小异，如果是你，是不是已经意识到要做点什么来简化这一「无聊」的工作呢？

  • 写一个「基础」模板，复制多个并做调整
  • 命令行根据配置项生成代码
  • 图形界面通过拖拽生成代码

我更倾向于第三个，所以有了这篇讨论，《可视化布局工具有价值吗？》

什么是可视化布局

先来谈谈什么是可视化布局。

狭义的说，在图形界面，通过交互「堆叠」一些「区块」，即可得到对应的代码。

广义上来说，就是「所见即所得」。

如富文本编辑器，输入文本，调整样式即可生成html代码，该代码可以直接在网页中使用，复现在富文本编辑器中的样式。

而我们最经常使用的bootstrap与antd在某种程度上来说也是「可视化布局」。

bootstrap

对于bootstrap这个项目，有非常多值得谈论的话题，最突出的一点是没有前端基础也能够与jQuery搭配快速搭建中后台应用，深受后端开发的喜爱。

以一个分页来说，只要拷贝对应的代码即可实现指定的样式。
bootstrap pagination

antd

使用antd实现一个分页变得更为简单。
antd pagination

所以呢？

无论bootstrap还是antd，都是要实际写代码的，怎么能说是可视化呢？

但仔细思考，在静态页面的开发上，可以不写代码了，不写CSS代码，写的都是html或者组件代码。

而可视化布局的最终目标，不仅是不写样式代码，html或者组件代码也不用写。

上面提到，antd实现一个分页组件变得更加简单了，因为antd是比bootstrap更高一层的解决方案。

可能在这里用 react-bootstrap 替代 ant design 会更恰当些。

从开发的简单程度来说，可视化要比antd更高一层，是对antd这类组件库使用的简化。从这一点来说，可视化布局是有价值的。

为什么不使用可视化布局

说了这么多，但所谓的「可视化布局」也有很长一段时间的发展了，并没有像antd这类工具普及，是为什么呢？

抛开使用场景谈论一个东西好坏是没有意义的，就好像问antd有用吗，对于没有设计的项目来说，非常有用，而对于有设计的项目来说，价值并没有前者那么大。

可视化布局也是如此，在官网 or 活动页的开发中能起到的作用没有在中后台应用开发中的作用大。

虽然这么说，却也没有听说有成熟的方案能够让我们放心在中后台应用中使用，就好像使用antd一样。会有哪些可能的原因呢？

  • 无法满足需求
  • 上手难度大（整个工具太复杂）
  • 不好迭代（整个生命周期都在工具内管理、页面数据保存在数据库）

这些是我实际遇到的问题，使用过一个这类工具，能够在该工具内完成包括页面搭建到读取数据库的所有操作。经过一段时间的培训后，考试的题目是开发一个请假审批应用，需求如下：

员工可以在线填写请假申请，该申请会被发送到指定主管处审批，三天以内上级领导，超过三天部门领导。主管可选择通过或退回。被退回后员工需要编辑后重新提交。

emmm…

整体来说其实还好，在某些需求下能快速完成开发上线。却不是我想要的工具，怎么样才算一个好用的工具呢？

好用的可视化

首先它只是一个工具，是用来帮助我们简化一部分开发工作。

还是以bootstrap与antd为例，bootstrap通过复制一段代码与引入样式文件，可以快速实现一个美观的组件。在这个过程中，bootstrap的作用是帮助我完成了样式部分的代码，整个过程对于我而言是透明的，我可以随时任意的修改它。

antd相比bootstrap更方便，但也多了更多的限制。比如变得更为复杂，无法随意修改源码等。但它仍然帮助我们完成了将react 组件与ui库整合的工作，否则我们就需要自己写了。

所以理想的工具，是帮助我们完成页面搭建的开发工作，是如果没有这个工具，我们需要自己写的那部分工作。

首先它要可以生产代码，同时它也只需要生产代码。

也许有人会说生成的代码会不会难以维护，还要花时间去做删改，只要删改的时间小于从零开始开发的时间，它就是有价值的。

lego

基于我自己的需求，开发了这样一个简单的工具。从名字来说是希望页面的开发能像搭积木一样简单。

以最开始的「申请培训页」为例，制作了使用该工具实现的过程 gif。