阿里低代码引擎学习记录

官网

一、关于设计器

1、从设计器入手进行低代码开发

设计器就是我们用拖拉拽的方法，配合少量代码进行页面或者应用开发的在线工具。
阿里官方提供了以下八个不同类型的设计器Demo：

  • 综合场景Demo（各项能力相对完整，使用Fusion-UI和Fusion基础组件）
  • 基于Fusion的Demo
  • 基于Antd的Demo
  • 应用级设计器 （只有这个Demo支持SPA应用开发）
  • 基于Next的设计器（基于next实现的高级表单低代码物料）
  • 图编排设计器（基于x6的图编排能力）
  • 物料设计器（自定义自己的物料）
  • 扩展节点设计器（插件扩展）

不同的Demo各有能力的侧重，比如图编排设计器更倾向流程图页面的设计；Antd设计器则提供了开发基于Antd组件的，用于快速交付的页面的能力；应用级设计器则更侧重于使用低代码引擎独立开发项目……每一个低代码设计器都是一个React工程，可以前往Github官网将设计器下载到本地。

2、设计器的重要操作内容

当我们使用阿里低代码引擎进行低代码开发的时候，基本上是以下两个方向同时进行的：

  1. 在选中的设计器Demo的React工程中，对我们选用的设计器进行扩展。
  2. 在设计器的上通过拖拉拽以及少量JS代码的编写，进行页面的开发。

此处的扩展主要指插件的扩展和物料（或者说组件）的扩展，全局复用函数的编写和npm包的使用。不进行扩展的话，设计器的开发能力相当有限。

（1）使用插件&扩展插件

社区教程视频
插件是用来丰富设计器的功能的。我们的使用低代码设计器只是为了方便前端页面的快速搭建？还是要参与到我们整个项目从框架设计到部署上线的每一个环节？ 这都体现在我们对插件的开发中。 而一个插件的设计过程约等于一个React组件的设计过程，相对简单，如下：
在这里插入图片描述
之后就可以在设计器中使用我们自定义的插件了：
在这里插入图片描述
设计器功能的强大与否很大程度取决于插件的扩展程度，但过度的扩展会造成设计器很难使用，逻辑混乱。

（2）组件&扩展组件

在每个设计器的项目文件夹下都自带了一份默认的资产包：/demo/src/services/assets.json，而一个设计器能使用哪些组件（物料）都取决于这个json文件的配置。在这里插入图片描述

  • packages 对象：我们需要在其中定义这个包的获取方式，如果不定义，就不会被低代码引擎动态加载并对应上组件实例。定义方式是 UMD 的包，低代码引擎会尝试在 window 上寻找对应 library 的实例；
  • components 对象：我们需要在其中定义物料描述，物料描述主要包括
    • 描述组件的基础信息，通常包含包信息、组件名称、标题、描述等
    • 描述组件属性信息，通常包含参数、说明、类型、默认值 4 项内容
    • 推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。

比如antd和fusion这两个组件库，他们都把自己的组件使用阿里低代码平台的物料设计器进行了封装并发布到npm上，所以在得到他们在npm上的url之后，在assest.json中进行配置，即可在自己的设计器中使用它们的组件。所以总而言之，要使用新的组件要经历以下步骤：使用阿里低代码平台的物料设计器设计新的组件，然后打包发布到npm上，最后在低代码设计器的assest.json中进行配置。

  • 封装自己的组件的社区教学视频
  • 物料设计器的文档

比如，我先在物料设计器中设计自己很简单的组件：
在这里插入图片描述
在打包并发布后，我的项目中会多出一个assest-prod.json文件，这份文件就是对我设计的组件的一个基本描述 （包括他在npm上的地址等信息） ：
在这里插入图片描述
这是我的自定义的组件的url
最后一步，将物料设计器中的assets-prod.json中的内容merge到低代码设计器中的assest.json中，即可在低代码设计器中使用自己的组件。
实践之后的总结就是，使用自己的封装的组件的坑在于发布到npm这个过程，对包名的要求什么的比较严格。至于如何设置自定义的组件在低代码设计器中暴露的配置项，我还没有实践到这一步……

源码面板

每个页面都提供了“源码面板”，让前端开发者在里面进行交互逻辑的编写。

类似于Vue的写法

在这里插入图片描述
很容易上手，无需多言。

逻辑复用&&使用第三方库

很重要的一点是我们可以在“源码面板”中使用全局复用的函数和第三方的库，只需提前在设计器的React文件夹目录下的appHelper.ts文件中注册即可。
在这里插入图片描述
在这里插入图片描述

（4）数据源

待完善

（5）出码

