其他
美团跨端一体化富文本管理技术实践
总第478篇
2021年 第048篇
一、引言
二、背景
三、跨端一体化富文本管理解决方案
3.1 平台定位
3.2 设计思路
3.3 实现原理
3.4 方案实践
3.5 业务成绩
四、总结与展望
五、作者简介
六、招聘信息
一、引言
二、背景
需求量大:业务稳步发展,业务需求不断叠加,甚至部分业务呈指数级增长,且业务方向涉及到一些业务规则、消息通知、协议文档、规则介绍等需求。 变更频繁:面对市场监管和法务的要求,以及新业务调整等因素的影响,会涉及到需求的频繁变更,像一些业务FAQ、产品介绍、协议文档、业务规则、系统更新日志等页面,需要做到快速响应和及时上线。 复杂度低:这些页面没有复杂的交互逻辑,如果能把这些简单的页面交给运营/产品去实现,开发人员就能有更多的时间去进行复杂功能的研发。 时效性高:临时性业务需求较多,且生命周期较短,具有定期下线和周期性上线等特点。
三、跨端一体化富文本管理解决方案
3.1 平台定位
对产品运营而言,他们能够可视化地去创建或修改一些活动说明、协议类、消息类的文章,无需开发排期,省去向开发二次传递消息等繁琐的流程,也无需等待漫长的发布时间,从而达到灵活快速地进行可视化页面的发布与管理。 对开发同学而言,他们能够在线编写代码,并实现秒级的发布上线,并且支持ES 6、JavaScript 、Less、CSS语法,我们还提供了基础的工具、图表库等,能够生成丰富多样的页面。帮助开发同学快速实现数据图表展示,设计特定样式,完成各种交互逻辑等需求。 对项目管理方而言,他们能够清晰地看到整个需求流转状态和开发日志信息,为运营管理提供强大的“抓手”。
3.2 设计思路
简单的富文本编辑器满足不了想要的页面效果,怎么办? 如果能导入想要的模板,是否会更友好? 怎么查看这个页面的访问数据?如何能监控这个页面的性能问题? 发布的页面是否有存在安全风险?
当富文本编辑器满足不了想要实现的效果的时候,可以引入了WebIDE编辑器,可以让研发同学再二次编辑进行实现。 一个系统想要让用户用得高效便捷,那么就要完善它的周边生态。就需要配备完善的模板素材和物料供用户灵活选择。 如果用户想要了解页面的运行情况,那么页面运行的性能数据、访问的数据也是必不可少的。 如果发布的内容存在不当言论,就会造成不可控的法律风险,所以内容风险审核也是必不可少的。
富文本编辑:强大而简单的可视化编辑器,让一切操作变得简单、直观。产品同学可以通过编辑器自主创建、编辑网页,即使无程序开发经验也可以通过富文本编辑器随意操作,实现自己想要的效果,最终可以实现一键快速发布上线。 WebIDE:定制化需求,比如,与客户端和后端进行一些通信和请求需求,以及针对产品创建的HTML进行二次加工需求,均可以基于WebIDE通过JavaScript代码实现。具备专业开发经验的同学也可以选择通过前端框架jQuery、Vue,Echarts或者工具库Lodash、Axios实现在线编辑代码。 页面管理:灵活方便地管理页面。大家可以对有权限的文档进行查看、编辑、授权、下线、版本对比、操作日志、回滚等操作,且提供便捷的文档搜索功能。 模板市场:丰富多样的网页模板,简易而又具备个性。模板市场提供丰富的页面模板,大家可选择使用自己的模板快速创建网页,且发布的每个页面又可以作为自己的模板,再基于这个模板,可随时添加个性化的操作。 物料平台:提供基础Utils、Echart、Vue、jQuery等物料,方便开发基于产品的页面进行代码的二次开发。 多平台跨端接入:高效快捷地接入业务系统。通过通信SDK,其他系统可以快速接入Page-佩奇平台。同时支持以HTTP、Thrift方式的开放API供大家选择,支持客户端、后端调用开放API。 内容风险审核:严谨高效的审核机制。接入美团内部的风险审核公共服务,针对发布的风险内容将快速审核,防止误操作造成不可控的法律风险。 数据大盘:提供页面的数据监测,帮助大家时刻掌握流量动向。接入美团内部一站式数据分析平台,帮助大家安全、快速、高效地掌握页面的各种监测数据。 权限管理:创建的每个页面都有相对独立的权限,只有经过授权的人才能查看和操作该页面。 业务监控:提供页面级别JavaScript错误和资源加载成功率等数据,方便开发排查和解决线上问题。
3.3 实现原理
3.3.1 基础服务
3.3.2 核心架构
页面基础配置层主要提供生成页面的各种能力,包括富文本的各种操作能力、编辑源码(HTML、CSS、JavaScript)的能力、自定义域名配置、适配的容器(PC/H5)、发布环境等。 页面组装层则会基于基础配置层所提供的的能力,实现页面的自由编辑,承载大量的交互逻辑,用户的所有操作都在这一层进行。 业务PV和UV埋点,错误统计,访问成功率上报。 自动适配PC和移动端样式。 内网页面显示外网不可访问标签。 页面生成层则需要根据组装后的配置进行解析和预处理、编译等操作,最终生成HTML、CSS、JavaScript渲染到网页当中。
3.3.3 关键流程
页面预览:创建、编辑之后的页面,将会根据内容进行页面重组,对样式和JavaScript进行预编译之后,对文本+JavaScript+CSS进行组装,生成HTML代码块,然后将代码块转换成Blob URL,最终以iframe的方式预览页面。 编译服务:文件树状结构和代码发送请求到后端接口,基于Webpack将Less编译成CSS,ES 6语法编译成ES 5。通用物料使用CDN进行引入,不再进行二次编译。 生成页面:当创建、编辑之后的页面进行发布时,服务端将会进行代码质量检测、内容安全审查、代码质量检测、单元测试、上传对象存储平台、同步CDN检测,最终生成页面链接进行访问。
3.3.4 多平台接入
3.3.5 Open API
服务端预先编写接口定义语言 IDL(Interface Definition Language)文件定义接口。 使用Thrift提供的编译器,基于IDL编译出服务语言对应的接口文件。 被调用服务完成服务注册,调用发起服务完成服务发现。 采用统一传输协议进行服务调用与数据传输。
生成文件:由服务端定义IDL接口描述文件,然后基于IDL文件转换为对应语言的代码文件,由于我们用的是Node语言,所以转换成JavaScript文件。 服务端启动服务:引入生成的JavaScript文件,解析接口、处理接口、启动并监听服务。 服务注册:通过服务器内置的“服务治理代理”,将服务注册到美团内部的服务注册路由中心(也就是命名服务),让服务可被调用方发现。 数据传输:被调用时,根据“服务治理服务”协议序列化和反序列化,与其他服务进行数据传输。
3.4 方案实践
3.4.1 H5协议
场景:文本协议,消息通知,产品FAQ。
3.4.2 业务自定义渲染
场景:客户端、后端、小程序的同学,可根据API渲染文案,实现动态化管理富文本信息。
"code": 0,
"data": {
"tag": "苹果,标准",
"title": "如何挑选苹果",
"html": "<h1>如何挑选苹果</h1>><p>以下标准可供消费者参考</p><ul><li>酸甜</li><li>硬度</li></ul>",
"css": "",
"js": "",
"file": {}
},
"msg": "success"
}
3.4.3 投放需求
场景:根据产品创建静态页面进行逻辑和样式开发。
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 客户端通信中间页
场景:客户端跳转,通信中间页。
XXX.ready(() => {
XXX.sendMessage({
sign: true,
params: {
id: window.URL
}
}, () => {
console.error('通信成功')
}, () => {
console.error('通信失败')
})
})
3.4.5 业务系统内嵌Page
场景:前端富文本信息渲染,后端富文本信息管理后台。
3.5 业务成绩
四、总结与展望
WebIDE融合:完善基础设施建设和功能需求,更好地支持Vue、React、ES 6、TS、Less语法,预览模式采用浏览器编译,能有效地提高预览的速度,发布使用后端编译的模式。 研发流程链路:针对代码进行有效评估,包括ESlint、代码重复率、智能提示是否可以三方库替代。出具开发代码质量、业务上线的质量报告。 综合研发平台:减少团队同学了解整体基建的时间成本,内置了监控、性能、任务管理等功能,提升业务开发效率。建设自动化日报、周报系统,降低非开发工作量占比。 物料开放能力:接入公共组件平台,沉淀更多的物料,快速满足产品更多样化的需求。
五、作者简介
也许你还想看
阅读更多