项目介绍

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

演示地址：http://124.222.119.198:5556/#/pages/login

项目截图项目截图项目截图

项目框架

项目实现

页面的开发与动态渲染

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

渲染模块核心代码

展开查看代码

js 复制代码

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语句。

流程编排

代码编辑

复杂业务场景的设想

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

遇到的问题

低代码引擎的组件库中可用组件还是太少，需要内部有专人开发维护
低代码引擎使用起来还是有一定的学习成本
组件库中的组件有部分配置未显示在配置面板，需要修改schema

结语

非常感谢低代码引擎团队的所有人员，能够开源这么优秀的项目，也希望低代码引擎之后越来越好。

"本文正在参加阿里低代码引擎征文活动"

基于低代码引擎在线开发项目的尝试