一、前言：

随着全球范围内新一代人工智能技术发展突飞猛进，社会各个领域向数字化转型，全面迈入智能互联网时代，新的技术不断迭代问世，其中，低代码（Low-Code）是在借助低代码工具的情况下，开发人员只需编写少量代码就能快速开发出企业级应用系统，并帮助企业团队加速数字化转型进程。

低代码基于低成本、高效率、高灵活性与强拓展性等特点，一度成为近几年数字化转型的热点之一。低代码简单的理解，就是能够以最少的手写代码和设置快速开发应用、配置和部署业务应用程序。

LowCodeEngine是阿里巴巴集团打造的开源低代码引擎，旨在为有一定研发技能的开发者提供高效灵活的开发环境，快速构建满足特定业务需求的低代码平台，延续了“低门槛、高上限”特色，实现开发、测试、运维等软件生产全链路的智能化。

低代码引擎是一款为低代码平台开发者提供的，具备强大扩展能力的低代码研发框架，由阿里巴巴前端委员会、钉钉宜搭联合出品，使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。

LowCodeEngine开源低代码引擎：

基于具备物料解析、可视化编排、运行时渲染等关键功能，提供丰富的扩展点和扩展区域，LowCodeEngine为企业提供更加智能化的软件生产方式，让开发者可以定制专属的低代码设计器，极大地拓宽了低代码开发的可能性，可以轻易实现“可视化拖拽”的全栈低代码应用搭建，让复杂应用开发更加高效，加快企业数字化与智能化进程。

“是骡子是马，拉出来溜溜”，下面跟着我的步伐来逐渐了解LowCodeEngine开源低代码引擎独特的魅力。

---

二、企业级项目开发演进的阶段：

本人在学校毕业后一直从事开发工作，从早期的传统CSS布局、手写CSS样式，到后来的MVVM框架（数据驱动视图），接触了Vue.js、React、小程序等技术栈，同时，也逐渐的搭建了自己熟悉的webpack、vite等打包工具的工程化，再到后面低代码平台，都是解决企业级项目开发的效率问题，通过不断的技术演进，来为公司带来降本增效的原则。

1. 传统CSS样式开发时代：

早期受制于浏览器以及技术、兼容性等问题，导致网页的显示效果非常的单一，几乎都是静态页，前端的工作重复的造轮子，复用性、组件化、工程化比较的欠缺。

2. UI组件库开发时代：

得益于前端技术和浏览器的发展，后面的网页能展示越来越丰富的内容了，比如动画、游戏、画图等，随着MVVM模式出现，一大批前端框架(Vue.js框架、React框架和AngularJS框架)开始流行起来，特别是近几年框架、技术、工具呈爆发式发展，前端变化特别快！

3. 低代码Low Code开发时代：

低代码（Low Code）是一种可视化的应用开发方法，用较少的代码、以较快的速度来交付应用程序，将程序员不想开发的代码做到自动化，称之为低代码。可以从表单、流程、业务建模、集成、页面、权限的全程搭建过程可视化，无需复杂操作，拖拉拽的方式即可搭建，即搭即用。

低代码是一组数字技术工具平台，基于图形化拖拽、参数化配置等更为高效的方式，实现快速构建、数据编排、连接生态、中台服务，通过少量代码或不用代码实现数字化转型中的场景应用创新。

---

三、什么是低代码？

随着企业飞速的发展，企业对低代码的需求不断增强，伴随着AI人工智能和“云”市场竞争加剧，企业数字化转型浪潮等带来了大量企业级系统建设的需求，为了应对企业各种各项的项目快速交付，在供需关系无法满足平衡的情况下，以低代码为主导的研发模式就成为了企业建设的核心。

低代码可以为企业提供更加智能化的软件生产方式，IT人员可以轻易实现从“智能生成”到“可视化拖拽调整”的全栈低代码应用搭建，让复杂应用开发更加高效，加快企业数字化与智能化进程，实现了软件研发的全链路，从软件的设计开发、测试、运维、运营全链路全智能的覆盖，以让软件生产更简单、更高效、更智能的宗旨，实现了软件开发的人才低门槛、技术高上限。

低代码开发无需代码基础，适合业务人员、IT开发及其他各类人员使用，通过零代码开发平台快速构建应用，并适应各种需求变化，用户在几天甚至几个小时内就能完成系统的开发、测试和部署，并能够随时调整或更新。

• 基于低代码平台开发者不需要使用传统的手写代码的方式进行编程。
• 通过低代码平台图形化的用户界面和参数设置可视化的拖拽来创建应用软件。

1. 既生瑜(低代码)何生亮(低代码引擎)？

低代码发展从开始到现在一直难以出现一个能满足所有需求的低代码平台，因为每个公司的业务背景、技术团队、使用的对象、使用场景的存在较大的差异，所以，每个公司都拥有属于自己的低代码平台。

以我上一家供职的公司为例，在世界500强企业(某士康)中，由于多厂区、多部门、多管理、多技术团队的因素下，在系统的不断建设发展阶段中，会存在多种低代码平台的技术栈（每个部门都想把自己的低代码产品卖给其它事业部使用），发现并没有一款满足所有需求的低代码平台。