此处要先了解一下每个页面的schema。每个用低代码引擎搭建的页面都有一份自己的schema描述文件，这个文件描述了所属页面的样式、排版、交互逻辑等内容。渲染页面的时候是根据schema来渲染的，出码得到的独立的react工程也要以schema为依据做出码。
使用出码模块可以得到一个独立的React工程，但是我还是认为这个模块的意义并不大。

  • 首先如果要使用设计器独立开发一个应用就必须使用应用级设计器，但应用级设计器又默认是没有出码模块的，需要手动引入，但如果仅此而已那还可以接受。麻烦的是用应用级设计器设计的多个页面都的schema描述都是空的，在社区和文档中都找不到关于这个疑点的说明。是bug还是需要自己进行配置？如果是需要自己配置要怎么配置？无从考究。
  • 其次如果是混合开发的话，那出码模块照样意义不大。因为用一个独立的react项目来开发一个页面这种做法本身就很浪费资源。

二、开发一个应用

1、混合开发

将低代码引擎的产物与我们已有的传统项目相结合，重点在于获得每个用低代码页面搭建出来的页面的schema以及对这份schema文件的改造
在低代码设计器的项目目录的**/src/services/mockServices.tsx**中我们可以看到每个页面的schema是如何被加工成可以渲染在浏览器上，或者用于出码的：

const setProjectSchemaToLocalStorage = (scenarioName: string) => {
  if (!scenarioName) {
    console.error('scenarioName is required!');
    return;
  }
  // 关键点1
  console.log('schema', JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)));
  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);
  // 关键点2
  console.log('packages', JSON.stringify(packages));
  window.localStorage.setItem(getLSName(scenarioName, 'packages'), JSON.stringify(packages));
};

注意上面代码的第7行和第21行，不管我们用什么方法读取到这两个JSON字符串（直接在控制台输出也好，写入本地的某个文件也好）都无所谓，但我们最终都是要依据这两个JSON字符串在我们自己的React项目中接入低代码平台的产物。 

import { useEffect, useState } from 'react';
import schemaMap from './lowcode/componentA/schema.json'; // schema的JSON字符串
import packages from './lowcode/componentA/package'; // packages的JSON字符串
import {
  buildComponents,
  assetBundle,
  AssetLevel,
  AssetLoader,
} from '@alilc/lowcode-utils'; // 要用到的一系列工具函数，用来对两个JSON字符串进行加工
import ReactRenderer from '@alilc/lowcode-react-renderer'; // 核心所在，该组件用来渲染低代码平台的产物

// 一系列处理，可以参照每个设计器的项目目录里面的preview.tsx文件
const schema = schemaMap.componentsTree[0]; // schema
const componentsArray = schemaMap.componentsMap;
const componentMap = {};
componentsArray.forEach((item) => {
  componentMap[item.componentName] = item;
});
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 assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = buildComponents(libraryMap, componentMap);

function App() {
  return (
    <div className="App">
      <div id="myComponent">这是我自己的DOM</div>
	  <div>以下是低代码平台的产物</div>
      <ReactRenderer
        className="lowcode-plugin-sample-preview-content"
        schema={schema}
        components={components}
      />
    </div>
  );
}
export default App;

2、使用低代码引擎独立开发

存在疑点，详见此处

三、利弊分析

1、优点

  • 支持自己扩展设计器。这让我们可以决根据实际开发需求来确定低代码引擎所适用的业务场景：是让低代码参与到一个项目从立项到部署上线的每一个环节？还是只让前端使用，专注于一些页面的快速搭建且仍保持前后端分离的开发模式？都由我们自己决定。
  • 在Github上，设计器的版本更新频繁
  • 免费
  • 对React生态更加友好

2、风险

  • 低代码平台的产物是用ReactRenderer组件来做容器以渲染的，但在仍未找到ReactRenderer组件react工程中我们自己写的组件的通信方式。
  • 低代码平台的产物在接入已有的传统项目时会有依赖项冲突矛盾，每次都要花费很大的成本去排查。
  • 低代码平台的产物貌似只支持接入到用webpack构建的工程，且需要对webpack配置文件做较多的修改（我使用vite构建的工程来接入在编译阶段就不通过，且官方文档中提供的demo都是基于webpack的）
  • 开源项目的通病：运行时有各种无从考究的报错。但官方文档中FAQ模块只记录了其中很常见的几个，Github上又没有开放评论区。（尽管在我的demo中，一个creat-react-app项目在接入了低代码平台的产物后，它在本地的运行、webpack打包以及用nginx配置并部署都暂时未收到那些莫名其妙的爆红的影响；但很难说在我们的项目扩大到一定规模后，这些爆红不会影响项目的运行。）
  • 虽有成功案例（钉钉宜搭），但社区仍不够活跃

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/592162.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【前端项目——分页器】手写分页器实现（JS / React）

