干货 | 提升前端开发效率，携程机票定制代码生成器实践

作者简介

Zilin Wang，资深前端开发工程师，擅长前端打杂，专注于Remix、Radix UI、Haskell等领域。

Sheila Dai，资深前端开发工程师，关注前端性能优化、前端智能化。

在日常的研发工作中，编写前端界面结构占据了一部分工作量。很多UI组件都存在共性，如何减少编写UI界面的开发时间，以及提取公用的前端组件，从而达到提升研发效能的目的，是我们的重要课题。

在《前端智能化探索，骨架屏低代码自动生成方案实践》中，我们曾经探索过一种自动生成骨架屏代码的方案，在此基础上，我们设计了一套代码生成器的定制流程，到达可以定制任意目的代码的效果。本文将围绕视觉稿生成任意代码，探讨代码生成器的原理与细节，最后是落地的效果展示。

一、背景

骨架屏代码自动生成，作为一个最小 MVP (Minimum Viable Product)，验证了视觉稿自动生成代码的可行性与实用性。

那么，除了高度重复性质的骨架屏以外，还能够实现哪些通用组件？甚至能不能实现应用的业务组件？

如图是视觉稿生成代码的粗略步骤，我们可以看到，在提取视觉稿信息后使用通用算法，得到中间代码后，可以生成我们的目的代码。在这个步骤中，通过编辑中间代码，我们可以自动生成不同的目的代码。

我们的预期则是把这一步骤，交付给业务研发自己来实现，通过在 D2C 平台上插入不同的代码生成器，实时自动生成需要的目的代码。

在整个页面的转换结果上，页面上的每个组件都可以通过选择不同的代码生成器来得到相应的结果。

二、问题分析

本方案是在骨架屏探索成果上的拓展设计，我们面临的问题主要有以下三个：

1）平台角度：如何让生成器可高度定制？

我们首先需要解决的问题，是让业务研发可以自行定义代码生成器。那么我们需要把中间代码层从封闭的平台中剥离出来，变成一个开放的插件入口。

2）生成器作者角度：如何快速上手编写？

虽然针对一个指定目标代码结果的生成器，只需要一次中间代码的编写，即可作为一个公开插件在平台上提供给其他研发进行使用。但这个中间代码的编写过程依然存在一定的门槛，会让想要使用的人望而却步。我们需要降低这个门槛，让业务研发可以随时发布或者调整自己的代码生成器。

3）普通使用者角度：如何零成本使用已有生成器？

如果平台上提供的生成器，已经满足使用者的需求了，那么他可以在不学习相关知识的前提下进行一键生成代码使用。除此之外，我们需要在平台上新增一些功能，以便让使用者在这个过程中可以更加顺畅地进行预期的自动代码生成。

三、解决方案

为了解决上文提到的三个问题，我们从三个方向去解决这些问题：

• 中间代码插件化

• 生成器编写模版化

• D2C 平台优化

3.1 中间代码插件化

在自动生成代码的流程中，我们需要把生成器这部分从封闭的平台中剥离出来，提供给业务研发进行自研。我们主要借助了 UIDL （Universal Interface Definition Language）结构，依据这个 UI 层面的数据结构解析得到我们需要的目的代码内容。

1 ) UIDL 简介

UIDL，即通用界面定义语言，一种用于描述 Web、移动和桌面应用程序用户界面的通用语言，是 teleport 对于 UI 描述的一种定义规范。UIDL是 DSL（Domain Specific Language，解决特定领域问题的语言） 的子集。它与平台无关，可以应用于任何平台或者应用程序。

使用 UIDL 的主要目的就是将用户界面描述成一种机器可读的格式，以帮助开发人员更加高效地构建、测试和维护用户界面。UIDL具体定义内容可以参考官方文档，这里给出一个简单的示例：

{
  "name": "Badge",
  "propDefinitions": {
    "count": {
      "type": "number"
    }
  },
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "attrs": {