试想一下，是否能有一种能够让业务线能够快速建设低代码平台、减少重复低水平建设的低代码引擎？

低代码引擎是一款为低代码平台开发者提供的工具，它具备强大定制扩展能力的低代码设计器研发框架，核心是设计器，通过扩展、周边生态等可以孵化出各式各样的设计器，并不是一套可以适合所有人的低代码平台，而是帮助低代码平台的开发者，快速生产低代码平台的工具。

---

四、低代码平台孵化器 - LowCodeEngine开源低代码引擎：

低代码引擎是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。低代码引擎正是为了让开发搭建平台变得更容易更快速。

“LowCodeEngine开源低代码引擎”，它不是一款低代码平台，它是低代码平台的生产工，结合低代码平台 所需的核心功能，并通过将强大的定制能力结合，让大家能快速生产出一款低代码平台。

“LowCodeEngine开源低代码引擎”对于低代码设计器来说，提供了强大的设计器的定制能力，而设计器的定制能力是依托于插件定制、物料定制、设置器等扩展能力的。这些扩展能力能让我们无需经过低水平的建设就能打造一款好用的低代码产品。

---

五、LowCode低代码功能使用：

“LowCodeEngine开源低代码引擎”是设计和实践的低代码平台，提供基于接口设计的可视化搭建能力，拥有丰富可复用的IT资产，支持一键发布等特色功能，助力企业快速开发应用。

下面通过官方提供的基于“LowCodeEngine开源低代码引擎”实现的低代码Demo运行起来来小试牛刀一下，通过 DEMO 项目来了解低代码引擎是如何工作的。

1. 简单三部曲 - 本地安装调试：

因为项目是前端代码，首先需要有前端开发的能力，另外，需要提前安装好node或yarn的相关环境，本文中使用的是yarn。

只需要简单的三步操作即可运行lowcode的Demo项目，当然项目也支持npm的操作方式，这个就要看个人的喜好，安装依赖取决网速(如有失败，多安装几次)，当项目运行成功后，就可以看到下图右下角的一个运行的页面，就是一个低代码平台的设计器。

$ git clone git@github.com:alibaba/lowcode-demo.git
$ cd lowcode-demo
$ cd demo-general
$ yarn
$ yarn run start

启动的默认页面就是低代码引擎生成的设计器，它是一款中后台设计器。Demo项目其实是一个低代码平台的设计器，是一个低代码平台中最重要的一环，用户可以在这里通过拖拽、配置、写代码等等来完成一个页面的开发。

小细节：作者第一次操作猛如虎，结果运行起来是如上述的错误安装页面，仔细查看才发现，还需要特别注意一下这是一个多包仓库，需要在“demo-general”文件夹中进行操作。

2. 设计器面板功能介绍说明：

启动的默认页面就是低代码引擎生成的设计器，它是一款中后台设计器，以下是对应的功能操作说明，具体可以去官网查看比较详细的介绍。

---

3. 低代码实践：

以下是公司内部某个业务线的系统，是用PHP的Laravel框架开发的，所以，打算将公司的商城系统迁移到“LowCodeEngine开源低代码引擎”的低代码平台上，做一个最佳实践的企业级项目迁移案例Demo，同时，也期待官网也能推出更好的落地实践Demo。

需求一：海报图片分享：

商城系统遇到最多的场景就是海报分享，为了满足业务的销售需求，技术单位经常需要做大量的海报H5页面，让业务人员进行线上推广与分享。

先将“LowCodeEngine开源低代码引擎”的低代码Demo运行起来，再清空默认的画布，并且将模式调至为“H5”的模式，将基础的元素“图片”组件直接拖动到画布上，在属性中，将图片的链接地址，改为远程的一个url。

远程的url图片地址替换后，发现图片并没有占满屏幕，可以找到样式的控制面板来调试css相关的样式，因为本人是开发人员，所以，习惯于写css的样式，同时，也是有许多的设置框或选项框来为不懂CSS的人员提供设置方案，将图片的宽度设置完100%后，就可以看到图片是显示全部了。

备注：图片素材是在网上随意搜的一张图片，本文不涉及商业目的。

因为海报的大小不一样，所以，尽量让海报在居中的位置，可以将flex的上下居中的css样式写到行内样式代码中，但是发现一个问题，就是有注释的时候，是不生效的。需要将注释去掉，同时，针对不会css样式表的，可以采用布局中的方案同样来实现。

最后，通过页面的“预览”功能，会生成一个url链接，可以在chrome的开发者模式中打开链接并查看效果。可以看到上面page元素的样式和图片元素的样式都是#main，但是实际上预览的效果并没有看到这个id的css样式类属性值，在后面看看写其它的class类属性是否会生效。

上面通过“LowCodeEngine开源低代码引擎”的低代码，在几分钟内就可以快速构造出一个H5的海报分享页面，这样，我们就可以从小程序里面嵌套进来，以下是小程序中跳转H5页面webView的处理逻辑：

