为减少产品与前端开发人员的冲突，不断降低成本，提高效率，美团医疗技术部构建了跨终端集成富文本管理平台奇怪。本文系统地介绍了该平台的定位、设计思路、实现原理和成果。希望这些实践经验和总结能给大家带来一些启发或帮助。一、简介在互联网圈，相信大家都听过开发者和产品经理相爱相杀的故事。归根结底，往往是从简单的需求变化开始，然后你来我往，互不相让，继而争吵斗嘴，最后导致矛盾不断升级，甚至带来更严重的后果。在此背景下，如果将一些功能相对简单、需求变化频繁的页面，直接交给产品或运营本身通过平台来实现，是否可以在一定程度上减少产品与开发者之间的矛盾？羊毛布？2.背景当然，上述情况，美团也不例外。近年来，美团到家事业群各项业务（包括美团外卖、美团外卖、闪购、医药、团号货等）稳步发展。团队有不同的操作规则，这些规则之间存在一些细微的风格差异。同时，规则内容会随着运营季节、节日、地理位置等发生变化和更新。具体来说，这些要求具有以下特点：大需求：业务稳步发展，业务需求不断叠加，且甚至有些业务呈指数级增长，业务方向涉及到一些业务规则、消息通知、协议文档、规则介绍等需要。变更频繁：面对市场监管和法律事务的要求，以及新业务调整等因素的影响，会涉及到需求的频繁变更，例如一些业务FAQ、产品介绍、协议文件、业务规则、系统更新日志等，需要快速响应，及时上线。低复杂度：这些页面没有复杂的交互逻辑。如果能够将这些简单的页面交给运营/产品去实现，开发者就可以有更多的时间去开发复杂的功能。时效性高：临时业务需求多，生命周期短，具有定时下线、周期上线的特点。基于以上特点，为提高研发效率，美团医疗技术部开始构建跨终端的一体化富文本管理平台，希望为解决此类问题提供产研解决方案。但部门最初的目标是开发一套提效工具，解决帮助文档、协议页、消息通知、规则说明等大量静态页面的制作和发布问题，让产品和操作学生可以使用他们所看到的就是他们得到的。独立完成静态页面的制作和发布，从而降低沟通成本和研发成本。但是，随着越来越多的业务部门开始咨询和使用这个平台，我们也在不断完善和扩展很多功能。经过多个版本的设计和迭代开发，该平台被命名为Page-Page，并注册为美团内部的公共服务，开始为更多美团学员提供更好的体验。本文将系统介绍Page-Page平台的定位、设计思路、实现原理和成果。也希望这些实践经验和总结能给更多的同学带来一些启发和思考。3.跨终端集成富文本管理解决方案3.1平台定位我们希望将Page-Page打造成产研工作台，为产品、运营、开发等用户提供快速一站式发布网页。一个定位。对于产品运营，他们可以直观地创建或修改一些活动描述、协议、新闻文章，无需开发调度、二次消息传递给开发等繁琐流程，也无需等待漫长的发布时间，从而实现灵活、快速发布和管理可视化页面。针对开发同学，在线编写代码，秒级发布上线，支持ES6、JavaScript、Less、CSS语法。我们还提供基础工具、图表库等，可以生成丰富多样的页面。帮助开发者快速实现数据图表展示，设计特定样式，完成各种交互逻辑等需求。对于项目经理来说，可以清晰的看到整个需求流状态和开发日志信息，为运营管理提供了有力的“把握”。一般来说，传统的开发流程是这样的：首先需要提出产品，然后调用研发评审，最后研发同学开发部署上线；需求上线后，如有问题需要反馈，产品将与研发同学沟通修复。这个发展过程也是目前互联网公司比较普遍的发展过程。美团Page-Page平台的开发流程是：首先产品同学提出需求，然后在Page平台上编辑发布。自己修理。如果需求需要定制化，或者需要做一些复杂的逻辑处理，那就让研发人员在平台上配合开发，发布到线上。简单来说，对于那些功能比较简单，需求变更频繁的页面，使用传统的开发流程会增加产研沟通和研发调度的成本。因此，传统方案主要适用于功能复杂的需求。但是Page平台的开发流程并不适合复杂的功能需求，尤其是功能比较简单，需求变化频繁的页面需求。综上所述，可见这两个发展过程其实起到了相辅相成的作用。如果一起使用，不仅可以减少工作量，还可以达到降低成本，提高效率的目的。3.2设计思路我们设计Page-page平台的初衷其实很简单，就是为产品和运营提供一个工具，通过富文本编辑器快速创建和发布网页。但是在使用的过程中，也逐渐暴露出很多缺陷。大致有以下几个问题：简单的富文本编辑器不能满足想要的页面效果，怎么办？如果我可以导入想要的模板不是更友好吗？如何查看本页面的访问数据？如何监控此页面上的性能问题？发布的页面是否存在安全隐患？因此，我们对这些问题进行了一些思考和研究：当富文本编辑器不能达到预期效果时，可以引入WebIDE编辑器，让研发同学重新编辑来实现。一个系统要想让用户高效、便捷地使用它，就必须完善它的周边生态。需要配备齐全的模板素材和素材，供用户灵活选择。如果用户想了解页面的操作，页面操作的性能数据和访问的数据也是必不可少的。如果发布的内容中存在不当言论，将会造成不可控的法律风险，因此内容风险审查也是必不可少的。实现一个功能很容易，但是要想实现一个比较完整的功能，就必须下功夫，多思考，多研究。因此，围绕这些问题，我们不断挖掘和扩展了一系列功能：富文本编辑：强大简洁的可视化编辑器，让所有操作变得简单直观。产品同学可以通过编辑器独立创建和编辑网页。即使没有程序开发经验，也能通过富文本编辑器随意操作，达到自己想要的效果，最终一键快速发布上线。WebIDE：定制化的需求，比如与客户端和后端的一些通信和请求需求，以及对产品创建的HTML的二次处理需求，都可以通过基于WebIDE的JavaScript代码来实现。有专业开发经验的同学也可以选择通过前端框架jQuery、Vue、Echarts或工具库Lodash、Axios在线编辑代码。页面管理：灵活方便地管理页面。您可以对授权文档进行查看、编辑、授权、下线、版本对比、操作日志、回滚等操作，并提供便捷的文档搜索功能。模板市场：丰富多样的网页模板，简单又个性化。模板市场提供了丰富的页面模板。您可以选择使用自己的模板快速制作网页，每一个发布的页面都可以作为自己的模板。基于此模板，您可以随时添加个性化操作。素材平台：提供基础的Utils、Echart、Vue、jQuery等素材，方便开发产品类页面进行二次代码开发。多平台跨终端接入：高效快速接入业务系统。通过通信SDK，其他系统可以快速接入Page-Page平台。同时支持以HTTP和Thrift形式开放API供大家选择，支持客户端和后端调用开放API。内容风险审核：严谨高效的审核机制。接入美团内部风险审核公共服务，对发布的风险内容进行快速审核，杜绝因误操作导致不可控的法律风险。数据仪表盘：在页面上提供数据监控，帮助您掌握流量趋势。接入美团内部一站式数据分析平台，助您安全、快速、高效掌握页面各项监控数据。权限管理：每个创建的页面都有相对独立的权限，只有被授权的人才能查看和操作该页面。业务监控：提供页面级JavaScript错误、资源加载成功率等数据，方便开发、故障排除和线上问题解决。功能流程图如下：3.3实现原理3.3.1基础服务Page-Page平台基础服务分为素材服务、编译服务、产品赋能、扩展服务四部分。3.3.2核心架构Page-Page平台的核心架构主要包括页面基础配置层、页面组装层和页面生成层。我们通过Vuex全局状态维护数据。页面基础配置层主要提供生成页面的各种能力，包括富文本的各种操作能力、编辑源代码（HTML、CSS、JavaScript）能力、自定义域名配置、适配容器（PC/H5）、发布环境etc.页面组装层将基于基础配置层提供的能力实现页面的自由编辑，承载大量的交互逻辑。所有的用户操作都在这一层进行。业务PV、UV埋点、错误统计、接入成功率上报。自动适配PC和手机风格。内网页面显示无法访问外网的标签。页面生成层需要根据组装好的配置进行解析、预处理、编译等操作，最终生成HTML、CSS、JavaScript渲染到网页中。3.3.3关键流程如上图7所示，平台核心流程主要包括页面创建后的页面预览、编译服务、页面生成。页面预览：创建和编辑页面后，页面将根据内容重新组织。样式和JavaScript预编译后，将文本+JavaScript+CSS组合生成HTML代码块，然后将代码块转换为BlobURL。最后，页面在iframe中预览。编译服务：文件树结构和代码向后端接口发送请求，基于Webpack将Less编译成CSS，将ES6语法编译成ES5。一般素材使用CDN导入，无需二次编译。生成页面：创建编辑好的页面发布后，服务器会进行代码质量检测、内容安全审查、代码质量检测、单元测试、上传对象存储平台、同步CDN检测，最后生成页面链接供访问。3.3.4多平台接入Page-Page平台也可以作为一个完整的业务系统富文本编辑器，支持嵌入到其他系统中。作为消息发布等功能载体，减少了重复的开发工作，我们配备了完整的SDK供大家选择使用。Page-SDK可用于直接触发Page平台发布、管理等操作。具体流程如下图所示：3.3.5OPENAPI页面发布页面，同时想获取发布的内容，做一些自定义处理。为此，我们提供了OpenAPI开放能力，支持HTTP和Thrift两种调用方式。下面主要讲一下ThriftAPI实现的思路。首先了解一下Thrift的整体流程：使用Thrift的主要流程如下：服务端预先编写接口定义语言IDL（InterfaceDefinitionLanguage）文件来定义接口。使用Thrift提供的编译器，根据IDL编译服务语言对应的接口文件。被调用服务完成服务注册，调用发起服务完成服务发现。使用统一的传输协议进行服务调用和数据传输。那么我们就来说说Node语言是如何实现与其他服务语言的调用的。由于我们的服务使用的是Node语言，所以我们的Node服务作为服务端，而来自其他语言（Java等）的调用作为客户端。生成文件：服务端定义IDL接口描述文件，然后根据IDL文件将其转换成对应语言的代码文件。由于我们使用的是Node语言，因此将其转换为JavaScript文件。服务器端启动服务：导入生成的JavaScript文件，解析接口，处理接口，启动和监控服务。服务注册：通过服务端内置的“服务治理代理”，将服务注册到美团内部的服务注册路由中心（即命名服务），从而使服务能够被调用者发现。数据传输：调用时，按照“服务治理服务”协议进行序列化和反序列化，与其他服务进行数据传输。目前美团已经有了比较成熟的npm包服务，帮助我们实现了服务注册、数据传输、服务发现和获取的过程。如果客户端要调用我们提供的OpenAPI能力，首先申请AppKey，然后选择使用Thrift方式或者HTTP方式，根据需要的参数进行请求调用。3.4程序实践3.4.1H5协议能力：富文本编辑。描述：提供富文本可视化编辑，产品和运营无需前端即可发布和二次编辑页面。适用场景：文本协议、消息通知、产品FAQ。具体案例：3.4.2业务自定义渲染能力：开放API（Thirft+HTTP）。描述：提供开放的API，支持对业务系统进行业务定制和样式渲染，解决iframe体验问题。场景：客户端、后台、小程序的同学可以根据API渲染文案，实现富文本信息的动态管理。具体案例：小程序使用 以下标准可供消费者参考Howtopickanapple
","css":"","js":"","file":{}},"msg":"success"}3.4.3交付需求能力：WebIDE代码编辑。说明：开发基于WebIDE代码开发工作，根据渠道和环境修改下载链接，可做到分钟级支持。场景：基于产品创建静态页面，进行逻辑和样式开发。具体情况：varua=window.navigator.userAgentvarURL_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.androidif(ua.match(/(ipad|iphone|ipod).*os\s([\d_]+)/i)){if(/xx\/com\.xxx\.xx\.mobile/.test(ua)){location.href=URL_MAP.ios_dpmerchant}else{位置.href=URL_MAP.ios}}3.4.4客户端通信中页能力：WebIDE代码编辑+素材平台。说明：通过素材平台，引入公司客户端桥接SDK，快速完成客户端通信需求。方便前端调试客户端的基本桥接功能。场景：客户端跳转，通讯中间页面。具体案例：//业务伪代码XXX.ready(()=>{XXX.sendMessage({sign:true,params:{id:window.URL}},()=>{console.error('通信成功')},()=>{console.error('communicationfailed')})})3.4.5业务系统嵌入Page能力：提供胶层Page-SDK连接业务系统和Page。说明：业务系统可以与Page-page平台进行通信。业务系统可以调用Page发布、预览、编辑等功能，Page可以返回业务系统页面链接、内容、权限等信息。减少重复的前后端工作，提高研发效率。场景：前端富文本信息渲染，后端富文本信息管理后台。具体案例：3.5经营成果截至目前统计，Page平台已生成网页5000余个，页面编辑16000余次，累计页面访问PV超过8260万。现在，美团已有10多个部门、30多个业务条线接入并使用Page平台。4.总结与展望富文本编辑器和WebIDE既是复杂的系统，也是比较热门的研究方向。尤其是和美团的基础设施结合之后，可以解决团队内部的很多效率和质量问题。本系统还提供语法智能提示、Diff比对、预检测、命令行调试等功能。不仅需要关注业务发布页面的稳定性和质量，还内置了一系列研发插件，积极帮助研发提升代码质量，减少不必要的错误。经过长期的技术和业务演进，Page-Page平台已经能够有效帮助研发人员大幅提升开发效率，具备初步的DesignToCode能力，但仍有许多业务场景值得探索。我们也期待优秀的你的参与，共建。WebIDE集成：完善基础设施建设和功能需求，更好地支持Vue、React、ES6、TS、Less语法，预览方式采用浏览器编译，可有效提高预览速度，发布方式采用后端编译。研发流程环节：对代码进行有效评估，包括ESlint、代码重复率、智能提示是否可以被第三方库替代。发布有关开发代码质量和业务启动的质量报告。综合研发平台：降低团队成员了解整体基础架构的时间成本，内置监控、性能、任务管理等功能，提升业务开发效率。构建自动化日周报系统，减少非开发工作量占比。素材开放能力：接入公共组件平台，积累更多素材，快速满足更多元化的产品需求。5.作者简介高展、余莉、肖颖、郝畅来自美团点评医疗终端团队。王勇、陈文来自美团闪购终端团队。六、招聘信息美团药业长期招聘Android、iOS、FE前端工程师，坐标在北京和成都。有意向的同学可将简历发送至：sunyuli@meituan.com（邮件主题请注明：美团医疗终端）。阅读更多美团技术团队的技术文章。前端|算法|后端|资料|安全|运维|iOS|2018货]、[2017货]等关键词，可以查看美团技术团队历年技术文章合集。|本文由美团技术团队制作，版权归美团所有。欢迎转载或将本文内容用于分享、交流等非商业用途，转载请注明“内容由美团技术团队转载”。本文未经许可不得转载或用于商业用途。任何商业活动，请发邮件至tech@meituan.com申请授权。
