关于低代码我所知道的

KaneLogger
881 阅读7分钟

对于低代码的原理和现状进行总结，并结合现况思考如何利用该技术提升研发和交付能力。

实现原理

整个低代码运行过程分为设计和渲染两个部分。
拖拽和配置是设计环节，本质是通过可视化的方式配置页面Schema描述。
Schema 本质其实可以理解为 JS 对象。组件类型和组件层级关系。

渲染过程：把 Schema 描述通过渲染引擎：

  1. 解析 Schema
  2. 加载依赖组件
  3. 按顺序 & 层级渲染组件
  4. 呈现完整页面

拖拽引擎：拖拽是利用 html api,用来将一个可拖拽的元素拖到一个可以被放置的位置。

低代码引擎

  • 业务层
  • PaaS 通用服务层
  • SDK 拖拽其实只是编排模块的一小部分
  • 协议层

核心api: Drag & Drop

  • 入料
    • 入料模块
  • 编排
    • 编排模块
    • 编排插件
    • 编辑器框架
  • 渲染
    • 运行时框架
    • 渲染模块
  • 出码
    • 代码生成
    • 代码优化

案例展示

编码案例

再次阐明：

在编排方面，通过各种方式，可以是拖拽可以是直接写JSON。结果都是一份JSON schema作为渲染用的config。

在渲染方面，目前较为活跃的网站应用大多是SPA，单页面应用，本质其实就是个 div。

  1. 在加载页面的时候，异步去配置中心获取页面配置，也就是通过后端获取JSON。
  2. 配置数据取出来之后，先解析JSON，判断JSON是否合法正确，然后通过Vue组件的Render方法渲染页面。

根据页面描述的schema, 使用 AntD/Elememt 以及 react.createRoot or Vue.render 实现一个简单的渲染引擎。

具体源码实现推荐参考：谭光志老师的可视化拖拽组件库一些技术要点原理分析

概念和价值

  • 提升开发效率，原型阶段，在构建成熟的应用程序之前先验证想法；
  • 降低开发门槛，满足一次性需求：如营销 / 活动网站等可由运营人员直接进行开发；
  • 保障应用品质。持续演化的应用程序：这些通常是业务线应用程序。UI相对稳定，相对标准化，沉淀的业务组件与最佳实践可以直观的使用。与之相对应的是需求独特、经常变化的特点。

应用场景

  1. 首页管理（PC 和 H5） 核心功能：后台配置系统支持线上更换图片、模块增删和拖拽编排等，前端免打包部署。

  2. 低代码大屏 核心功能：支持数据建模，并提供图表库，短时间内配置出能用的大屏。

发展历程

image.png

平台低代码存在的问题

不能满足用户期望和业务需求的低代码项目的特点：

  1. 低代码平台无法工作的一个迹象是与定制有关。

如果开发人员发现其平台需要不断的定制，那就意味着这些代码的编写没有遵循架构和合理设计的原则。 这种定制化的维护将很快变得不可持续，并最终减少投资回报。

  1. 平台虽然宣称无代码，但仍然需要开发人员

  2. 导致系统集成杂乱无章，低代码需要访问，多个集成将会增加安全风险，低代码开发很难调试。

  3. 低代码平台发布的新版本需要重写或大量返工的应用程序。对于平台技术支持要求高，对于中断、缺陷或其他影响应用程序性能的问题保持沟通。

总结：

  1. 对平台技术支持要求高，要求平台能提供稳定完整及时的技术支持。
  2. 主流的发展方向是把平台做厚，，很多需要基于业务灵活拓展的东西都依赖平台基础组件和平台渲染器，牵一发而动全身。平台也希望它能包含各种功能来支撑灵活拓展的业务，而这样会很难用。
  3. 使用平台还得使用对应的云服务。或者是用了云服务送开发平台。

反思：

  • 低代码更应是一种思想、方法论，不要拘泥于其具体形式
  • 低代码不是技术银弹，不要强求它同时满足所有场景；但它的两大思想利器 —— 抽象、复用，这两个特性始终能为我们所在业务领域降本增效
  • 从低代码发展到 “低设计”、“低部署” 和 “低维护”，贯穿整个软件生命周期。这只是一种发展方向，虽然是目前的主流，但是对于开发者而言，可以回归本心，只是当做一层中间层进行组件派发。

如何应用

易用的、轻快的、解决对应领域问题的低代码产品方案

对业务领域进行抽象封装（建模），并转化为可配置、可编排、可复用的图形化编程语言或模式，从而达到消除或减少手工编码的作用，进一步达到降低编程门槛、降本增效和普惠数字化等目的。

核心是：抽象、复用。

目前从开发到上线一个大屏，周期一般为3-4周，投入成本大、复用能力低。

困难点：

  • 工程大，实现有难度（组件多；交互复杂，有定制需求；数据通信的基础单位在组件，颗粒度低；对抽象能力要求高）
  • 创新风险（价值尚未被广泛验证）
  • 未正式立项，没有迭代人力

所以不执著于业内的大屏实现，按照四个方向实现低代码：

  • 以组件为单位进行封装，设计好各个hook，尽量满足各种自定义需求
  • 显示屏布局（layout）单独封装，可以使用 grid 布局 -> vue-grid-layout
  • 将接口调用、数据读取配置化（将与后端的联调开发工作转换为配置工作）
  • 动态列表生成：列表 = 行模板 + 数据（模型驱动视图思想）

领域场景的模型抽象

collection

  1. illa-builder

GitHub 上最近比较火的一款低代码开发工具。可在短时间内快速搭建一个企业内部应用。

项目内置了一整套 UI 组件库，通过拖拽组件，即可完成应用搭建。

此外，工具还接入了多种数据库和 API，让数据调用更加简单方便。

ILLA 还提供了在线协作功能，让团队成员一起以更高效的方式，推进项目研发。

  1. YAO

image.png YAO 是一款开源应用引擎，使用 Golang 编写，以一个命令行工具的形式存在, 下载即用。适合用于开发业务系统、网站/APP API 接口、管理后台、自建低代码平台等。YAO 采用 flow-based 的编程模式，通过编写 YAO DSL (JSON 格式逻辑描述) 或使用 JavaScript 编写处理器，实现各种功能。 YAO.gif

  1. amis

Amis 是百度开源的一块前端低代码框架，通过 JSON 配置就能生成各种后台页面。

体验地址：aisuda.github.io/amis-editor…

image.png

  1. LowCodeEngine

需要基于低代码引擎定制符合自己业务需求的低代码平台。

体验地址：lowcode-engine.cn/demo/demo-g…

image.png

参考资料

  1. 低代码交流平台
  2. 什么是比较好的低代码产品
  3. 表明低代码平台价格过高和交付不足的八个迹象
  4. 如何选择低代码平台：六个关键契合性考量
  5. InnerEye低代码大屏：低代码思源与实践
  6. 低代码引擎 LowCodeEngine 茁壮成长的一年
avatar
文章
阅读
粉丝