美团跨端一体化富文本管理技术实践

在这种情况下，如果将一些功能相对简单、需求变化频繁的页面直接交给产品或运营商通过平台实现，能否在一定程度上减少产品与开发上减少？

二、背景

当然，美团也不例外。近年来，美团家居业务集团（包括美团外卖、美团配送、闪购、医药、集团商品等）各业务稳步发展，业务前端对接运营团队近几十，每个运营团队有不同的运营规则，这些规则有一些微妙的风格差异，规则内容将随着运营季节、节日、地理位置等变化更新。具体来说，这些需求有以下特点：

1. 需求量大：业务稳步发展，业务需求叠加，甚至部分业务呈指数级增长，业务方向涉及一些业务规则、信息通知、协议文件、规则介绍等需求。

2. 变更频繁：面对市场监管和法律事务的要求，以及新业务调整等因素的影响，将涉及需求的频繁变化，如一些业务FAQ、产品介绍、协议文件、业务规则、系统更新日志等页面需要快速响应和及时上线。

3. 复杂度低：这些页面没有复杂的交互逻辑。如果这些简单的页面可以交给操作/产品，开发人员可以有更多的时间研发复杂的功能。

4. 时效性高：临时业务需求量大，生命周期短，具有定期下线、定期上线的特点。

基于上述特点，为了提高研发效率，美团医药技术部开始建设跨端一体化富文管理平台，我希望提供一个生产和研究计划来解决这一类别的问题。然而，该部门的最初目标是开发一套有效的工具，解决大量静态页面的生产和发布问题，如帮助文档、协议页面、信息通知和规则说明，使产品和运营学生能够使用所见即所得的方式自主完成静态页面的制作和发布，从而缩短沟通成本和研发成本。

然而，随着越来越多的业务部门开始咨询和使用该平台，我们不断改进和扩展许多功能。经过多次版本的设计和迭代开发，该平台被命名为Page-佩奇，并注册为美团内部的公共服务，开始为美团内更多的学生提供更好的使用体验。

本文将系统介绍Page-佩奇平台的定位、设计理念、实现原则和成果。我们也希望这些实践经验和总结能给更多的学生带来一些灵感和思考。

三、跨端一体化富文本管理解决方案

3.1 平台定位

我们希望将Page-佩奇打造了一个为产品、运营、开发等用户提供快速一站式网页发布的生产研究工作台，这是该平台的定位。

• 对于产品运营，他们可以可视化创建或修改一些活动描述、协议和新闻文章，不需要开发日程安排，节省繁琐的过程，如向开发二次传输新闻，也不需要等待长时间的发布，从而实现可视化页面的灵活快速发布和管理。

• 对于开发学生来说，他们可以在线编写代码，并实现秒级在线发布，并支持ES 6、JavaScript 、Less、CSS语法，我们还提供基本的工具、图表库等，可以生成各种页面。帮助学生快速实现数据图表显示、设计特定风格、完成各种交互逻辑等需求。

• 对于项目管理者来说，他们可以清楚地看到整个需求流通状态和开发日志信息，为运营管理提供强大的起点。

一般来讲，传统开发流程是这样的：首先产品提出需求，然后召集研发评审，最后研发同学开发并且部署上线；当需求上线之后，如果有问题需要反馈，产品再找研发同学进行沟通并修复，这种开发流程也是目前互联网公司比较常见的开发流程。

而美团Page-佩奇平台的开发过程是：首先，产品学生提出需求，然后自己Page平台编辑发布上线。当需求上线后出现问题需要反馈时，可以直接联系产品学生，通常可以自行修复。如果需求需要定制，或者需要做一些复杂的逻辑处理，让R&D人员配合在平台上开发发布。

简单之，对于功能相对简单、需求变化频繁的页面，如果采用传统的开发流程，将增加生产、研究、沟通和研发安排的成本。因此，传统方案主要适用于功能复杂的需求。Page-佩奇平台的开发过程不适用于功能复杂的需求，特别适用于功能相对简单、需求变化频繁的页面需求。

综上所述，可以看出，这两个开发过程实际上起着互补的作用。如果一起使用，不仅可以减少工作量，还可以降低成本，提高效率。