【前端项目——分页器】手写分页器实现（JS / React）

组件介绍 用了两种方式实现&#xff0c;注释详细~ 可能代码写的不够简洁&#xff0c;见谅&#x1f641; 1. 包含内容显示的分页器 网上看了很多实现&#xff0c;很多只有分页器部分&#xff0c;没和内容显示联动。 因此我增加了模拟content的显示&#xff0c;这里模拟了32条数…
阅读更多...
Python数据分析案例44——基于模态分解和深度学习的电负荷量预测(VMD+BiGRU+注意力)

Python数据分析案例44——基于模态分解和深度学习的电负荷量预测(VMD+BiGRU+注意力)

案例背景 承接之前的案例&#xff0c;说要做模态分解加神经网络的模型的&#xff0c;前面纯神经网络的缝合模型参考数据分析案例41和数据分析案例42。 虽然我自己基于各种循环神经网络做时间序列的预测已经做烂了.....但是还是会有很多刚读研究生或者是别的领域过来的小白来问…
阅读更多...
Monorepo（单体仓库）与MultiRepo（多仓库）: Monorepo 单体仓库开发策略与实践指南

Monorepo（单体仓库）与MultiRepo（多仓库）: Monorepo 单体仓库开发策略与实践指南

&#x1f31f; 引言 在软件开发的浩瀚宇宙里&#xff0c;选择合适的代码管理方式是构建高效开发环境的关键一步。今天&#xff0c;我们将深入探讨两大策略——Monorepo&#xff08;单体仓库&#xff09;与MultiRepo&#xff08;多仓库&#xff09;&#xff0c;并通过使用现代化…
阅读更多...
Vue3 + Vite + TypeScript + Element-Plus创建管理系统项目

Vue3 + Vite + TypeScript + Element-Plus创建管理系统项目

官方文档 Vue3官网 Vite官方中文文档 创建项目 使用npm命令创建项目&#xff1a; npm create vitelatest输入项目名称&#xff1a; ? Project name:项目名选择vue&#xff1a; ? Select a framework: - Use arrow-keys. Return to submit.Vanilla > VueReactPrea…
阅读更多...
【网站项目】木里风景文化管理平台

【网站项目】木里风景文化管理平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

精灵图 为什么要使用精灵图 一个网页中往往会应用很多小的背景图像作为修饰&#xff0c;当网页中的图像过多时&#xff0c;服务器就会频繁地接收和发送请求图片&#xff0c;造成服务器请求压力过大&#xff0c;这将大大降低页面的加载速度,因此&#xff0c;为了有效地减少服务…
阅读更多...
JAVA基础｜常用API-JDK8之前传统的日期，时间

JAVA基础｜常用API-JDK8之前传统的日期，时间

一. Date &#xff08;一&#xff09;说明 代表的是日期和时间 &#xff08;二&#xff09;常用的用法 构造器说明public Date()创建一个Date对象&#xff0c;代表的是系统当前此刻日期时间public Date(long time)把时间毫秒值转换成Date日期对象 常见方法说明public long …
阅读更多...
算法提高之潜水员

算法提高之潜水员

算法提高之潜水员 核心思想&#xff1a;二维01背包 两个容量v1v2注意状态计算时j和p可以<各自的v #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 1010,M 80,K 22;int f[K][M];int k,V1,V2;int main(){ci…
阅读更多...
FloodFill-----洪水灌溉算法（DFS例题详解）

FloodFill-----洪水灌溉算法（DFS例题详解）

目录 一.图像渲染&#xff1a; 代码详解&#xff1a; 二.岛屿数量&#xff1a; 代码详解&#xff1a; 三.岛屿的最大面积&#xff1a; 代码详解&#xff1a; 四.被围绕的区域&#xff1a; 代码详解&#xff1a; 五.太平洋大西洋水流问题&#xff1a; 代码详解&#x…
阅读更多...
锂电池充放电方式曲线

锂电池充放电方式曲线

作为一种“化学能-电能”相互转换的能量装置&#xff0c;锂电池在使用过程中必然会进行充电和放电&#xff0c;合理的充放电方式既能减轻锂电池的损伤程度&#xff0c;又能充分发挥锂电池的性能&#xff0c;具有重要的应用价值。 如《GB/T 31484-2015&#xff1a;电动汽车用动…
阅读更多...
非对称齿轮的跨棒距算的对不对

非对称齿轮的跨棒距算的对不对

前面有一期咱们聊了非对称齿轮《》&#xff0c;非对称齿轮的齿厚测量一般都为跨棒距。最近研究了下计算方法&#xff0c;对计算结果的正确性做了下验证。 在MATLAB中编制了相关的计算程序&#xff1a; 齿轮的模数4&#xff0c;左侧分度圆压力角25&#xff0c;右侧分度圆压力角…
阅读更多...
Sqli-labs第一关到第四关