handleJumpWebView() {
    Taro.navigateTo({
      url: '/pages/my/webView?url=' + 'https://lowcode-engine.cn/demo/demo-general/preview.html?scenarioName=general'
})

可以在小程序的开发模拟器中，通过提供一个链接就可以分享刚刚使用低代码写的页面，记得需要将域名进行不校验，否则会打不开，温馨提示，如果发布到生产版本，需要在微信后台配置一下业务域名，否则打不开这个链接。

可以看出，如果在传统的模式下，必定是前端的同学，使用前端的技术栈，如我司是使用Vue开发出一个海报分享的页面出来，再进行测试与线上的发版本，就可以在小程序中使用这个H5的webView了，一般来说也是需要几个小时吧，但是使用“LowCodeEngine开源低代码引擎”的低代码，甚至可以在10分钟内就可以完成一个html的页面开发，非常的提效。

---

六、定制插件：

lowcode-engine引擎的自定义物料。在具体实际开发过程中，虽然官方提供了许多设置器，但可能满足不了我们的需要，需要我们自定义设置器。

1. 基于原插件改造：

中后台设计器里面都是通过注册了插件来完成的，比如设计器中的“左侧导航”与“顶部栏位”都是由插件组成的，都是通过插件扩展出来的。

功能点：
“保存到本地”这个按钮是将低代码产出一份标准 Schema（一份符合低代码规范的数据）。
二、问题点：
有一个问题，如果在企业内部的开发环境中，如何进行分工合作呢？
三、解决思路：
①. 此时，我的思路就是像SVN服务器一样，集中式管理，将获得的 Schema做成线上的数据，可以获取通过网络的方式分发到其它客户终端。 ②. 再通过渲染模块完成 Schema 的渲染或直接出码为代码直接执行。

哪些数据需要存储呢？只有页面的Schema是不够的，需要一个数据“componentsMap”等这些属性的数据，里面包括了这个页面需要哪些组件，才能提前把这个组件构建出来才能进行使用。

插件是作用于设计器的，主要是通过按钮、图标等展示在设计器的骨架中，设计器的骨架分为“topArea”、“leftArea”、“centerArea”、“rightArea”几个区域，我们将在“topArea”增加一个按钮“同步服务器”，用来请求代码到服务器中。

在src/plugins/plugin-save-sample/index.tsx中，增加一个插件，功能是点击按钮时，将本地保存的数据发送到后端数据库。

// 保存功能示例
const SaveSamplePlugin = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      const { skeleton, hotkey, config } = ctx;
      const scenarioName = config.get('scenarioName');

      skeleton.add({
        name: 'saveSample',
        area: 'topArea',
        type: 'Widget',
        props: {
          align: 'right',
        },
        content: (
          <Button onClick={() => saveSchema(scenarioName)}>
            保存到本地
          </Button>
        ),
      });
      // 增加同步服务器的后端代码
      skeleton.add({
        name: 'saveApi',
        area: 'topArea',
        type: 'Widget',
        props: {
          align: 'right',
        },
        content: (
          <Button type="primary" onClick={() => saveSchemaApi(scenarioName)}>
            同步服务器
          </Button>
        ),
      });
      skeleton.add({
        name: 'resetSchema',
        area: 'topArea',
        type: 'Widget',
        props: {
          align: 'right',
        },
        content: (
          <Button onClick={() => resetSchema(scenarioName)}>
            重置页面
          </Button>
        ),
      });
      hotkey.bind('command+s', (e) => {
        e.preventDefault();
        saveSchema(scenarioName);
      });
    },
  };
}
export default SaveSamplePlugin;

如果需要将数据存到远程数据库中，需要安装使用到axios插件，如下为安装axiox的方法：

yarn add axios

在以下的文件中增加跨域的代码，workspace/demo/lowcode-demo/demo-general/build.json：

{
  "vendor": false,
  "devServer": {
    "hot": false,
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true,
        "pathRewrite": {
          "^/api": "/api"
        }
      }
    },
    "disableHostCheck": true,
    "port": 8080
  }
}

修改src/services/mockService.ts中的代码，新写一个方法，将原来存储到本地的代码的逻辑修改为axios上传方法。

import axios from 'axios'

export const saveSchemaApi = async (scenarioName: string = 'unknown') => {
  if (!scenarioName) {
    console.error('scenarioName is required!');
    return;
  }
  const packages = await filterPackages(material.getAssets().packages);
  await setPackagesToLocalStorage(scenarioName);
  axios.post('http://localhost:3000/api/schema', {
    name: getLSName(scenarioName),
    schema: project.exportSchema(IPublicEnumTransformStage.Save),
    packagesName: getLSName(scenarioName, 'packages'),
    packagesSchema: packages
  })
  .then(function (response) {
    Message.success('成功保存到服务器');
  })
  .catch(function (error) {
    console.log(error);
  });
};

需要注意的是，如果只是一个小页面的话，可以推荐使用OSS这样的CDN云资源，如果是比较复杂的页面，可以放到数据库进行保存。

小结：

插件功能赋予低代码引擎更高的灵活性，低代码引擎的生态提供了一些官方的插件，但是无法满足所有人的需求，所以提供了强大的插件定制功能。在和低代码引擎解耦的基础上，通过定制插件，可以和引擎核心模块进行交互，从而满足多样化的功能。

---

2. 项目中定制化插件：

