共计 5574 个字符，预计需要花费 14 分钟才能阅读完成。
背景
目前低代码引擎在设计上是须要在独自的页面上应用的，他的扩大性能也都是实用于页面设计的。
然而大多数的场景中，咱们都不是只设计一个页面，咱们还有导航配置、依赖配置、低代码组件和逻辑编排等等利用级别须要的性能。
甚至咱们心愿在低代码搭建的过程中能有 VsCode 般丝滑的体验。疾速切换页面，疾速配置利用能力等等。而不是当初开发一个页面和一个低代码组件就须要关上至多三个新的标签页。如果开发的页面和组件更多，须要关上的标签页也就越多。
因而，在应用低代码平台时，我的浏览器经常就成为了这样的。
而当咱们须要在同一个设计器中，应用两种不同类型的设计形式时，只能通过 弹窗 + iframe 的形式，这样的形式体验上也很不敌对。
因而咱们须要提供利用级别的低代码引擎，用于低代码平台者开发出利用级别的低代码设计器。
利用级能力介绍
咱们这里提供的利用级能力是指，在一个设计器中即可实现低代码页面、低代码组件、利用级逻辑、利用级国际化配置等的编辑。甚至对于利用相干的配置也能够通过 Webview 的形式进行编辑，而不须要来回切换浏览器页面能力达到这样的成果。
为了实现这样的成果，咱们在低代码引擎原有的根底上新增了以下能力：
- 新增 workspace 模式，新增资源、视图的概念
- 新增利用级扩大区域
- 多层作用域开发模式
新增 workspace 模式
因为利用级别的设计器和页面级别的设计器在开发时略有不同，所以须要在设计器初始化时进行配置，是否开启利用级别设计器的模式。
开启这个模式之后，就须要注册“资源”和“资源视图”。
资源
其中，资源是指在利用级别的设计器中，须要一个独立的设计器环境来进行编辑、批改、查看等操作的一份文件，这份文件可能是某一个页面的 Schema、可能是某一个低代码组件的 Schema，也可能是一段 JS 逻辑的代码。
如图，咱们能够在利用级别的设计器中编辑所有注册的资源，而不必新开多个浏览器窗口。
资源类型
其中每个资源所需的设计器插件、物料、扩大的面板可能都是不一样的，也就是设计区域是不一样的。咱们依据资源所需的设计器资源将资源分为几种类型，这里咱们称为资源类型。
如图，在设计页面的时候，应用的资源都是一样的，这里所有页面的编辑都会应用页面的资源类型，而逻辑设计区域，能够看到左侧和左边是没有注册扩大区域的，这里就须要一个和页面不一样的资源类型，也就是逻辑资源类型。
这样，依据资源和资源类型，咱们就能够在一个设计器中编辑和设计不同类型的低代码相干的资源。
资源视图
在同一个资源中，能够依据要编辑形式的不同，可能须要应用不同的设计视图，因而咱们还定义了一个资源视图的概念，能够给同一个资源注册不同的视图，通过切换视图编辑同一个资源的不同的模块，来晋升整体的编辑体验。
新增利用级扩大区域
为了提供利用级别的设计器，咱们新增了一些扩大区域来帮忙大家在适合的将来提供利用级别的能力。
如图，在利用级别模式下，咱们分为利用扩大、资源扩大和视图扩大，其中每种级别扩大又提供了不同的扩大区域：
- 利用扩大：利用级别的扩大只会在最开始的时候初始化一次，不会因为资源 / 视图的切换而从新初始化。
- leftArea：这里用于展现利用级别能力的面板，例如：资源管理器，利用配置，分支治理等等。
- topArea：这里次要是用于展现利用级别的信息，例如：利用的名字和图标、利用的保留和预览、利用的国际化配置等等。
- subTopArea：这是和 topArea 相似的区域，这里次要是用于展现利用编辑时的辅助信息，也就是咱们的资源切换的标签栏等等。
- 资源扩大：资源级别的扩大，会在新开资源的时候随着资源的初始化一起初始化，相当于每一个资源都会对应一个资源级别的扩大区域，然而在资源视图切换的时候不会产生变动。
- topArea：这里是资源级别的顶部扩大区域，能够展现一些资源相干的信息。
- 视图扩大：视图扩大在每个视图初始化的时候，都会初始化本人的扩大区域。
- leftArea：视图的左侧扩大区域，个别会展现纲要树、组件列表等等视图所需的面板，默认会注册纲要树的面板。
- topArea：视图的顶部扩大区域，能够用户展现对应视图特有的能力。
- mainArea：视图的编辑区域
- rightArea：视图的右侧扩大区域，次要是提供设计过程中的组件配置能力。
大家可能会放心了，有那么多扩大区域，设计器的画布岂不会很小。为了解决这个问题，其中大部分扩大区域在没有注册的状况下，是不会展现的，也就是低代码平台的开发者能够自行抉择适宜本人平台的扩大区域，而不是应用所有的扩大区域。
多层作用域开发模式
下面提到的利用级别的扩大区域，分为了应用层、资源层、视图层。咱们在 API 的设计和应用上不能再连续之前的开发模式了。
在之前的开发模式下，咱们经常会应用如下的代码来注册面板，然而这样的代码没有方法辨别咱们的面板是注册在哪一层的。因而咱们须要在原来插件的开发模式下，依据插件注册的地位不同，将作用域分为几层。
import {skeleton} from "@alilc/lowcode-engine";
// 注册 logo 面板
skeleton.add({
area: "topArea",
type: "Widget",
name: "logo",
content: Logo, // Widget 组件实例
contentProps: { // Widget 插件 props
logo:
"https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png",
href: "/",
},
props: {
align: "left",
width: 100,
},
});因而咱们须要在插件的作用域中获取 skeleton 来进行面板的注册，而不是从全局，也就是从 @alilc/lowcode-engine 中获取 skeleton API。
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
function pluginDemo(ctx: IPublicModelPluginContext) {
const {skeleton,} = ctx;
return {init() {
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'pluginDemo',
props: {
align: 'left',
width: 800,
},
index: -1,
content: Content,
contentProps: {ctx,},
});
}
}
}
pluginDemo.pluginName = 'pluginDemo';这样，咱们在不同的层级进行插件注册，就能够应用不同层级的 skeleton 来注册对应的扩大区域了。
应用层
import {init, workspace} from '@alilc/lowcode-engine';
(async function main() {workspace.registerResourceType(pageResourceType);
await workspace.plugins.register(pluginDemo)
init(undefined, {enableWorkspaceMode: true,})
})()如图，在 workspace.plugins 下注册的插件，插件下获取的 skeleton 就是利用级别的 skeleton。
资源层
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
function pageResourceType(ctx: IPublicModelPluginContext) {
return {
category: '页面',
defaultViewType: 'page',
defaultTitle: window.pageConfig.title,
editorViews: [pageView],
icon: PageIcon,
async init() {await ctx.plugins.register(pluginDemo)
},
}
}
pageResourceType.resourceName = 'page';
pageResourceType.resourceType = 'editor';
export default pageResourceType;这样咱们 plugin 外面的 ctx.skeleton 获取到的就是资源层的 skeleton，能够向资源层注册扩大了。
视图层
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
export const pageView = (ctx: IPublicModelPluginContext, options: any) => {
return {async init() {
// 注册插件
await ctx.plugins.register(pluginDemo)
},
};
};
pageView.viewName = 'page';这样咱们 plugin 外面的 ctx.skeleton 获取到的就是视图层的 skeleton，能够向视图层注册扩大了。
此外，视图层内的 ctx 还能够获取到其余的 API，来进行视图层设计器区域的扩大，包含：material、project、simulatorHost、hotkey、setters、canvas 等等。
如何降级利用级设计器
开启低代码引擎的利用模式
import {init, workspace} from '@alilc/lowcode-engine';
(async function main() {
// ...
init(undefined, {enableWorkspaceMode: true,})
})()注册利用的资源类型和视图
开发页面视图
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
export const pageView = (ctx: IPublicModelPluginContext, options: any) => {
return {async init() {// 注册插件},
};
};
pageView.viewName = 'page';开发页面资源类型
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
function pageResourceType(ctx: IPublicModelPluginContext) {
return {
category: '页面',
defaultViewType: 'page',
defaultTitle: window.pageConfig.title,
editorViews: [pageView],
icon: PageIcon,
async init() {await ctx.plugins.register(pluginDemo)
},
}
}
pageResourceType.resourceName = 'page';
pageResourceType.resourceType = 'editor';
export default pageResourceType;注册页面资源类型
import {init, workspace} from '@alilc/lowcode-engine';
(async function main() {workspace.registerResourceType(pageResourceType);
init(undefined, {enableWorkspaceMode: true,})
})()注意事项
正如下面介绍的，咱们须要通过插件的 ctx 作用域来获取 API，而不是通过全局作用域来获取 API，否则在多视图 / 多资源的状况下，作用域可能会凌乱，导致 API 在非预期的视图下应用，呈现问题。
示例：在上面的 Plugin 中，应用的是全局的 skeleton API，假如 pluginDemo 在 A 视图中注入的，这也有可能会调用到 B 视图的 skeleton API，导致咱们的面板注册到非预期的视图中。
import {skeleton} from '@alilc/lowcode-engine';
import {IPublicModelPluginContext} from '@alilc/lowcode-types';
function pluginDemo(ctx: IPublicModelPluginContext) {
return {init() {setTimeout(() => {
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'pluginDemo',
props: {
align: 'left',
width: 800,
},
index: -1,
content: Content,
contentProps: {ctx,},
});
}, 2000)
}
}
}
pluginDemo.pluginName = 'pluginDemo';将来布局
利用级别的低代码平台落地
接下来咱们会在团体内应用利用级别的能力，降级已有的低代码平台，将其升级成利用级别的设计器，一直打磨咱们的低代码平台和低代码引擎的利用级别的能力，当然落地之后也会对外分享咱们的教训和教训。
提供利用级的精品插件
咱们也会开发更多的利用级别的精品插件，帮忙大家应用到利用级别的设计器能力。
利用级别的设计器性能优化
利用级别的设计器会领有更多的资源类型，更多的插件，也能够同时编辑多个设计区域，后续对于性能的损耗必定不低，咱们在实际的同时也须要一直打磨设计器的性能。
原文链接
本文为阿里云原创内容，未经容许不得转载。