Sqli-labs第一关到第四关

目录 一&#xff0c;了解PHP源代码 二&#xff0c;破解第一关 2.1在了解完源码之后&#xff0c;我们重点看一下 2.2破解这道题表中有几列 2.3查看表中哪一列有回显 2.4查询库&#xff0c;表&#xff0c;列信息 三&#xff0c;总结 前提&#xff1a; 之所以把1234关…
阅读更多...
MySQL基础_1.MySQL概述

MySQL基础_1.MySQL概述

文章目录 一、关系型数据库和非关系型数据库1.1 关系型&#xff08;RDBMS&#xff09;1.2 非关系型&#xff08;非RDBMS&#xff09; 二、常用的基础语句2.1 查看表的创建信息2.2 编码问题 一、关系型数据库和非关系型数据库 1.1 关系型&#xff08;RDBMS&#xff09; 是最古…
阅读更多...
都上3D数字孪生了，2D的WEB组态和大屏可视化未来的发展在哪里？趋势是基于页面嵌套、蓝图连线等新技术，与功能业务应用融合

都上3D数字孪生了，2D的WEB组态和大屏可视化未来的发展在哪里？趋势是基于页面嵌套、蓝图连线等新技术，与功能业务应用融合

首先回顾下组态工具的发展史&#xff1a; 回顾发展史&#xff0c;WEB组态终于可以搭建业务系统了&#xff01;&#xff08;页面嵌套 节点编辑 WEB组态 上位机 大屏可视化 无代码 0代码 iframe nodered 蓝图&#xff09;-CSDN博客文章浏览阅读624次&#xff0c;点赞12次&#x…
阅读更多...
ThreeJS:纹理的颜色空间

ThreeJS:纹理的颜色空间

色彩空间Color Space 在ThreeJS中&#xff0c;纹理的colorSpace属性用于定义文里的颜色空间。 颜色空间是一个用于描述颜色的数学模型&#xff0c;在现实生活中&#xff0c;人眼可以观察到无数种颜色&#xff0c;而颜色空间就是用来描述这些颜色的一个方法&#xff0c;不同的颜…
阅读更多...
C语言-自定义类型：结构体，枚举，联合

C语言-自定义类型：结构体，枚举，联合

目录 一、结构体1.1 结构体变量的定义和初始化1.2 结构体内存对齐1.3 修改默认对齐数1.4 结构体传参 二、位段2.1 什么是位段2.2 位段的内存分配2.3 位段的跨平台问题2.4 位段的应用 三、枚举3.1 枚举类型的定义3.2 枚举的优点 四、联合&#xff08;共用体&#xff09;4.1 联合…
阅读更多...
c#数据库: 9.删除和添加新字段/数据更新

c#数据库: 9.删除和添加新字段/数据更新

先把原来数据表的sexy字段删除,然后重新在添加字段sexy,如果添加成功,sexy列的随机内容会更新.原数据表如下: using System; using System.Collections.Generic; using System.Data; using System.Data.Common; using System.Data.SqlClient; using System.Linq; using System.…
阅读更多...
Linux理解文件操作 文件描述符fd 理解重定向 dup2 缓冲区 C语言实现自己的shell

Linux理解文件操作 文件描述符fd 理解重定向 dup2 缓冲区 C语言实现自己的shell

文章目录 前言一、文件相关概念与操作1.1 open()1.2 close()1.3 write()1.4 read()1.4 写入的时候先清空文件内容再写入1.5 追加&#xff08;a && a&#xff09; 二、文件描述符2.1 文件描述符 fd 0 1 2 的理解2.2 FILE结构体&#xff1a;的源代码 三、深入理解文件描述…
阅读更多...
jupyter notebook 设置密码报错ModuleNotFoundError: No module named ‘notebook.auth‘

jupyter notebook 设置密码报错ModuleNotFoundError: No module named ‘notebook.auth‘

jupyter notebook 设置密码报错ModuleNotFoundError: No module named ‘notebook.auth‘ 原因是notebook新版本没有notebook.auth 直接输入以下命令即可设置密码 jupyter notebook password
阅读更多...
k8s调度原理以及自定义调度器

k8s调度原理以及自定义调度器

kube-scheduler 是 kubernetes 的核心组件之一&#xff0c;主要负责整个集群资源的调度功能&#xff0c;根据特定的调度算法和策略&#xff0c;将 Pod 调度到最优的工作节点上面去&#xff0c;从而更加合理、更加充分的利用集群的资源&#xff0c;这也是我们选择使用 kubernete…
阅读更多...
最新文章

Copyright @ 2022~2023