AdMaster技术专栏(三):MRI前端集成开发技术,看Social BI如何72变!



继「Social Master数据魔方」和「新一代大数据处理技术Flink」后,本期技术专栏,我们聚焦AdMaster自研的前端开发技术——MRI


本期技术分享家
AdMaster高级研发总监:史腾飞(Stanford Shi)


MRI(Master React Integration), 是AdMaster Social BI前端团队基于实际生产环境,自研的一套基于用户界面构建JS库React的前端开发框架,主要功能是通过统一资源进行多项目配置,大幅缩减项目研发周期,降低人力成本,减少复用带来的损耗


MRI虽然是AdMaster基于自身业务需求开发的资源配置技术,但它实际上可以应用到任何前端开发场景中,以解决多资源多项目导致的研发效率低下问题。

 

为了方便理解,你可以把MRI想象成一个拥有海量积木组件的Lego玩具库,不同的是,这里面的每个积木都拥有一个唯一数字坐标,以方便快速调用。传统拼凑玩具,每个组件都是固定的,想要利用其中的部分组件搭建新玩具,就需要拆掉旧玩具找到目标组件,或购买新的相同组件,不管何种方式都会大幅增加成本。但有了MRI,任何组件都可以基于坐标快速找到并复用,不论拼插多少变幻无穷的造型,都能短时间搞定。这也是为什么,我们会用“看我72变”来形容MRI。



快速定制,Social BI的秘密武器


Social BI系统,是AdMaster自主研发的社交数据智能可视化平台,它不仅具有AI驱动的底层数据架构、可视化的高颜值交互界面、分钟级的数据收集处理效率,还可以通过自由组合海量的社交数据分析模块,实现极速定制。从2018年上线至今,已经有越来越多的企业部署了定制的Social BI系统,它们覆盖汽车、美妆、母婴等多个行业。


MRI中最重要的部分,即MRI Project (一种单资源多配置型项目开发模式),是构建MRI最初的动机,而它研发的目的就是解决Social BI前端团队在实际生产中遇到的问题。

 

Social BI作为智能可视化平台,主要以客户定制化系统为主,每个客户一个项目,所以项目会很多,在开发MRI之前,前端团队主要采用multirepo 方式管理组织代码,但随着项目不断增多,multirepo弊病就暴露了出来:

 

  • 需要根据不同项目的实际需求,采用不同的技术栈(ng, react, vue);

  • 第三方技术迭代频繁,更新和管理成本极高;

  • 一个功能,一个项目采用了A, 另外一个项目却用了B;

  • 即使采用同一个库,每个项目采用的版本也不一致;

  • 如果当时负责某个项目的人离职,交接将是个棘手问题;

 

上述问题,在改用monorepo方式管理组织代码后,就能得到有效的解决,因为monorepo会把所有的相关项目都放在一个仓库中,并使用lerna对其进行管理。但这并不够,因为monorepo并不能解决产品经理面临的问题。



提高人效,产品经理的救星


由于项目多,产品经理在设计新产品时候,经常会提出下面的需求:


  • 这一块业务组件可以用A项目的A1页面组件;

  • 这个页面可以完全按B项目B2页面设计;

  • 这个模块可以用C项目C1页面的组件C1-1 和 D项目D1页面的组件D1-1 和 D1-2 外加 E 项目的 E1页面;

  • 客户临时要个DEMO系统,要A 的 A1 页面,B的b模块,还需把C项目降维成DEMO的模块;

  • ……

 

类似的需求每天都在上演,不能枚举,当产品经理有如此多的需求时,monorepo 就显得力不从心。Social BI作为集合多个产品的可视化平台,很多产品模块功能相似,如 Dashboard 系列、i指数系列,对于不同行业客户,需要的部分功能也会类似,比如汽车、美妆等客户。如此情况下,跨模块跨项目复用的频次就非常高,为了满足复用的需求,AdMaster前端研发团队就在monorepo基础提出了 MRI Project,以实现以下功能:

 

  • 前端项目均在一个仓库下开发,所有项目引入的第三方包统一管理,有效避免因项目多引起管理不便的问题;

  • 将模块组件从项目中抽离,项目使用配置式管理模块。任何项目都可以无限度穿越到其他项目中调用它们的模块组件进行复用, 甚至还可以将其他项目转为本身项目模块;

 


MRI共分为6大部分,其他的部分都是为MRI Project服务的,在此就不一一展开叙述。

 

研发MRI后,AdMaster Social BI 前端团队大幅提高了开发效率,项目交付周期也得以缩短,管理也相比之前有了质的升级,流程简单有序,有效避免了功能模块的配置差异,客户需求响应快速、准确。最重要的是,MRI技术可应用在前端开发的任何场景,是能在多个领域提质增效的普适性创新