在实际的开发过程中，是不是会像我一样，经常需要进行打包流水线到OSS上呢？可以像我一样使用一个插件来部署应用到OSS上面。

在plugins目录下新建一个插件，src/plugins/plugin-oss-upload/index.tsx，在文件中定义一个“同步OSS”的按钮代码：

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import { Button } from '@alifd/next';
import {
  OssUpload,
} from '../../services/mockService';

// 保存功能示例
const OssUploadPlugin = (ctx: IPublicModelPluginContext) => {
  return {
    // 插件的初始化函数，在引擎初始化之后会立刻调用
    async init() {
      const { skeleton, hotkey, config } = ctx;
      const scenarioName = config.get('scenarioName');

      skeleton.add({
        name: 'saveSample',
        area: 'topArea',
        type: 'Widget',
        props: {
          align: 'right',
        },
        content: (
          <Button onClick={() => OssUpload(scenarioName)}>
            同步OSS
          </Button>
        ),
      });
      hotkey.bind('command+s', (e) => {
        e.preventDefault();
        OssUpload(scenarioName);
      });
    },
  };
}
OssUploadPlugin.pluginName = 'OssUploadPlugin';
OssUploadPlugin.meta = {
  dependencies: ['EditorInitPlugin'],
};
export default OssUploadPlugin;

在src/index.ts首页中进行插件plugin的引入，将刚刚定义的OSS插件导入进来：

import OssUploadPlugin from './plugins/plugin-oss-upload';

async function registerPlugins() {
  ...
  await plugins.register(ManualPlugin);

  await plugins.register(OssUploadPlugin);

  ...
};
...

上传OSS的相关代码，因自己使用的是公司的相关OSS，可以根据下面的代码稍微改造一下即可。

import axios from 'axios';
 
// 上传文件到OSS的函数
export function uploadToOSS(file, ossConfig) {
  const formData = new FormData();
  formData.append('key', ossConfig.key); // OSS中的文件路径
  formData.append('OSSAccessKeyId', ossConfig.accessId);
  formData.append('policy', ossConfig.policy);
  formData.append('signature', ossConfig.signature);
  formData.append('file', file);
 
  return axios.post(ossConfig.host, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
 
// 使用示例
// 在你的组件中
methods: {
  uploadFile(file) {
    const ossConfig = {
      host: 'https://xxxxxx.aliyuncs.com', // OSS的上传地址
      key: 'your-object-key', // OSS中的文件路径
      accessId: 'your-access-id',
      policy: 'your-policy',
      signature: 'your-signature'
    };
    uploadToOSS(file, ossConfig)
      .then(response => {
        console.log('Upload success:', response);
      })
      .catch(error => {
        console.error('Upload failed:', error);
      });
  }
}

---

七. 低代码源码分析：

Demo项目是一个组合内核、setter、插件、物料的示范工程，目前包含多个独立 demo 工程目录，每个 demo 目录都是一个独立的工程，代表一个特定的 demo 场景，可以选择其一单独使用，不过，这里希望官方推荐使用pnpm重构一下。

仓库下每个 demo-xxx目录都是一个可独立运行的 demo 工程，分别对应以下8种不同的场景：

• 综合场景
• 基础 fusion 组件
• 基础 fusion 组件 + 单自定义组件
• 基础 antd 组件
• 自定义初始化引擎
• 扩展节点操作项
• 基于 next 实现的高级表单低代码物料
• antd 高级组件 + formily 表单组件
• Low-Code Engine低代码搭建引擎Demo项目 - X6画布

1. 目录结构：

首先分析的是“demo-general”文件夹目录，从目录结构中可以分析，使用的React + TypeScript + Scss的技术栈开发的，可以看出来低代码引擎的扩展能力都是基于 React 来研发的，对于Vue的同学，可能需要先熟悉一下React的相关知识，顺便熟悉一下Antd这个UI库。

index.ejs中引入了很多UMD包的资源，可以直接通过 window 上的变量进行引用，因为平时在使用js库如react时，打包工具会将它们一起打包，react和react-dom文件就好几百k(通常是不会变化)，全部打包成一个文件会很大，用户在首次打开时往往会出现白屏等待时间过长的问题，此时，可以将这些js库文件从cdn上引入，这样，就可以将这类文件抽离出来。

由于引入的是UMD的低代码引擎主包“engine-core.js”，这样就可以直接在浏览器使用window.AliLowCodeEngine.init进行初始化，由于打包工具“build-scripts”中，将“var window.AliLowCodeEngine”直接与“@alilc/lowcode-engine”进行了绑定，所以，在入口文件中可以看到以下初始化低代码引擎代码，在控制台也是可以看到直接可以用window的全局变量即可输出AliLowCodeEngine变量。

import { init, plugins } from '@alilc/lowcode-engine';
(async function main() {
  await registerPlugins();  // 初始化设置内置 setter 和事件绑定、插件绑定面板、语言等

  init(document.getElementById('lce-container')!, {
    locale: 'zh-CN',
    enableCondition: true,
    enableCanvasLock: true,
    // 默认绑定变量
    supportVariableGlobally: true,
    requestHandlersMap: {
      fetch: createFetchHandler(),
    },
    appHelper,
    enableContextMenu: true,
  });
})();

2. 插件注册机制：

Demo项目中的中后台设计器的生成，是通过注册了插件来完成的。上面在低代码的实践过程中，发现保存本地并没有发送请求，让我们顺着代码来找到是什么样的原因。

import { init, plugins } from '@alilc/lowcode-engine';
import SaveSamplePlugin from './plugins/plugin-save-sample';

async function registerPlugins() {
  await plugins.register(InjectPlugin);
  await plugins.register(CodeEditorPlugin);
await plugins.register(CodeGenPlugin);

  await plugins.register(SaveSamplePlugin);  // 注册保存插件

  await plugins.register(PreviewSamplePlugin);
await plugins.register(CustomSetterSamplePlugin);
  await plugins.register(lowcodePlugin);
  ...
};

找到“mockService.ts”文件中，发现保存的代码是在本地的localStorage中，也就是说没有根后端进行交互，这里也印证了是一个纯前端的React项目。

export const saveSchema = async (scenarioName: string = 'unknown') => {
  setProjectSchemaToLocalStorage(scenarioName);
  await setPackagesToLocalStorage(scenarioName);
  Message.success('成功保存到本地');
};
export const getProjectSchemaFromLocalStorage = (scenarioName: string) => {
  if (!scenarioName) {
    console.error('scenarioName is required!');
    return;
  }
  const localValue = window.localStorage.getItem(getLSName(scenarioName));
  if (localValue) {
    return JSON.parse(localValue);
  }
  return undefined;
}

const setProjectSchemaToLocalStorage = (scenarioName: string) => {
  if (!scenarioName) {
    console.error('scenarioName is required!');
    return;
  }
  window.localStorage.setItem(
    getLSName(scenarioName),
    JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save))
  );
}