3.2 设计思路

我们最初的设计Page-佩奇平台的初衷其实很简单。为了通过富文本编辑器快速制作和发布网页，为产品和运营提供工具。然而，在使用过程中，许多缺陷开始慢慢暴露，大致存在以下问题：

1. 简单的富文本编辑器不能满足所需的页面效果，该怎么办？

2. 如果能导入想要的模板，会更友好吗？

3. 如何查看页面的访问数据？如何监控页面的性能？

4. 发布的页面有安全风险吗？

因此，我们对这些问题进行了一些思考和研究：

• 当富文本编辑器不能满足想要实现的效果时，可以引入WebIDE编辑器，可以让研发同学再二次编辑进行实现。

• 如果一个系统想让用户使用高效方便，就需要改善其周边生态。需要配备完善的模板材料和材料供用户灵活选择。

• 如果用户想了解页面的运行，页面运行的性能数据和访问数据也是必不可少的。

• 假如发表的内容言论不当，就会造成不可控的法律风险，因此内容风险审查也是必不可少的。

实现一个功能很容易，但要实现一个相对完美的功能，你必须努力工作，思考和研究更多。因此，围绕这些问题，我们不断探索和扩展一系列功能：

1. 富文本编辑：强大而简单的可视化编辑器使所有操作简单、直观。产品学生可以通过编辑器独立创建和编辑网页。即使没有程序开发经验，他们也可以通过富文本编辑器随意操作，以达到预期的效果，最终实现一键快速发布和在线。

2. WebIDE：定制需求，如与客户端和后端进行一些通信和请求需求，以及为产品创建HTML二次加工需求可以基于WebIDE通过JavaScript实现代码。有专业开发经验的学生也可以选择通过前端框架jQuery、Vue，Echarts或者工具库Lodash、Axios实现在线编辑代码。

3. 页面管理：管理页面灵活方便。您可以查看、编辑、授权、离线、版本比较、操作日志、回滚等有权限的文档，并提供方便的文档搜索功能。

4. 模板市场：丰富多样的网页模板，简单而个性化。模板市场提供丰富的页面模板，您可以选择使用自己的模板快速创建网页，每个页面都可以作为自己的模板，然后基于此模板，您可以随时添加个性化的操作。

5. 物料平台：提供基础Utils、Echart、Vue、jQuery等材料，方便基于产品页面的二次开发。

6. 多平台跨端接入：通过通信高效快捷地访问业务系统。SDK，其他系统可以快速访问Page-佩奇平台。HTTP、Thrift方式的开放API支持客户端和后端调用开放供您选择API。

7. 内容风险审计：严格高效的审计机制。接入美团内部风险审计公共服务，快速审计发布的风险内容，防止误操作造成不可控的法律风险。

8. 数据大盘：提供页面数据监控，帮助您始终掌握流量趋势。访问美团内部的一站式数据分析平台，帮助您安全、快速、高效地掌握页面的各种监控数据。

9. 权限管理：创建的每个页面都有相对独立的权限，只有授权的人才能查看和操作页面。

10. 业务监控：提供页面级别JavaScript资源加载成功率等数据错误，便于在线问题的开发、调查和解决。

功能流程图如下：

3.3 实现原理

3.3.1 基础服务

Page-佩奇平台的基础服务有四个部分，包括物料服务、编译服务、产品赋能、扩展服务。

3.3.2 核心架构

Page-佩奇平台核心架构主要包含页面基础配置层、页面组装层以及页面生成层。我们通过Vuex全局状态对数据进行维护。

• 页面基础配置层主要提供生成页面的各种能力，包括富文本的各种操作能力、编辑源码（HTML、CSS、JavaScript）的能力、自定义域名配置、适配的容器（PC/H5）、发布环境等。

• 页面组装层则会基于基础配置层所提供的的能力，实现页面的自由编辑，承载大量的交互逻辑，用户的所有操作都在这一层进行。

  • 业务PV和UV埋点，错误统计，访问成功率上报。

  • 自动适配PC和移动端样式。

  • 内网页面显示外网不可访问标签。

