一、前言
| 源码面板 | 变量绑定 | 数据处理 |
|---|---|---|
 |
 |
 |
低代码平台通过可视化编排的方式显著降低了构建基础页面与通用业务逻辑的成本，大量标准场景的开发工作已不再需要手写代码。然而，在低代码平台的实际应用中，仍有许多复杂场景无法单纯依靠低代码配置完成，需要开发者编写原生代码来实现功能，例如在 Lowcode Engine 中涵盖变量和函数设置、事件绑定以及数据源处理等场景。因此，提升低代码平台内编写原生代码的效率同样至关重要，尤其是在开发者需要切换到代码编辑模式时，能否获得与原生开发环境相媲美的体验与效率。本文将深入探讨基于 Lowcode Engine 的低代码平台在提升原生代码编写效率方面的实践，包括"变量面板"、"编辑器优化"、"第三方依赖"和"大模型应用"等，通过这些功能和优化让开发者在必须写代码时依然能火力全开。
二、变量面板
在 Lowcode Engine 中，所有公共代码均集中于源码面板，涵盖全局变量、生命周期方法以及自定义函数等关键内容。然而，当业务逻辑变得复杂时，源码面板的内容往往会变得极为庞大。这不仅导致代码冗长、难以阅读，还可能对页面性能产生负面影响。此外，当开发者尝试通过全局搜索关键词（如"state"）来查找特定代码时，相关结果可能会分散在 state、method 和 computed 等不同区域，使得目标代码难以被快速定位，极大地降低了开发效率。为解决这一问题，我们借鉴了 Retool 的设计理念，对源码面板进行了优化，将其重构为变量面板。通过这种方式，我们将全局内容拆分为更细的粒度进行管理，使得开发者可以在代码面板中仅编写最小粒度的内容。这种优化不仅让代码结构更加清晰，还显著提升了开发者在使用过程中的体验，能够更快速地找到所需的变量和方法，从而提高开发效率并优化整体开发流程。
三、编辑器优化
Lowcode Engine 中的代码编辑器采用 Monaco Editor 作为核心实现，与 VSCode、Cursor、WebStorm 等专业级 IDE 相比，Monaco Editor 在保持轻量化的同时，也不可避免地在功能完整性和使用体验上存在一定局限，这些问题在一定程度上影响了我们的开发效率和使用体验，例如：
- 上下文关联缺失：代码编辑器无法关联自定义的变量和函数，缺乏上下文代码提示，同时依赖开发人员手动输入，易出现拼写错误。
- 查看自定义内容繁琐：开发时想查看自定义的函数或变量的话需要到源码面板定位到具体的位置查看，严重影响了整体开发的流畅性。
- 语法校验提示不足：代码编辑器对基础语法错误的提示能力较弱，且提示内容分散，极易被忽略，增加了调试成本和线上问题的风险。
为了解决这些问题，我们先进行了业界调研，我们选择了业界第一梯队的低码产品 Retool 和社区开源热门（Star 35k）的低码产品 AppSmith 和 ToolJet 作为调研对象，深入体验它们在代码编辑器方面的优秀实践。这些低代码产品中的代码编辑器普遍支持"上下文代码提示、鼠标悬浮详情提示、代码点击快速跳转、代码语法错误提示"等功能，这些功能较好地支持了代码编写效率的提高和代码编写错误的减少。
基于 Monaco Editor 对外开放的 API，代码编辑器共计扩展了 5 大自定义功能：上下文代码提示、鼠标悬浮详情提示、代码点击快速跳转、快捷键代码格式化以及代码语法错误提示。这些功能的实现旨在提高代码编写效率，同时减少错误，从而优化开发体验。
四、第三方依赖
| Retool | 网易Tango |
|---|---|
 |
 |
随着低代码平台所开发页面功能复杂度的不断增加，开发者对平台的扩展性和开发效率提出了更高的要求。在实际开发场景中，平台内置的物料资源往往难以满足日益复杂的业务需求。以我们常用的第三方库 lodash 和 dayjs 等基础工具为例，开发者在使用过程中常常不得不采用原生代码的方式重新实现这些已有成熟解决方案的功能。这不仅增加了代码的冗余度，还显著降低了开发效率。因此，迫切需要设计一套完善的第三方静态资源管理机制。通过这种机制，我们可以在确保安全可控的前提下，高效引入外部依赖。这不仅能保持平台的稳定性，还能显著提升开发者的功能扩展能力和开发体验，从而更好地满足复杂业务场景下的开发需求。
我们第三方依赖协议以低代码引擎资产包协议为基础进行扩展，在packagesConfig字段中进行扩展：
| 字段 | 字段描述 | 字段类型 | 是否新增 |
|---|---|---|---|
| isCustomDep | 是否第三方依赖 | Boolean | ✅ |
| package | 资源包名 | String | ❌ |
| library | 全局变量名 | String | ❌ |
| version | 版本号 | String | ❌ |
| urls | 资源CDN地址，支持多个资源，不区分 JS 资源和 CSS 资源 | String[] | ❌ |
五、大模型应用
随着大模型技术的迅猛发展，将其集成到低代码平台中已成为一种创新趋势。通过这种集成，开发者能够充分利用大模型的强大智能能力，从而显著提升开发效率和应用质量。大模型不仅可以生成和优化代码片段，还能根据开发者以自然语言描述的需求，快速生成相应的代码模板。开发者仅需对这些模板进行少量修改和调整，即可完成代码编写。这种智能代码生成方式不仅大幅减少了开发人员的工作量，还提高了代码的质量和一致性。此外，大模型还可作为智能辅助工具，为开发者提供全方位的技术支持。例如，当开发者面临技术难题时，他们可以通过与大模型的交互，快速获取解决方案建议、调试技巧或代码示例。大模型还能实时分析代码，提供优化建议和潜在问题的预警，帮助开发者及时发现并解决问题，从而进一步提升代码质量。
六、总结
对于低代码平台，企业级应用的复杂性依然需要开发人员编写原生代码来补充可视化配置的不足。通过"变量面板"、"编辑器优化"、"第三方依赖"和"大模型应用"等实践方法，基于 Lowcode Engine 的低码平台能够显著提升原生代码的编写效率，为开发者提供更强大的支持。这些优化策略不仅减少了编码时间和调试成本，还确保开发者在面对必须写代码的场景时，依然能够保持高效、流畅的开发体验。