const setPackagesToLocalStorage = async (scenarioName: string) => {
  if (!scenarioName) {
    console.error('scenarioName is required!');
    return;
  }
  const packages = await filterPackages(material.getAssets().packages);
  window.localStorage.setItem(
    getLSName(scenarioName, 'packages'),
    JSON.stringify(packages),
  );
}

3. Schema：

Schema可以理解为一颗多叉Json树，基于JSON Schema可以存储诸多如动态表单、可视化搭建页面或数据大屏等开源项目。

低代码组件通常对应一份Json形式的 Schema，通过设计器会产出一份标准 Schema，即一份符合低代码规范的Json数据。获得Schema数据后，可以通过一些同步的方式存储这些 Schema，并分发到客户终端，客户端再通过渲染模块完成 Schema 的渲染或直接出码为代码直接执行。

const SamplePreview = () => {
  ...

  return (
    <div className="lowcode-plugin-sample-preview">
      <ReactRenderer
        className="lowcode-plugin-sample-preview-content"
        schema={{
          ...schema,
          dataSource: mergeWith(schema.dataSource, projectDataSource, customizer),
        }}
        components={components}
        locale={currentLocale}
        messages={i18n}
        appHelper={appHelper}
      />
    </div>
  );
};

ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));

5. lowcode-engine项目运行：

$ git clone git@github.com:alibaba/lowcode-engine.git
$ cd lowcode-engine
$ yarn install
$ yarn setup
$ yarn start

6. 小结：

从可扩展项目的视角，可以把低代码引擎架构理解为下图：

---

八、开发一个自定义物料：

我们可以看到大多数据低代码平台，提供的是最基础、颗粒度最小的组件，只能使用预定义的组件，通过对“LowCodeEngine开源低代码引擎”的了解，我们可以进行自定义组件接入demo项目中。

1. 自定义物料项目安装：

使用npm init进行初始化项目，按照以下的信息进行输入与选择，这里的使用单组件进行测试，如果构建组件库的话，推荐使用React组件库的模式，体验的感觉就是有点类似于Vue init的脚手架项目。

$ npm init @alilc/element lowcode-material [可以自定义项目名称]
$ yarn install
$ yarn lowcode:dev  // 直接看package.json中的script命令，注意不是yarn start

完善元素的选项后，安装完依赖后，运行完项目后就可以启动一个如下的web页面。

2. 自定义物料demo组件试用：

查看代码发现项目中，已经有一个demo的组件，包括tsx和scss文件，在低代码引擎中可以对这个简单的demo组件做一个演示，就是一行文件的显示。

3. 结合实际的公司业务案例：

在以往的开发中，大多数的情况下，是使用第三方的UI框架来快速开发样式，比如，移动端常用的Vant，PC端后管常用的Element、Antd等UI框架，可以提高我们的开发效率，后期公司由于急速的发展，导致业务线越来越庞大，维护的工程复用性、复杂度、节省人力成本的多项因素作用下，工程化的基建刻不容缓，内部团队也是经过几次迭代产出了UI库、组件库、工具库等。

公司目前的组件都迁移到阿里的“云效”中，使用中也是非常的方便，公司前后端全部迁移到“云效的”Maven仓库、Npm仓库等制品仓库中。

公司某一条业务线的新项目开发，可以看到下面UI原型图，可以分析得到以下的规律：

