La forma de mi herramienta de desarrollo low-code ideal

Cuando se trata de código bajo, la mayoría de los productos de código bajo que vienen a la mente son los siguientes

imagen.png

o algo como esto

imagen.png

Se puede encontrar que la interfaz de operación de este tipo de producto casi siempre se presenta así: el material del componente está a la izquierda, el lienzo está en el medio y el panel de propiedades está a la derecha. Es solo que los usuarios objetivo y los escenarios de uso son diferentes. Por ejemplo, la primera imagen es en realidad la interfaz de operación visual del marco de código abierto de código bajo amis . La mayoría de los usuarios utilizados son desarrolladores, y se utilizan principalmente para escribir el interfaz de formulario del fondo de gestión. La segunda imagen es la interfaz de operación del diseño preliminar de la plataforma de código bajo. La mayoría de los usuarios utilizados son operaciones comerciales y se utilizan principalmente para generar páginas de marketing.

plataforma de código bajo

En comparación con los marcos de trabajo de código bajo o las herramientas de código bajo, las plataformas de código bajo tienen funciones más completas y pueden llamarse un producto. Las plataformas de código bajo apuntan a más desarrolladores no profesionales o requieren costos de desarrollo extremadamente bajos (excepto para el desarrollo secundario). Sin embargo, la versatilidad de la plataforma de código bajo también es muy baja.Por ejemplo, incluso si obtiene el código fuente del diseño preliminar, las cosas implementadas no son adecuadas para que las use el personal del departamento financiero de su empresa.

Marcos/herramientas de código bajo

Los marcos/herramientas de código bajo son adecuados para desarrolladores profesionales. El uso de marcos o herramientas de código bajo puede mejorar en gran medida la eficiencia del desarrollo. Los desarrolladores pueden incluso llevar a cabo un desarrollo secundario en el marco de código bajo de acuerdo con el negocio específico de la empresa, desarrollar una plataforma de código bajo que se ajuste al negocio de la empresa y proporcionarla a otros departamentos comerciales.

Principio técnico

Independientemente de si se trata de una plataforma de código bajo o un marco de código bajo, la implementación involucrará principalmente tecnologías relacionadas como JSON Schema, DSL, AST y arreglo lógico. En términos generales, se trata de varias operaciones de arrastrar y soltar en la página, y las operaciones en el panel de propiedades finalmente se asignarán a una pieza de datos JSON.Después de que el motor de análisis obtiene los datos JSON, los analiza de acuerdo con las reglas establecidas y luego genera la página. Algunos marcos de código bajo también admiten la función de "código de salida", que se implementa mediante AST. Algunas interacciones complejas se pueden lograr mediante la orquestación lógica.

El desarrollo del código bajo

El código bajo basado en plataforma es difícil de implementar, pero los marcos de trabajo de código bajo o las herramientas de código bajo todavía tienen buenas perspectivas.

往前就不说了,就前端领域三个框架的时代,早期出现了 react-jsonschema-formamis 等框架,那时候低代码这个词还没有出现或者所知甚少,amis 的介绍里也没有低代码一词。之后就是 form-renderformily。近两年低代码这个词火了之后,陆续出现了的各种 xxx-form 表单类的低代码概念的库。

还有一些适合营销类页面使用的开源作品也出现了很多,但是要根据公司的业务拿来落地实施,难度还是很大的,几乎都要二次开发。不像上面说到的几个管理后台表单类型的框架,只需要在项目里安装相应的包就可以直接使用。

低代码框架的好与弊

我自己在18年左右的时候就开发过类似低代码的东西,就是针对管理后台的 CURD 页面,封装了两个大组件,Form 组件,Table 组件,两个组件都是通过传入 json 数据,内部通过各种判断渲染出页面。当时前后端都是我自己写,大致是这样开发的:前端页面组件几乎没有任何代码,只是从后端接口拉取指定的 json,解析渲染界面。当时这样开发确实快,每当 json 定义无法满足产品需求时,改起来也比较容易,因为组件都是自己封装的。

直到我维护别人写的 xxx-form,xxx-table ,真是改一次吐槽一次小可爱。

好处

  • 开发的效率也许确实变高了(看对封装的组件的熟悉程度了)。
  • 代码风格统一(都是一样 json 配置)。
  • PPT 上有东西写了。

