咱们先来看一个页面：页面地址。这个页面的搭建上线，我只花了5分钟。当然这是因为我不需要考虑任何设计和业务，只是想把功能展示给大家看，但我相信这应该能初步让大家看到我们系统的强大。如果要看线上页面可以看这里：619大促

需要注意，这个页面的每个TAB下面展示的内容是不同的，同时第一个TAB下面的分类切换之后展示的内容也是不同的，并且某个TAB或者分类下面可以有多个不同的内容。

作为对比，大家可以上支付宝的云凤蝶搭建系统试一下。我们可以明显发现，云凤蝶提供的功能是不可能搭建出这么复杂的页面的。当然这里举例云凤蝶不是因为他是行业最好的，而是因为我找到比较明确的是这个，而且我有个朋友在支付宝跟我说里面用得很多。另外支付宝毕竟技术环境行业领先（他们自己也是这么说的），所以相对还是有点代表性的。

这是我们的搭建系统的第一个亮点：内容可嵌套（或者叫组件嵌套）。这是我们系统设计之初就考虑进去的基础能力，这不仅仅需要在编辑的时候进行支持，同时在页面运行层面上也是必须在基础层就支持的。

搭建系统

迟早有一天，你看到的网页，可能并不是一帮叫做 前端开发工程师 写出来的，而是任何一个人都能随意创建的。---- by 萨姆胞弟

相信大家或多或少都用过一些页面搭建系统，古早的 Dreamware 也算是页面搭建的早一批实践者，不过他更偏向于UI设计，显然对于业务功能没什么支持。这也可以理解，放十年前很少能有前端工程师这一个职位的，大部分都是切图仔，切完图再让后端去填入模板，来进行页面访问的数据装填。

现年代的前端页面搭建显然跟那时候是不一样的，由于前端框架渐渐统一整个前端的开发标准，前端项目的开发模式也从以前的单个页面，到现在的类似于移动APP一样的单独项目体系。页面的渲染也基本不会经过后端服务，而是由前端在浏览器中计算并渲染。所以相较于叫 前端页面 我们更倾向于称为 前端应用。

技术的变迁往往就会带来产品形态的变化，基本上现在的互联网公司都秉承着快速迭代成长的宗旨，所以不管处于哪个阶段的互联网公司，只要有营销需求，都会希望有一个页面搭建系统，因为他可以帮我们解决很多的问题：

运营产品自行创建页面，高效
无需开发人员介入，节流
搭建者可以根据自己需求做，省去了沟通成本以及可能的误沟通导致最终产出不理想的问题

除去以上对于产出的提升外，因为搭建系统的组件相对统一稳定，也就省去了开发者在实现营销页面的过程中可能犯的一些低级错误（毕竟人永远是最大的变量）。

综上所述，搭建系统现在自然也是前端届一个比较有意思和能够深入的话题。

特色

说了这么多，我们的搭建系统又跟市面上的搭建系统又有什么不一样呢？在总结各种功能上的特点之前，我先来抛出一个概念的总结：

在设计之初，我们就不以功能为目的，而是建立在实现一个前端框架的特性上。

这句话怎么理解呢？我们的页面前端是在vue框架上进行构建的，那么vue作为一个框架，能够符合我们在前端开发中几乎所有的能力需求，是因为什么呢？我大致总结出几点：

组件化，通过props来抽象组件
组件之间嵌套实现内容拼接
通过 state => UI 的映射关系来完渲染和更新

因为对于大部分通用型的前端页面来说，页面就是各种元素的排列组合，加上一些样式的不同。而页面的主要更新，也是根据相关数据的更新来进行变化的，即便是事件的响应，很大程度上我们也可以视为事件改变了一个我们的state，然后再导致页面UI的变化。这也是目前前端主流的框架奉行的实践原则。

在这个基础上，只要我们搭建系统能准确得实现以上几个基础功能，那么甚至可以认为我们的搭建系统已经达到了和vue框架同级别的扩展能力。

当然你可以说，vue的核心是响应式啊，确实是这样，这是vue这个框架实现的核心技术。但是在以vue为基础搭建产品的过程中，我们并不会关心他的内部实现，而是更关心其暴露的API和能力，比如vue和react都有基于props来抽象组件的能力，我们认为这个能力是相似的，虽然他们内部的实现方式可谓天差地别。

在知道我们的搭建系统的核心理念之后，我们可以来讲讲我们的搭建系统到底有哪些特色功能：

组件的嵌套
组件间联动

而在这基础上，我们可以持有这些想象力：

通过基础组件拼接成一个新的组件，并让其他用户可配置使用
复杂的组件间交互联动，比如某个组件内某个按钮点击了之后隐藏另外一个组件

可以看到在编辑tab的表单的时候，我们可以选择每个tab下使用的内容，可以选择其他的组件。

不要小看这一点能力，一个基础的能力能给产品带来无限的想象力。

另外我们其实已经做到了组件之间进行联动的能力，只是在产品上还没有体现，原因是产品还没有找到很好的表达方式让用户来使用这个功能。简单来说就是运营童鞋无法理解什么叫组件间关联，同时产品也暂时想不出什么好的方式来降低学习成本，所以暂时未开放。但还是上面那句话，基础能力越多，产品的设计空间越大。

今天也就是来介绍一下这个产品，细节就不再详细讲了，我们的搭建系统的整体架构其实是非常复杂的，包括：

组件接入接口体系
组件版本，runtime版本以及页面版本维护方式
一个类似于npm的组件发布工具，并集成本地组件开发调试功能
组件如何维护其props并在编辑的时候根据组件特性生成表单
如何访问每个页面
...等等等一系列为了提高可用性和效率的功能

这些以后会在慢慢分享，同时在开发期间实现了一套通过json-schema生成表单的工具，也即将开源，尽情期待。

最后最近还开发了一个预渲染的功能，进一步提升了首评体验，减少了load js文件过程中的白屏时间，页面体验上升了不止一个档次。链接放在下面，大家可以自行体验：

推荐在手机端查看，毕竟没有对PC端做优化。

原文地址