• 布局样式是一栏左右2隔布局方式，只是有些字体的颜色、文案通过属性来传值
• 一共有近200多种Case的需要单独的页面显示
• 工作量巨大且重复的作业样式，非常适合低代码
• 可以使用“LowCodeEngine低代码物料”代码开发相关组件，提高复用性

4. 修改组件代码：

因为当时选的是React单组件，所以，这里并不能在外层加一个文件夹，感兴趣的同学可以自己尝试React组件库方式，因为，本人习惯于Less开发(跟Scss大同小异)，可以看到直接集成Less就可以，不需要安装什么插件支持。

组件是修改了，根据“标准化协议”定义的内容，需要对低代码引擎物料规范和搭建物料规范做修改，首先找到lowcode/lowcode-material/meta.ts文件，修改以下的属性值，在组件库中可以进行显示。

完成修改后，即可以将新开发的这个“双栏卡片组件”拖动到低代码引擎中显示，在mate.ts文件中需要定义props的几个传参的值，然后，直接进行内容的绑定即可如左下图进行组件的内容显示。

以上就是在“lowcode-material”这个项目完成了本地的调试工作，接下来，就可以将代码发布到阿里的“云效”平台。

5. 组件进行文件打包：

通过package.json的scripts属性可以知道，文件使用“yarn lowcode:build”进行打包，打包之后会多出es的模块的一些加载文件。

yarn lowcode:build

以下在打包中发现的错误，可以对比着改一下2处的名称，即可打包成功。

6. 发布组件到云效中：

通过“yarn publish”将本地的打包好的组件包发布到云效的私有仓库，因为云效没有直接查看文件的操作，通过一些技术手段拿到这个包的JSON信息，能过JSON将组件的包下载下来。

7. 将发布的组件集成到低代码引擎：

根据官方的提示，其实只需要将3个文件通过https的形式进行访问即可，因为上面云效没有直接查看文件的地方，所以，将下载的包进行解压，在本地测试启动一个代理服务器，如果线上使用，推荐使用CDN的方式把这几个文件引入。

在“demo-general”文件夹中，在assets.json文件中将，packages和components属性按要求进行引入，首先要保证这些文件是可以访问的。

引入文件后，重新启动项目打开“LowCodeEngine开源低代码引擎”，在组件库的“默认分组”中即可找到组件，拖动到画布上就可以进行使用了。

8. 小结：

以上就是通过自己开发一个组件，可以实现企业内部的一些定制化需求，充分的体现了“LowCodeEngine开源低代码引擎”的开源性、灵活性、自由性，将主动权完全掌握在自己手中，通过低代码引擎和配套协议的开源，基于一套基础协议，共同打造一套精品基础设施。

---

九、“LowCodeEngine开源低代码引擎”对企业降本增效的SOWT分析：

在近几年期间，各行各业都开始大面积进行数字化型阶段，可以发现(尤其是传统企业)在开发内部工具的过程中，大量的页面、业务场景、组件、工具等都在不断重复，这种重复造轮子的工作，即浪费IT的人力成本，同时也浪费IT人员的大量开发时间。

通过对“LowCodeEngine开源低代码引擎”开发一套2C的商城后管系统，我们可以体验到“可视化拖拽调整”的全栈低代码应用搭建，让复杂应用开发事半功倍、更加高效。

1. 公司团队管理痛点：

以下为公司内部IT团队管理工作过程中，对于传统团队的开发模式存在一些困境，传统的软件开发过程需要花费数月的时间，这远远不能满足市场的需求，特别在新老员工离职交接过程中，处于一个低周期产出的阶段，员工需要花费大量时间和精力了解底层代码和系统结构，才能进行修改。

在以往的IT团队开发模式，在业务规模的高峰期为了快速完成系统的开发，帮助业务团队尽快开展工作，往往会成比例的招大规模的团队开发人员来满足现有的需求，这样会导致几个问题，没有一个比较有效的降本的方案：

• 业务高峰期，人员配置比较充足，但是团队的人员成本也是比较高的
• 业务低谷期，人员超过饱和程度了，就会产生大量的闲置人力成本

---

2. 技术开发痛点：

在软件开发和其它的工程领域，“重复造轮子”被广泛认为是一种低效的做法，因为它浪费了大量的时间和资源去重新创作已经存在的东西，而不是利用现有的技术和经验去解决问题。

在大多数企业应用中，我们经常“重复造轮子”，对于开发的角度来讲，每个公司都有一套自己的软件代码平台，无非是使用Java体系重构一遍PHP的业务，使用Go的体系重构一遍Java的体系，就会产生以下几个方面的问题。

此外，传统的团队开发模式在有IT人员大量离职后，系统的传承和维护也会同时受到影响，而产生团队凝聚力的波动。

---

3. “LowCodeEngine开源低代码引擎”的SOWT分析：

“LowCodeEngine开源低代码引擎” 是一个低代码引擎，提供低代码底层能力，适合用于开发多种场景的低代码平台开发。如：资源编排、模型驱动、移动端、大屏端、页面编排等低代码平台。孵化的低代码平台可以通过图形化的用户界面来代替传统编程方式的软件开发工具，使得软件开发过程更加快速和高效，同时也大大降低了技术门槛，在团队协作中，低代码平台可以起到很重要的作用，下面是个人总结的SWOT，可仅大家参考一下。

