多端低代码编辑器设想

源页面：

• https://www.notion.so/dc845f9122f74437a04bf7aa712b0ffe

导入说明：

• 页面末尾存在 Notion 数据库引用，已跳过。

#整体设想

#产品设想

• 多端应用编辑器
• 多端物料编辑器
• 物料市场

#相关设计

#特点

• 产品名称待定？？？
• 一码多端渲染（H5、小程序、APP），不强求跨框架实现（能实现最好），跨端是该编辑器的核心
• 编辑器端直接允许编写组件代码（组件编辑器）（UI 与 DSL 互转，并可以导出源码（但没必要）+运行时）
• 为每个端都提供运行时（页面运行时、应用运行时），支持导出 html、js 子集数据，允许运行时嵌入到其他应用中
• 拥抱 Nodejs 生态（允许引入 npm 包）
• 编辑器要允许插件拓展
• 沙箱隔离（只做最基础的就好）
• 统一的埋点设计
• 国际化
• 页面切换、路由管理
• 应用级别回调注入
• 编辑器允许封装成离线 app
• 完善的真机调试机制+热重载机制
• 多尺寸支持，大屏展示
• 编辑器渲染定制化，并且支持统一渲染(例如 Canvas，SVG，WebGL)
• 多人协作
• 整理出对外文档，包括需求迭代看板
• 设置器
• 分为应用编辑器与组件编辑器，应用编辑器不可以对组件内的元素进行编辑，组件可以由其他元素编辑而成，定义入参并编写代码，类似 React 组件
• 组件的属性变动用 mobx 进行管理
• 不需要数据源绑定功能，直接编写代码，可以在上层封装类似 Redux 的功能
• 模板主题切换
• ProCode 与 LowCode 结合，面向开发提效

#UI 设计

• 主要样式衍生自小程序编辑器，部分逻辑有微调
• UI 交互逻辑参考 unity
• 文档建设使用 Docusaurus

#技术设计

• 低代码核心多包管理
• 编辑器端插件化设计，并且支持多模式切换，参阿里低代码引擎多包方案
• 渲染引擎端偏运行时，H5 端渲染待定（有可能自研）、APP 端渲染使用 Kraken、小程序端基于 Taro 自研
• 文档使用开源工具 Docusaurus
• 渲染引擎原理（Native 端使用过 flutter_js，web 端使用 js interpreter）
• 注意 web 端不能使用 eval 或者 new Function，这样的话就不支持连续的执行了，在严格模式下每次 eval 都是新的作用域，通过 function bind 与 with 绕过也解决不了

function scopeEval(scope, script) {
  return Function(`
    with(this) {
      "use strict";
      return (${script})
    }
  `).bind(scope)();
}

scopeEval({ a: 1 }, "console.log(a)");
scopeEval({ a: 1 }, "a++");
scopeEval({ a: 1 }, "console.log(a)");

• 有些 js interpreter 没有封装该功能，quickjs-eval、wasm-eval 不行

var wasmJseval = require("wasm-jseval");
wasmJseval.quickjsEval.getInstance().then(({ eval, newFunction }) => {
  console.log(eval("a = 1;"));
  console.log(eval("a++;"));
});

• 有些 js interpreter 有这个功能，例如 quickjs-emscripten 可以