可视化报表生成器案例综述：02 bootstrap界面拖放生成器

本节重点介绍一些在线拖拽式的代码生成器，其功能特点上与在线互动可视化报表生成器有关。

bootstrap界面拖放生成器

bootstrap是目前最受欢迎的web前端开源框架，由twitter推出，其中包含html、css、javascript代码， 提供了一系列设计网页的简单标准和一套开发组件。Bootstrap 已经使响应式网站开发变得简单很多，没错我现在所有的项目都使用了bootstrap或者基于bootstrap二次开发的模版。使用bootstrap的时候，我通常是使用webstorm或者sublime直接复制代码后再进行编辑，不过在制作页面原型的时候，可以不用这么麻烦。那就是使用bootstrap界面拖放式生成器。

一直以来人们都想把网页制作尽可能的简化，最好能简化成windows画图程序那样简单。当年Dreamweaver和近年来出现的Adobe Muse都提供拖拽控件生成网页的方式。但是网页说到底还是个程序，而程序是要讲究逻辑关系和数据结构的，使用拖拽式生成器生成的代码总是包含大量的无用代码和隐含bug，所以实用的网页终究还是得靠程序员阅读和书写。不过，bootstrap界面拖放生成器由于限定了网页开发标准和开发组件的类型，从而降低了复杂度，令其生成的代码更有效——当然最后达到使用阶段还是离不开程序员的检查和加工。

bootstrap界面拖放生成器，是一种通过可视化界面快速生成基于bootstrap的前端代码的工具。 Bootstrap 编辑器和生成器使得画界面原型、测试、搭建响应式网站变得简单。 尽管每一个编辑器都不同，但是它们都利用Bootstrap 庞大的组件库实现了拖入和移除组件功能。市面上这类工具不止一个，但是功能近似。以下主要从技术实现角度进行说明。

1.layoutit

LayoutIt! 自称是bootstrap可视化布局系统。利用Bootstrap的元素组件，使用者不需要深入掌握javascript，html5或css3就能轻松地生成原型。该项目由是由Jonathan Katz, Martin Capeletto, Hernan Berroja Albiz组成的团队运营，代码不开源，但是可以免费使用。

它的可视化布局器如上图所示。有点像wordpress主题设置页面。首先选择布局设置，确定好基本布局后，把想要的各种组件放到已有的布局中去即可，已经拖入的组件还可以做二次编辑。整个流程清晰易懂，界面美观，操作简单方便，完全不需要培训就能轻松上手，同时支持移动端浏览，使用平板电脑都可以操作。

从前端组件上来讲这个可视化布局系统并不复杂，经过我对其前端源码分析，该系统主要是基于jquery来实现的整个效果。其中jquery-ui来实现驮拖拽功能，jquery-ui.touch-punch来实现移动端效果，ckeditor来做文本编辑器，jquery.htmlclean来做html代码过滤， 使用HTML5的本地存储来做已编辑内容的数据缓存，当然还有使用bootstrap本身的栅格系统和其他组件。

不过，就算拥有以上所有前段组件，想从0开始做一个类似的可视化布局系统并不轻松。主要难题在于，可视化布局系统上显示的组件与最终输出的代码成品并不是同一对象，实际上它们是有对应关系的代码块。所以后台必须要将这些组件的对应关系细致地区分出来，并按用户的输入顺序对代码块进行标记（好做undo和redo）。

2.bootply

bootply自称是bootstrap Editor and Builder. 该编辑器可以让你拖拽Bootstrap组件并可以编辑你自己的代码。Bootply 同时也整合了其他流行的Bootstrap插件，微型代码库和框架，例如Font Awesome, jQuery + jQuery UI, Bootstrap Select, FuelUX, AngularJS, Google Maps 等等。 价格：免费 / 每个月$4可下载源代码。

上图是bootply的web端操作界面。可以明显看到bootply与LayoutIt不同，bootply更复杂，包含更多的代码编辑部分，可以说好像。它反映了另一种思路：直接在web页面进行coding，而不是仅仅做页面原型生成的工作。然而，从实现效果上来看，bootply明显有些差强人意。首先它的可视化编辑器明显不如LayoutIt好用，拖拽对象不可灵活编辑和再次选中，拖拽容器标识不清楚，拖拽一圈后代码乱的要命，最后一切还得在它的代码编辑区域里仔细coding才能保证代码可用性（大家可以去bootply playground试试就知道了）。我个人的使用体会是，这是一个web端的包含大量库和组件的Dreamweaver。对于不会编程的人来说这东西太复杂太难上手，对于熟练程序员他们会用自己擅长的IDE而不会用它。个人认为，编程终究还是件较为复杂的事，要么做一个足够精致的IDE例如webstrom来编辑代码，要么只做一个在线编辑demo的社区例如jsfiddle、runjs，要么专精一点做一个简单不需要编程的大众化编辑器，像bootply这种功能上可被替代性太强的在线IDE模式我并不太看好。

最后说一下它的技术实现：还是基于jquery和jquery ui来做的主题部分，但是由于包含大量对其他类库的接口所以有更为复杂。除此以外还包含一套基于codemirror.js和jsbeautifier的代码编辑器。后端应该是php，我没有细究。最后，由于bootply大量代码是使用ajax.googlesapis.com上的托管代码，而google经常被墙，所以打开bootply时记得翻墙。

3.brix.io

brix在其官网上自称是最好用的bootstrap在线编辑器。我实际用了一下感觉此言非虚。

首先，brix不像bootply一样要做一个coding为主的在线IDE，它把重点放在了可视化布局和快捷生成页面原型上，跟LayoutIt较为接近，这点我非常喜欢。同时，它的可视化布局系统比LayoutIt强大很多，我以为突出优点有如下几条：

• 整体界面更加美观，bootstrap3.0风格的基础上，处处透露着现代气息。
• 菜单设计更合理，所有组件都有图表标识，实践证明这样用户选择组件的效率会大大提升；
• 拖拽容器在显示上更简洁，同时易用性依旧有保证。令编辑页面的效果与页面实际效果更接近。
• 绝大多数操作都可以用组件拖拽和组件属性编辑来完成，但同时也允许用户小范围地给组件添加code，从而在保证稳定性的同时提升了一定的灵活性。
• brix.io是以project为单位的，每个project可以包含若干个页面。令其一次可以制作多个页面并导出，更接近实际开发。
• 众所周知基于bootstrap人们也开发了很多风格各异的样式，brix.io就整合了众多可选的整体设计风格，你可以直接使用它们令自己制作的页面原型与众不同。当然也可以外链style.
• 最后，如同当今大多数web2.0的webApp一样，brix有着自己的社区，提供大量模板可供选用，同时允许用户之间的协同办公和资源分享。

如果拿画图软件做类比的话，我个人感觉LayoutIt有点像简洁明了的SAI，bootply有点像笔刷强大但是复杂难用的painter，brix有点像可深可浅能力超强的photoshop.

在前端技术上brix.io并没有很特殊，还是那几个类库，但是细节做得很完善。

值得一提的是该网站中使用了mixpanel2.2.min.js，一个mixpanel公司开发的用于追踪用户点击了哪些按钮的用户行为分析API。看来brix.io很关注它的用户是怎么使用自己的服务的。

最后，brix收费较为昂贵，每个月$14.99到$49.99。免费版只能试用14天。