弊端

  • 增加代码维护难度和成本:低代码框架就是一个黑盒,当无法满足产品的需求时,需要去研究源码做定制开发。
  • 对开发人员是一种残害:如果项目中使用的是比较出名的低代码框架,维护的人也许心里会好受一些,如果是某些不知名的练习生产物,维护的人估计要吐槽为什么加个字段还要去扒别人的屎山。
  • 不利于经验少的开发人员的成长:没有经过大量的 CURD 代码的洗礼,怎么发现痛点,怎么有造轮子的 idea,沦为 json 配置工程师。
  • QJ 产品的想法:“这个需求无法实现,代码不是我封装的,看不懂”。
  • 后续可能会招不到人维护:练习生写的库或者大厂背书的 KPI 框架不维护了。

现在每当看到 “xxx-form 开源了,效率提高100倍”,我就想说小可爱。

一篇文章送给大家,也是告诫自己,不要以 DRY 之名,发明低代码 DSL 去残害你的同事 - 知乎 (zhihu.com)

我理想中的低代码开发

我们造出各种 xxx-form,xxx-table 无非两个原因:CURD 的代码写吐了,天天重复没有技术含量的体力活;看了别人开源的也想自己写一个。

代码生成器

针对第一个原因,我们可以遵循重复的工作模板化,工具化的原则,把重复的 CURD 抽离成代码模板,然后写一个代码生成工具去生成代码。

19年的时候我就写了这么个代码生成器 使用 Node.js 写一个代码生成器 - 掘金 (juejin.cn)

大致原理就是把前后端 CURD 的重复代码抽离成模板,借助模板引擎,模板内可以根据传入的 json 进行各种判断后编译出代码。每次的使用时候,配置好 json,使用 node.js 调用模板引擎进行模板编译,将代码输出到指定目录。代码生成器生成的代码,跟我们手写的 CURD 代码几乎是一样的,往里面填空式的写业务逻辑就行。

node.js 写的代码生成器没有可视化的操作,每次生成代码都需要手动配置 json,如果一个 CURD 页面查询条件有十几个字段,table 里也有十几个字段,json 写起来也很费事。

为了代码生成器可视化,专门研究了 vue ui 和 umi ui 的实现原理。 机缘巧合之下又了解到了 vscode 的插件开发,通过 demo 实践发现在 vscode 里实现代码生成器可视化会更加简单,而且 vscode 的插件里还可以加入更多提效的功能。

vscode 插件

插件读取项目下的指定目录内的代码模板,显示到页面上

imagen.png

某个具体的代码模板是这样的

imagen.png

imagen.png

写 CURD 页面的时候,选择相应的模板,进入可视化配置界面

imagen.png

Schema 表单,是用低代码框架生成的(用魔法制造魔法),目前支持 form-render,formily,amis,也就是每个代码模板可以根据需要配置使用不同的低代码框架,然后配置对应框架的 schema 就可以生成相应的 Schema 表单。

通过配置 Schema 表单,可以生成模板数据

imagen.png

imagen.png

之后就是使用模板引擎进行编译生成代码了。

相比手动配置 json,通过低代码框架生成可视化表单进而生成 json 会更加便捷,而且可视化表单可以清楚的描述每一个表单项配置的作用。

尽管可视化表单的方式已经很方便了,但是一个个表单手动去填的话也是个没有技术含量的体力活,秉着能造轮子实现就绝不动手的原则,加入了几个实用的小功能:

  • Ask ChatGPT: 在模板配置中预置 Prompt,将模板数据中的中文 key 翻译成应为英文,在填表单的时候就可以全部使用中文了,解决了变量命名的难题。我在 vscode 插件里接入了 ChatGPT,解决了代码变量命名的难题 - 掘金 (juejin.cn)
  • 执行脚本设置模板数据:目前用法是 - 用 ocr 识别出设计稿或者原型中的文字,将文字传递给模板中配置的脚本处理,脚本里根据规则重新生成模板数据并返回,这样减去了一部分配置表单的工作量。
  • 拉取 YAPI 接口定义生成模板数据。

插件内可视化拖拽布局

Esta función aún no se ha implementado. La idea es implementar una interfaz de diseño visual de arrastrar y soltar como amis y formily, y finalmente generar una pieza de datos json. Estos datos json son los datos de la plantilla, y el motor de plantillas compila los código basado en los datos json.

Lo anterior es la forma de mi herramienta ideal de desarrollo de código bajo, y el producto de aterrizaje es código bajo - Visual Studio Marketplace

encima

A diferencia de los marcos de trabajo de código bajo, que son muy intrusivos para el proyecto, puede elegir usar herramientas de desarrollo de código bajo en cualquier momento y en cualquier lugar, y no se ve afectado por el marco técnico utilizado en el proyecto, siempre que pueda extraer plantillas repetitivas. .

A medida que avanza la tecnología, las herramientas de código bajo pueden agregar características más interesantes sin ningún impacto en el proyecto.

Supongo que te gusta

Origin juejin.im/post/7248207744086638629
Recomendado
Clasificación