低代码--预研

什么是低代码

应用场景

    门户网站、营销活动页面等可标准化页面

核心能力

    可视化配置面板

    扩展能力：组件、模板、逻辑

    生命周期管理：开发、页面、部署

开发模式转变

    需求方提出需求（概念架构）--产品梳理逻辑画原型--ui设计--技术架构--业务开发--测试验证--上线（传统）

    需求方按需求配置页面--发布上线（低代码）

实现原理

    IDE

        物料堆

        画布

        配置面板

    JSON协议

        描述组件树及配置信息

    渲染还原

jsonSchema协议

    componentsTree：页面使用到的物料组件

    layout：布局及样式信息

    query：页面的url传递的参数

   

页面布局

    左侧：物料堆  中间：画布  右侧：配置面板  顶栏

实现分类

    实时编译

    预览与配置分离

功能设计

    顶栏

        账号的登录信息

        发布上线

    物料堆

        由n个原子组件构成（类似一套组件库）

        开放可配置（对配置面板开放）

        独立、职能单一（只负责自己的功能，不与其他组件直接通信交互）

        布局组件（负责组件的布局<flex,grid>，接收原子组件，等同vue中的slot）

        复合组件（负责组件间的关系划分与通信）

        通过高阶组件（为每一个原子组件添加统一能力，如激活状态下的样式或功能）

        页面跳转？

    画布

        根据JSON协议，使用渲染引擎完成页面绘制，至少需要完成如下三件事情:

            遍历解析JSON协议（深度优先遍历 or 广度优先遍历）

            组件依赖

            配置调度

    配置面板

        应当根据每个原子组件做配置，故渲染的具体内容应当是个性化的

        是否可以按照类型分类，多原子组件共用一类配置

        每个类型面板的子配置也可能被共用

---

https://github.com/woai3c/visual-drag-demo

https://github.com/sparrow-js/sparrow