• 页面生成层则需要根据组装后的配置进行解析和预处理、编译等操作，最终生成HTML、CSS、JavaScript渲染到网页当中。

3.3.3 关键流程

如上图7所示，平台的核心流程主要包含页面创建之后的页面预览、编译服务、生成页面。

• 页面预览：创建、编辑之后的页面，将会根据内容进行页面重组，对样式和JavaScript进行预编译之后，对文本+JavaScript+CSS进行组装，生成HTML代码块，然后将代码块转换成Blob URL，最终以iframe的方式预览页面。

• 编译服务：文件树状结构和代码发送请求到后端接口，基于Webpack将Less编译成CSS，ES 6语法编译成ES 5。通用物料使用CDN进行引入，不再进行二次编译。

• 生成页面：当创建、编辑之后的页面进行发布时，服务端将会进行代码质量检测、内容安全审查、代码质量检测、单元测试、上传对象存储平台、同步CDN检测，最终生成页面链接进行访问。

3.3.4 多平台接入

Page-佩奇平台也可以作为一个完善的富文本编辑器供业务系统使用，支持内嵌到其他系统内。作为消息发布等功能承载，减少重复的开发工作，同时我们配备完善的SDK供大家选择使用。通过Page-SDK可以直接触发Page平台发布、管理等操作，具体的流程如下图所示：

3.3.5 Open API

在使用Page-佩奇平台的时候，美团内部一些业务方提出想要通过Page-佩奇平台进行页面的发布，同时想要拿到发布的内容做一些自定义的处理。于是，我们提供了Open API开放能力，支持以HTTP和Thrift两种方式进行调用。下面主要讲一下Thrift API实现的思路，首先我们先了解下Thrift整体流程：

Thrift的主要使用过程如下：

1. 服务端预先编写接口定义语言 IDL（Interface Definition Language）文件定义接口。

2. 使用Thrift提供的编译器，基于IDL编译出服务语言对应的接口文件。

3. 被调用服务完成服务注册，调用发起服务完成服务发现。

4. 采用统一传输协议进行服务调用与数据传输。

下面具体讲讲，Node语言是如何实现和其他服务语言实现调用的。由于我们的服务使用的Node语言，因此我们的Node服务就充当了服务端的角色，而其他语言（Java等）调用就充当了客户端的角色。

• 生成文件：由服务端定义IDL接口描述文件，然后基于IDL文件转换为对应语言的代码文件，由于我们用的是Node语言，所以转换成JavaScript文件。

• 服务端启动服务：引入生成的JavaScript文件，解析接口、处理接口、启动并监听服务。

• 服务注册：通过服务器内置的“服务治理代理”，将服务注册到美团内部的服务注册路由中心（也就是命名服务），让服务可被调用方发现。

• 数据传输：被调用时，根据“服务治理服务”协议序列化和反序列化，与其他服务进行数据传输。

目前，美团内部已经有相对成熟的NPM包服务，已经帮我们实现了服务注册、数据传输、服务发现和获取流程。客户端如果想调用我们所提供的的Open API开放能力，首先申请AppKey，然后选择使用Thrift方式或者HTTP的方式，按照所要求的参数进行请求调用即可。

3.4 方案实践

3.4.1 H5协议

能力：富文本编辑。

描述：提供富文本可视化编辑，产品和运营无需前端就可以发布和二次编辑页面。

场景：文本协议，消息通知，产品FAQ。

具体案例：

3.4.2 业务自定义渲染

能力：开放API（Thirft + HTTP）。

描述：提供开放API，支持业务自定义和样式渲染到业务系统，同时解决了iframe体验问题。

场景：客户端、后端、小程序的同学，可根据API渲染文案，实现动态化管理富文本信息。

具体案例：

小程序使用组件、Vue使用v-html指令实现动态化渲染商品选择说明。

{
    "code": 0,
    "data": {
      "tag": "苹果,标准",
      "title": "如何挑选苹果",
      "html": "<h1>如何挑选苹果</h1>><p>以下标准可供消费者参考</p><ul><li>酸甜</li><li>硬度</li></ul>",
      "css": "",
      "js": "",
      "file": {}
    },
    "msg": "success"
}

3.4.3 投放需求

