秒杀支付宝云凤蝶，终极的移动端搭建系统多是这样的

我们先来看一个页面：页面地址。这个页面的搭建上线，我只花了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端作优化。

原文地址