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

为了缩小产品和前端开发人员之间的矛盾，一直降本提效，美团医药技术部构建了跨端一体化富文本治理平台 Page- 佩奇。本文零碎介绍了该平台的定位、设计思路、实现原理以及获得的功效。心愿这些实战经验与总结，能给大家带来一些启发或帮忙。

一、引言

在互联网圈，开发和产品经理之间相爱相杀的故事，置信大家都有所耳闻。归根结底，往往都是从简略的改需要开始，而后你来我往、互不相让，接着吵架斗嘴，最初导致矛盾一直降级，甚至带来比较严重的结果。

在这种背景下，如果把一些性能绝对简略的、需要变动比拟频繁的页面，间接交给产品或者经营本人去通过平台实现，是不是就能够从肯定水平上缩小产品和开发人员之间的矛盾呢？

二、背景

当然上述的状况，美团也不例外。近些年，美团到家事业群（包含美团外卖、美团配送、闪购、医药、团好货等）的各个业务稳步发展，业务前端对接的经营团队有近几十个，每个经营团队又有不同的经营规定，这些规定还存在一些轻微的款式差异，同时规定内容还会随着经营节令、节日、地理位置等进行变动和更新。这些需要具体来说有以下几个特点：

1. 需求量大：业务稳步发展，业务需要一直叠加，甚至局部业务呈指数级增长，且业务方向波及到一些业务规定、音讯告诉、协定文档、规定介绍等需要。
2. 变更频繁：面对市场监管和法务的要求，以及新业务调整等因素的影响，会波及到需要的频繁变更，像一些业务 FAQ、产品介绍、协定文档、业务规定、零碎更新日志等页面，须要做到疾速响应和及时上线。
3. 复杂度低：这些页面没有简单的交互逻辑，如果能把这些简略的页面交给经营 / 产品去实现，开发人员就能有更多的工夫去进行简单性能的研发。
4. 时效性高：临时性业务需要较多，且生命周期较短，具备定期下线和周期性上线等特点。

基于以上特点，为了进步研发效率，美团医药技术部开始构建了一个 跨端一体化富文本治理平台 ，心愿提供解决这一大类问题的产研计划。不过，部门最后的指标是开发一套提效工具，解决大量诸如帮忙文档、协定页、音讯告诉、规定阐明等动态页面的生产与公布问题，让产品和经营同学可能以 所见即所得 的形式 自主 实现动态页面制作与公布，进而缩短沟通老本和研发老本。

然而，随着越来越多业务部门开始征询并应用这个平台，咱们后续不断完善并裁减了很多的性能。通过屡次版本的设计和迭代开发后，将该平台命名为Page- 佩奇，并且注册成为美团外部的公共服务，开始为美团外部更多同学提供更好的应用体验。

本文将系统地介绍 Page- 佩奇平台的定位、设计思路、实现原理及取得成效。咱们也心愿这些实战经验与总结，能给更多同学带来一些启发和思考。

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

3.1 平台定位

咱们心愿将 Page- 佩奇打造成一款为产品、经营、开发等用户提供疾速一站式公布网页的产研工作台，这是对该平台的一个定位。

• 对产品经营而言，他们可能 可视化 地去创立或批改一些流动阐明、协定类、音讯类的文章，无需开发排期，省去向开发二次传递音讯等繁琐的流程，也无需期待漫长的公布工夫，从而达到灵便疾速地进行可视化页面的公布与治理。
• 对开发同学而言，他们可能 在线编写代码 ，并实现 秒级 的公布上线，并且反对 ES 6、JavaScript、Less、CSS 语法，咱们还提供了根底的工具、图表库等，可能生成丰盛多样的页面。帮忙开发同学疾速实现数据图表展现，设计特定款式，实现各种交互逻辑等需要。
• 对项目管理方而言，他们可能清晰地看到整个需要流转状态和开发日志信息，为经营治理提供弱小的“抓手”。

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

而美团 Page- 佩奇平台的开发流程是：首先产品同学提出需要，而后本人在 Page 平台进行编辑和公布上线，当需要上线之后有问题须要反馈，间接就能触达到产品同学，他们通常可自行进行修复。如果需要须要定制化，或者须要做一些简单的逻辑解决，那么再让研发人员配合在平台上进行开发并公布上线。

简略来说，对那些性能绝对简略、需要变动比拟频繁的页面，如果用传统的开发流程将会减少产研沟通和研发排期老本，因而传统计划次要实用于性能复杂型的需要。而 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 渲染文案，实现动态化治理富文本信息。

具体案例：

小程序应用 <rich-text> 组件、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、代码反复率、智能提醒是否能够三方库代替。出具开发代码品质、业务上线的品质报告。
• 综合研发平台：缩小团队同学理解整体基建的工夫老本，内置了监控、性能、工作治理等性能，晋升业务开发效率。建设自动化日报、周报零碎，升高非开发工作量占比。
• 物料凋谢能力：接入公共组件平台，积淀更多的物料，疾速满足产品更多样化的需要。

五、作者简介

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

六、招聘信息

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

浏览美团技术团队更多技术文章合集

前端 | 算法 | 后端 | 数据 | 平安 | 运维 | iOS | Android | 测试

| 在公众号菜单栏对话框回复【2020 年货】、【2019 年货】、【2018 年货】、【2017 年货】等关键词，可查看美团技术团队历年技术文章合集。

| 本文系美团技术团队出品，著作权归属美团。欢送出于分享和交换等非商业目标转载或应用本文内容，敬请注明“内容转载自美团技术团队”。本文未经许可，不得进行商业性转载或者应用。任何商用行为，请发送邮件至 tech@meituan.com 申请受权。