能力：WebIDE代码编辑。

描述：开发基于WebIDE代码开发工作，基于渠道和环境修改下载链接，能够做到分钟级支撑。

场景：根据产品创建静态页面进行逻辑和样式开发。

具体案例：

var ua = window.navigator.userAgent
    var URL_MAP = {
        ios: 'https://apps.apple.com/cn/app/xxx',
        android: 'xxx.apk',
        ios_dpmerchant: 'itms-apps://itunes.apple.com/cn/app/xxx'
    }
    
    if (ua.match(/android/i)) location.href = URL_MAP.android
    if (ua.match(/(ipad|iphone|ipod).*os\s([\d_]+)/i)) {
        if (/xx\/com\.xxx\.xx\.mobile/.test(ua)) {
            location.href = URL_MAP.ios_dpmerchant
        } else {
            location.href = URL_MAP.ios
        }
    }

3.4.4 客户端通信中间页

能力：WebIDE代码编辑 + 物料平台。

描述：通过物料平台，引入公司客户端桥SDK，可以快速完成客户端通信需求。方便前端调试客户端基础桥功能。

场景：客户端跳转，通信中间页。

具体案例：

// 业务伪代码
    XXX.ready(() => {
        XXX.sendMessage({
           sign: true,
            params: {
                id: window.URL
            }
        }, () => {
            console.error('通信成功')
        }, () => {
            console.error('通信失败')
        })
    })

3.4.5 业务系统内嵌Page

能力：提供胶水层Page-SDK，连接业务系统和Page。

描述：业务系统与Page-佩奇平台可进行通信，业务系统可调用Page发布、预览、编辑等功能，Page可返回业务系统页面链接、内容、权限等信息。减少重复前后端工作，提升研发效率。

场景：前端富文本信息渲染，后端富文本信息管理后台。

具体案例：

3.5 业务成绩

截止目前数据统计，Page-佩奇平台生成网页5000多个，编辑页面次数16000多次，累计页面访问PV超过8260万。现在，美团已经有十多个部门和三十多条业务线接入并使用了Page-佩奇平台。

四、总结与展望

富文本编辑器和WebIDE不仅是复杂的系统，而且还是比较热门的研究方向。特别是在和美团的基建结合之后，能够解决团队内部很多效率和质量问题。这套系统还提供了语法智能提示、Diff对比、前置检测、命令行调试等功能，不仅要关注业务发布出去页面的稳定性和质量，更要有内置的一系列研发插件，主动帮助研发提高代码质量，降低不必要的错误。

经过长期的技术和业务演进，Page-佩奇平台已经能够有效地帮助研发人员大幅提升开发效率，具备初级的Design To Code能力，但是仍有许多业务场景值得去我们探索。我们也期待优秀的你参与进来，一起共同建设。

• WebIDE融合：完善基础设施建设和功能需求，更好地支持Vue、React、ES 6、TS、Less语法，预览模式采用浏览器编译，能有效地提高预览的速度，发布使用后端编译的模式。

• 研发流程链路：针对代码进行有效评估，包括ESlint、代码重复率、智能提示是否可以三方库替代。出具开发代码质量、业务上线的质量报告。

• 综合研发平台：减少团队同学了解整体基建的时间成本，内置了监控、性能、任务管理等功能，提升业务开发效率。建设自动化日报、周报系统，降低非开发工作量占比。

• 物料开放能力：接入公共组件平台，沉淀更多的物料，快速满足产品更多样化的需求。

五、作者简介

高瞻、宇立、肖莹、浩畅，来自美团医药终端团队。王咏、陈文，来自美团闪购终端团队。

----------  END  ----------

招聘信息

美团医药长期招聘Android、iOS、FE前端工程师，坐标在北京和成都。感兴趣的同学可将简历发送至：sunyuli@meituan.com（邮件主题请注明：美团医药终端）。

也许你还想看

  | 美团App页面视图可测性改造实践

  | 设计稿（UI视图）自动生成代码方案的探索

  | 积木Sketch插件进阶开发指南

阅读更多

---

前端 |  算法 | 后端 | 数据

安全 | Android | iOS  | 运维 | 测试