很多市面上的通用型低代码产品，都有每个平台的合理性，能够满足大部分中小企业在数字化转型过程中的IT建设诉求。但对于很多中大型企业，还是无法满足全部的诉求，由于低代码引擎的存在，将上层的众多平台都是基于低代码引擎来实现的，来定制更适合自己企业的低代码平台。

“LowCodeEngine开源低代码引擎”为各行各业的人员提供了一个快速、便捷、简单的建立个性化系统的解决方案。其产品包含自定义表单、自定义报表、自定义流程引擎、团队协作等功能，可以帮助企业快速地制定出相应的战略和战术，从而提升企业的竞争力。

4. “LowCodeEngine开源低代码引擎”能带来什么样的提升：

4.1 降本：

主要包括3方面，学习成本、开发成本和其他成本。“LowCodeEngine开源低代码引擎”的特点是可视化和标准化，这意味着即使企业内部的IT团队人员数量减少，也可以高效地支持业务需求。

• 灵活： 提供开发低代码平台的底层能力，自由布局，满足企业的完全定制化需求，可基于该引擎轻松的开发出各式各样的低代码平台，灵活性好、二次开发能力强。
• 轻量： 提炼自企业级低代码平台的面向扩展设计的内核引擎，奉行最小内核，最强生态的设计理念，支持物料体系、设置器、插件 等生态元素的全链路研发周期。

• 学习成本降低是普通业务人员即可操作，为IT研发资源不足的企业降低人力成本
• 开发成本降低是对于开发者而言，可以复用既有能力，减少低价值代码耗费时间，同时，很多需求变更可通过配置方式实现，缩短了开发、运维等时间

4.2 增效：

主要包括2方面，交付效率和协作效率。

• 交付效率：通过配置即可满足一批新增或变更需求，直接避免了低价值代码开发时间，客户响应效率的极大改善
• 由于“LowCodeEngine开源低代码引擎”能力复用，会大大缩短端到端交付时长，如测试时长、集成发布时长等都被大大缩短，工程效率的提升。
• “LowCodeEngine开源低代码引擎”的物料系、设置器、插件为平台提供了开箱即用的高质量生态元素，支持在各类情况下快速复用。用户也可根据自身需要完善物料体系建设，便于复用与积累。

4.3 协作效率：

在传统的企业开发模式中，一个需求交付要涉及到很多人，如业务需求人员、产品经理、UI设计师、实施人员、项目经理、开发人员、测试人员、运维人员等，而借助低代码，很多需求可能在业务部门内容就能实现了，需要沟通的人数少了，沟通效率自然就提高了，另外一个最大的问题是，出了问题就到处甩锅，责任不明确。

“LowCodeEngine开源低代码引擎”可以快速验证，聚焦业务设计而非程序设计，通过业务聚焦、标准化、复用、少人化等来体现价值，采用了灵活的系统架构、标准的底层协议、强大的拓展能力具有开发的物料协议和拓展接口的低代码平台。

---

5. “LowCodeEngine开源低代码引擎”降本增效量化：

“LowCodeEngine开源低代码引擎” 使能开发者定制低代码平台，支持在线实时构建低码平台，支持二次开发或集成低码平台能力，提供的界面、逻辑、对象、流程等可视化编排工具来完成大量的开发工作，降低软件开发中的不确定性和复杂性，进而大幅提升开发效率，让企业能够降低开发成本，降低技术门槛，快速创新应用，实现快速试错，敏捷迭代。

借助“LowCodeEngine开源低代码引擎”的应用，能够帮助其在数字化建设项目上更低成本高效率交付项目，例如在一家客户中完成项目开发，即可快速复制到其所有同类型的项目中，拓展性和可复制性强，可快速推广，推进更多数字化改革项目落地。

“LowCodeEngine开源低代码引擎”在很多领域也有落地的实际项目，在阿里巴巴企业中作为前端开发最有力的提效工具，根据 2021 年的数据统计，阿里巴巴集团内部低代码平台的数量已达 100 种以上，目前还在持续增长中。可以帮助企业降低了应用开发成本，如果应用爆发式增长，避免招人的成本困境，实现对业务价值赋能大，不过，需要带来额外的认知、管理成本，相对降本增效的结果，这是比较次要的。

---

十、“LowCodeEngine开源低代码引擎”工作方式：

1. 业务开发人员流程：

主要负责就是低代码可视化拖拽开发的主要流程，业务人员可以通过低代码平台便捷、快速地组合相关应用，促进其对特定业务系统的专业化创新。

业务开发人员负责使用低代码开发平台进行应用程序开发的专业人员：

• 1.理解客户需求并设计应用程序，以满足客户的业务需求
• 2.使用低代码开发平台快速创建应用程序，并保证其质量和稳定性
• 3.与客户和团队成员沟通，收集反馈并根据反馈进行改进
• 4.解决过程中的技术和业务问题，按时完成项目并交付高质量的应用程序

---

2. IT技术开发人员开发流程：

