飞冰对于活动引擎的可借鉴之处
开门见山：飞冰相对活动引擎值得学习的点
物料市场的概念以及设计思路
飞冰编辑器采用组件截图作用实际拖拽单位，而不是像活动引擎采用实际React代码，这样做其实有利于未来物料市场的设计。
微前端架构对于活动引擎的意义
飞冰特点
飞冰的目的：通过海量可复用物料，搭配 GUI 工具极速构建前端应用。让前端工程师专注页面背后的业务逻辑部分。
面向人群：前端开发工程师
抽象功能点：1.使用 GUI 的方式来管理 webpack，将繁琐的 webpack 配置细节友好化
2.使用 GUI 快速通过拖拽的方式来构建页面
3.集中化管理 组件市场（物料/区块/组件市场），用 GUI 的方式管理组件，同时生成文档，和组件快照 并且将功能相同但风格场景不同的组件归类化，可以在组件市场快速检索
4.将 Router 和 Store 标准化，各个组件互相之间松耦合，与编辑引擎只有接口耦合
飞冰原理解析
飞冰编辑引擎编辑器核心原理
区块部分使用组件模块的截图，而不是实时渲染，在编辑区域下的组件。每一个编辑模块是一个 SelectedBlock 对象，这个对象除了可编辑，可拖拽之外。它还包括组件的元信息。
所以在编辑器状态下操作的是组件的截图。只可以控制它摆放的位置。不能像cube活动引擎一样，可以在线编辑组件内容（如按钮文案,跳转地址）。下面当我们创建完一个页面时，UI前端会发送 socket 到后端来创建如下页面，代码逻辑如下：
public async create(page: ICreatePageParam, ctx: IContext): Promise<any> {
// 下载页面中的所有组件代码和依赖项
try {
await this.downloadBlocksToPage(blocks, name, ctx);
await this.installBlocksDependencies(blocks, ctx);
} catch (error) {
logger.error('addBlocks got error!');
}
// 加载模板，将组件都放入模板中，并编译
const template = await loadTemplate(this.templateFileName, this.templateFilePath);
const fileContent = template.compile({
blocks
});
const dist = path.join(pageDir, fileName);
// 美化代码
const rendered = prettier.format(
fileContent
);
// 讲代码进行写入
await writeFileAsync(dist, rendered, 'utf-8');
return pageName;
}
然后我们可以发现，再工程的目录中新增页面文件以及其依赖组件的代码
webpack可视化管理核心代码
譬如在 GUI 可视化页面接入 webpack 配置，我们如图所示修改 dist 目录
之后前端会发送一个 websocket 到后端。websocket 截图如下
传递到后端接口，修改本地目录的 ice.config.js，这个配置文件 webpack配置以及其它各种配置的封装。代码如下：
function setCLIConf(path: string, conf: object) {
const confKeys = Object.keys(conf);
const useConfContent = fsExtra.readFileSync(path, 'utf8');
const ast = parser.parse(useConfContent, { sourceType: 'module' });
let flag = false;
let properties = [];
// 遍历 ast 树
traverse(ast, visitor);
// 比如用户的配置和项目的配置
// 如果存在相同项就修改，如果不存在就新增
confKeys.forEach(key => {
const node = properties.find((property) => property.key.name === key);
if (node) {
node.value.value = conf[key];
} else {
properties.push(t.objectProperty(t.identifier(key), value));
}
});
// 生成并写入新的配置
const newUserConf = generate(ast).code;
const formatNewUserConf = prettier.format(newUserConf);
fsExtra.writeFileSync(path, formatNewUserConf);
}
物料系统的核心原理
首先通过 cli 工具生成一个最简单的组件模板代码：
1. 写完代码以后使用 prepublishOnly指定，它会调用 screenshot 库对你的代码进行渲染并进行快照截图。
2. 再将你的代码发布到 npm 市场。
3. 将这些信息记录为 materialConfig 信息上传到 物料市场 的 db数据库
icestark 微前端体系
组件 / 区块 的提供者将不再收到框架的约束。
三个子应用分别通过 React@15、React@16、Vue@2.x 开发实现。核心原理可以从下面代码可见一斑，通过 Router 和 Store 将不同框架直接耦合起来：
<AppRouter>
<AppRoute
path={['/', '/message', '/about']}
basename="/"
exact
title="通用页面"
url={[
'//unpkg.com/icestark-child-common/build/js/index.js',
'//unpkg.com/icestark-child-common/build/css/index.css',
]}
/>
<AppRoute
path="/seller"
basename="/seller"
title="商家平台"
url={[
'//unpkg.com/icestark-child-seller/build/js/index.js',
'//unpkg.com/icestark-child-seller/build/css/index.css',
]}
/>
<AppRoute
basename="/waiter"
path="/waiter"
title="小二平台"
url={[
'//unpkg.com/icestark-child-waiter/dist/js/app.js',
'//unpkg.com/icestark-child-waiter/dist/css/app.css',
]}
/>
</AppRouter>
我的之前的文章：
更多文章还请大家扫码关注我们的公众号：