项目介绍

这些年接触过不少快速开发平台和低代码平台，这些平台或多或少都有局限性，有些无法实现复杂的业务场景需求，有些则是使用或配置过于繁琐，等等。在接触到低代码引擎后，觉得可以基于这个引擎尝试做一个在线开发平台，既可以快速响应频繁的业务需求变更，也可以减少增删改查功能耗费掉的人天，可以让开发将精力放在核心功能上；同时还可以作为一个ETL工具来使用；后端的代码流程可视化在线配置，也使得项目可以作为一个规则引擎来使用。

演示地址：www.zzusp.asia (备)http://124.222.119.198/

代码仓库：github.com/gitmyname/o…

低代码引擎 流程管理 流程管理-编排

项目框架

项目实现

页面的开发与动态渲染

前端基于低代码引擎，实现了页面的开发设计，和加载schema动态渲染（此处没有使用出码模块，因为使用出码模块需要生成前端源码，并需要重新打包后才能使用，而且出码模块出现问题解决起来比较麻烦，可能还需要自己实现部分出码功能）本项目作为个人项目的尝试，所以取了最简单的方式，在引擎中开发后调用后端接口保存schema；渲染时，从后端接口获取存储的schema，直接加载动态渲染出来。

渲染模块核心代码

展开查看代码

import React, {useState, useEffect} from 'react';
import {Loading} from '@alifd/next';
import mergeWith from 'lodash/mergeWith';
import isArray from 'lodash/isArray';
import {buildComponents, assetBundle, AssetLevel, AssetLoader} from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import {injectComponents} from '@alilc/lowcode-plugin-inject';
import appHelper from '../../appHelper';
import {
  getProjectSchemaFromDb,
  getPackagesFromAssets
} from '../../services/schemaService';

const Renderer = (props) => {

  const {page} = props;

  const [data, setData] = useState({});

  useEffect(() => {
    setData({});
    init();
  }, [page])

  async function init() {
    console.log('Renderer Page ' + page);

    const projectSchema = await getProjectSchemaFromDb(page);
    const packages = await getPackagesFromAssets();
    setData({});
    const {
      componentsMap: componentsMapArray,
      componentsTree,
      i18n,
      dataSource: projectDataSource,
    } = projectSchema;
    const componentsMap: any = {};
    componentsMapArray.forEach((component: any) => {
      componentsMap[component.componentName] = component;
    });
    const pageSchema = componentsTree[0];

    const libraryMap = {};
    const libraryAsset = [];
    packages.forEach(({package: _package, library, urls, renderUrls}) => {
      libraryMap[_package] = library;
      if (renderUrls) {
        libraryAsset.push(renderUrls);
      } else if (urls) {
        libraryAsset.push(urls);
      }
    });

    const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];

    // TODO asset may cause pollution
    const assetLoader = new AssetLoader();
    await assetLoader.load(libraryAsset);
    const components = await injectComponents(buildComponents(libraryMap, componentsMap));

    setData({
      schema: pageSchema,
      components,
      i18n,
      projectDataSource,
    });
  }

  const {schema, components, i18n = {}, projectDataSource = {}} = data as any;

  if (!schema) {
    return <Loading fullScreen tip={<span style={{color: '#5584ff'}}>Loading...</span>}>
      <div className="lowcode-plugin-sample-preview" style={{ minHeight : '90vh' }}></div>
    </Loading>;
  }

  function customizer(objValue: [], srcValue: []) {
    if (isArray(objValue)) {
      return objValue.concat(srcValue || []);
    }
  }

  return (
    <div className="lowcode-plugin-sample-preview" style={{ minHeight : '90vh' }}>
      {!schema ? <Loading style={{ width : '100%', height : '90vh' }}/> : <ReactRenderer
        className="lowcode-plugin-sample-preview-content"
        style={{ height : '100%' }}
        schema={{
          ...schema,
          dataSource: mergeWith(schema.dataSource, projectDataSource, customizer),
        }}
        components={components}
        messages={i18n}
        appHelper={appHelper}
      />
      }
    </div>
  );

};

export default Renderer;

渲染结果

Java的在线开发与动态编译执行

因之前接触过工作流引擎，所以java的在线开发选择了bpmn.js来编排后端流程，选择了阿里的compileflow作为后端流程编排的底层实现，选择Monaco-editor作为在线代码编辑器，基于ibatis做了封装来执行sql语句。

流程编排

代码编辑

适用场景

• 业务相对简单的功能，如：基础数据的增删改查、导入、导出
• 图表展示、统计报表相关功能
• 系统间数据对接，数据传输过程中的加工处理（ETL）
• 云上的场景或内网服务器使用，非客户私有化部署的场景
• 针对复杂的业务场景，也可以作为一个可以在线配置的规则引擎工具来使用

复杂业务场景的设想

• 针对复杂的业务场景、页面设计，使用平台在线开发还是有些勉强，甚至会更加耗费时间精力。针对这种场景，目前设想还是在本地项目中开发，可以在当前平台项目中开发，通过路由跳转；或者另起项目，通过iframe嵌入；或者将该项目集成到现有系统中
• 针对有并发性能要求的后端接口，那么就回到项目中，开发相应接口。

后续计划

• 增加数据源管理，可以在一个流程中，连接不同的数据库；不同结构的数据可以存储在适合的数据库中
• 增加代码版本管理，方便追溯历史版本的代码
• 流程节点支持不同的开发语言，如：python、go等语言，不同的场景使用合适的语言开发，如算法相关可使用python的pandas类库
• 或可以将代码执行模块在底层层面抽离出来，可实现不同逻辑的代码在不同的服务器上执行。如：需要耗费大量CPU性能和内存的代码交由适合计算的服务器，普通的业务代码逻辑交由基础性能的服务器等

遇到的问题

• 低代码引擎的组件库中可用组件还是太少，需要内部有专人开发维护
• 低代码引擎使用起来还是有一定的学习成本
• 组件库中的组件有部分配置未显示在配置面板，需要修改schema
• 代码自动补全目前没有找到合适的方案，尝试过使用LSP，但同一时间只能一人使用
• 代码存在数据库中，无法使用现有的代码扫描工具扫描

结语

非常感谢低代码引擎团队的所有人员，能够开源这么优秀的项目，也希望低代码引擎之后越来越好。也欢迎大家在评论区评论交流 :-)