IT技术开发人员(主要是前端开发人员)主要是开发与迭代低代码平台，与客户需求方间接接触，主要是服务于业务开发人员，如负责以下的方案：

• 1.低代码引擎实现标准

• 2.根据我们自己的诉求通过对设计器进行扩展，改动成需要的设计器功能

• 3.物料仓库的搭建与发布，公司使用的是“云效”，也可以使用自己的私有仓库

• 4.本地私有化部署方案

业务开发者主要从事辅助性软件IT开发的业务人员，不需要会专业的编程技术。这里的IT技术人员是与“业务开发者”相对的概念，指的是工作为企业信息化相关的技术人员，典型岗位有项目经理、架构师、程序员、测试人员、运维人员等。

• 一是服务于企业IT部门或软件的公司的IT技术人员
• 二是来自业务部门，本职工作与IT无关但参与到软件开发中的业务开发者。

“LowCodeEngine开源低代码引擎”构建低码平台，让更多的业务人员可以成为业务开发者，比如构建订单管理应用的销售主管、人事档案系统的HR、库存盘点H5的库管人员等，市场、运营、产品、销售、财务等人员可直接通过“LowCodeEngine开源低代码引擎”的低代码平台进行开发，构建出采购、财务、数据分析或生产管理等一系列智能和业务类的管理系统来满足日常需要，从而提升工作效率，实现 “业务开发者、平民开发者”。

---

十一、“LowCodeEngine开源低代码引擎”企业导入可行性分析：

“LowCodeEngine开源低代码引擎”支持快速调整和业务实现，可以有效降低多元化、创新性业务开展的试错成本，为企业探索创新性产品和服务提供便利。

公司目前的业务是做定制化车险的相关业务，从公司的前期到目前的阶段已经快有6个年头时间了，以下是公司从0-1的技术体系搭建的规模，个人非常推荐在前期使用“LowCodeEngine开源低代码引擎”来快速开发系统，从而抢占先机，快速的验证商业模式，用以迅速打开市场。

以下是对企业级项目迁移的评估，“LowCodeEngine开源低代码引擎”可以作为基础设施，有效的通过孵化出“可视化拖拽调整”的全栈低代码应用搭建，让复杂应用开发更加高效，在不同领域都可以沉淀出一套或多套最佳实践，技术上通过一套设计器插件及其配套的物料和服务来承载，降低了开发的成本，可以让开发者专注业务的开发，可以与合作伙伴更好的进行协作。

通过将低代码引擎开源，可以将原本在阿里巴巴内部形成的生态扩大到了外部，让低代码技术领域的爱好者们共同打造同一个生态，依托于低代码引擎及其生态能力，低代码会真真正在成为一项开箱即用的通用基础能力，被广泛的应用在各种设计、研发、生产、交付环节中。

---

十二、总结：

希望通过本文，让大家对“LowCodeEngine开源低代码引擎”有一个更加全面的认识，让更多的低代码爱好者找开思路，结合自身的经验，能为自己的企业内部的低代码业务场景赋能，也可以加速低代码行业快速发展。

“LowCodeEngine开源低代码引擎”支持在线实时构建低码平台，支持二次开发或集成低码平台能力，通过低代码引擎+图元编排，完备的画布拖拽绘图核心能力，灵活的属性配置面板，支持领域定制物料，为用户提供强大的图元编排设计器。

“LowCodeEngine开源低代码引擎”是一套面向扩展设计的企业级低代码技术体系，提炼企业低代码平台的面向扩展设计的能力，奉行最小内芯、最强状态的设计理念，提供开箱即用的物料系统、插件。主要是给低代码平台的开发者使用的，为低代码平台建设者提供具备强大的扩展能力的低代码设计器的研发框架，包括完善的全面的基础协议、完善的工具链。

“LowCodeEngine开源低代码引擎”的优势在于：

• ①. 为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架
• ②. 通过扩展、周边生态等可以产出各式各样的设计器
• ③. 帮助低代码平台的开发者，快速生产低代码平台的工具
• ④. 统一了前端开发语言，抹平编程语言差异，使用React + ts的技术栈
• ⑤. 掌握代码主动权，可定制和开发低代码平台的设计器部分
• ⑥. 制定低代码协议规范、开发可视化设计器、物料区块管理、创建和维护低代码平台等

基于 LowCodeEngine 快速打造高生产力的低代码研发平台，提供了一系的物料生态、设计器生态、插件生态的低代码技术体系，开发人员只需要拖放这些组件并进行配置，即可快速构建低代码应用。即使是一些非专业开发人员或有限的编程经验的人员也能够快速构建低代码应用，而无需深入地学习复杂的编程语言和技术。

通过“LowCodeEngine开源低代码引擎”，可以为企业孵化更多的低代码平台，加速行业软件应用发展、打造企业定制化个性生态，引领低代码产业变革和赋能企业更规范发展。在生态构建方面，背靠阿里巴巴提供了行业一流的技术支撑，持续赋能业务降低研发成本、劳动力成本、提高研发效率、缩短产品交付周期、加快企业试错速度、降低试错成本，共同推动全行业复杂应用落地，创造行业新价值，使企业的产品和服务以更快的速度迭代和优化，赢得激烈的市场竞争。

---

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