基于 DSL 的前端动态架构设计

创作时间:

作者:

@小白创作中心

基于 DSL 的前端动态架构设计

引用

来源

https://juejin.cn/post/7482671750208946176

在现代前端开发中，随着业务需求的日益复杂，我们常常需要面对高度动态化的需求，例如动态表单、动态表格、可配置的搜索栏等。这些需求如果采用传统的硬编码方式开发，不仅开发成本高、维护难度大，而且扩展性较差。因此，DSL（Domain Specific Language，领域特定语言）逐渐成为前端架构设计的重要手段。

程序员现状

一般我们拿到一个需求后，往往就是按照需求直接开始开发工作，等下次接到新需求的时候再次重新开发，而我们日常接触的场景 70%-80% 基本都是重复的，所以我们所做的工作大多只是把现有的公用组件组合成一个页面，从而一直进行着重复的工作。

程序员进阶

进行一段时间后，我们会思考怎么开始能够“偷懒一点”，所以我们开始尝试在外层做一个配置，能够根据配置解析出我们需要的组件。这种配置也只是基于局部的页面进行封装，等下次再有需求的时候我们还是需要再进行一些重复的工作。

借助 DSL

而借助 DSL，我们可以通过一份配置，动态解析出我们需要的组件，与上一步的区别在于我们只需要维护一份配置，以整体模块的形式进行分析，通过不断完善我们领域模型，进而适配更多的相似场景，减少重复开发工作。

DSL 是什么？

DSL（Domain-Specific Language，领域特定语言）是一种专门为特定领域设计的编程语言或描述语言，它不同于通用编程语言（如 JavaScript、Python），而是用于解决特定领域的问题，具有简洁、高效、易维护的特点。

DSL 的特点

专注于特定领域：不像 JavaScript、Python 这样通用的语言，DSL 只关注特定业务，如数据库查询、前端 UI 生成、数据处理等。
简洁性：相比通用语言，DSL 更加直观，降低了代码的复杂度。
易维护性：由于 DSL 是高度结构化的，维护 DSL 代码通常比维护通用代码更简单。
可读性强：DSL 贴近业务语言，使得非开发人员（如产品经理、数据分析师）也能理解和使用。

DSL 在前端的作用

DSL 主要用于描述 UI 组件结构、页面数据结构以及交互逻辑，使得前端可以通过解析 DSL 配置数据来动态生成页面，而不需要手写大量冗余的代码。在前端，DSL 主要应用于以下几个方面：

动态表单：基于 DSL 定义表单结构，前端解析后自动生成表单组件。
动态表格：后端返回表格结构，前端渲染对应的列、数据、操作按钮等。
可配置搜索栏：允许用户通过 DSL 配置搜索项，如文本框、日期选择器等。
组件解析与复用：基于 DSL，前端可以定义通用的组件解析器，实现组件的复用和动态挂载。

DSL 解析架构设计

1. 组件仓库（Component Repository）

组件仓库包含了所有基础 UI 组件，如 schema-table、schema-form、schema-search-bar、header-container 等。这些组件可通过 DSL 进行动态组合，形成不同的页面布局。

2. DSL 解析流程

DSL 解析的核心流程如下：

DSL 配置解析：前端接收到 DSL 数据后，解析 JSON 结构，提取各个 UI 组件的配置项。
组件映射：根据 DSL 解析得到的组件配置，匹配到对应的前端组件仓库中的组件。
动态渲染：将解析后的组件按照 DSL 定义的层级关系进行挂载，形成最终的页面。
事件绑定：解析交互逻辑，例如按钮点击、表单提交、搜索触发等。

3. BFF 服务器（Backend for Frontend）

BFF（Backend for Frontend）是一种后端架构模式，它专门为前端应用提供定制化的 API 层，弥补前端直接调用通用后端服务（如微服务）时的不足，优化数据传输和交互方式。

BFF 作为前端和后端之间的中间层，提供以下功能：

数据聚合：将多个微服务的数据进行整合，只返回前端需要的数据。
请求优化：减少 API 请求次数，合并多个后端 API 调用，提高性能。
格式转换：将后端的原始数据转换为前端更易用的格式。
权限控制：在 BFF 层管理前端用户权限，避免暴露过多后端 API。
缓存：减少不必要的后端请求，提高页面加载速度。

DSL 在前端的数据流解析

我们可以看到前端的数据解析流程：

程序员编写 DSL 配置，例如：

{
    "schema": {
        "type": "object",
        "properties": {
            "product_id": {
                "type": "string",
                "label": "商品ID",
                "tableOption": {},
                "searchOption": {},
                "comOption": {}
            }
        },
        "tableConfig": {
            "buttons": ["详情", "修改", "删除"]
        },
        "searchConfig": {},
        "comConfig": {}
    }
}