建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

刚刚也提到了刚刚接触到Sifo的时候我以为他是一个low code的解决方案，但是这个表述并不准确，先来看下另外一款类似能力的解决方案，也就是百度的amis，这款解决方案的话他的着眼点就完全在于low code，旨在全部通过JSON配置的方式快速低成本的搭建出前端页面。而Sif…

笔者之前花了大量的时间在思考如何设计和实现H5页面可视化编辑器H5-Dooring，从第一个版本到现在经历了很多次版本迭代和优化，也收到了很多宝贵的建议，目前刚好完成了移动端数据可视化的基本设计和落地方案，在这里特地总结和复盘一下。 在开始正式实现之前笔者先对H5数据可视化做一…

此项目是基于公司内部一个开发工具重新整理并开源的。 目前功能还不是特别完善，但是基本的渲染引擎可以正常工作。 内部在上线此工具之前我们的工作方式比较原始，当有新需求过来，就基于统一的项目模板进行开发，已有组件如果满足需求，将代码 Copy 到新页面进行开发。 即使两个页面有 9…

可视化搭建的项目要求元素可以像做图软件一样随意的拖动改变大小那怎么实现这个功能呢？先来一个简单的版本吧？基础js事件mouseDown:鼠标的键钮被按下mousemove:鼠标在目标的上方移动mous

阿里巴巴集团前端委员会主席 @圆心 对前端未来期许有四点：搭建服务， Serverless，智能化，IDE。仔细想想，一个「可视化搭建系统」的想象空间，正能完美命中这些方面。前端的边界在哪里，对于业务的价值又在哪里，我们不妨静下来，一起从「可视化搭建系统」的角度来思考。 —— …

编辑器的实现思路是：编辑器生成页面 JSON 数据，服务端负责存取 JSON 数据，并生成对应的模版文件 .jsx ，渲染时从服务端取数据 JSON 交给前端模板 .jsx 处理。

页面可视化搭建, 是一个历久弥新的话题. 更广义上讲, 页面是 GUI 的一部分, GUI 的拖拉生成在各种开发工具上很常见, 如 Android Studio, Xcode, Visual Studio 等. 前端页面早在十几年前就能用 Dreamweaver, Frontp…