开发者社区 > 博文 > 【数据中台商业化】数据中台微前端实践
分享
  • 打开微信扫码分享

  • 点击前往QQ分享

  • 点击前往微博分享

  • 点击复制链接

【数据中台商业化】数据中台微前端实践

  • 飞腾****
  • 2023-04-10
  • IP归属:北京
  • 57600浏览

    一,需求背景

    1 业务背景

    在以往的业务场景中,用户进入五花八门的菜单体系中,往往会产生迷茫情绪,难以理解平台名称及具体作用,导致数据开发与管理学习成本较高,降低工作效率。为此我们整合从数据接入,数据开发,数据管理的全链路流程,期望让用户体验一站式数据开发与管理的便捷性;并提供不同业务场景,方便根据业务场景进行进一步数据开发与管理工作,为数据应用平台打下夯实规范的数据基础,方便用户在数据平台里,对于数据开发和数据应用进行便捷性的切换,因此我们设计目前的门户基座,可以快速浏览各个平台,同时串联数据开发与管理的工作,减少用户的试错成本,提升工作效率。


    2 标品需求

    基座子-项目交互简图如图1;

    1,基座的业务页面比较简单,主要包含:顶部边栏、左侧边栏、公共子菜单、顶级平台菜单;

    2,点击左上角图标,显示顶级平台菜单,点击平台,在基座左侧边栏动态显示平台一级菜单;

    3,点击基座左侧边栏,在公共子菜单,动态显示一级菜单下边的二级、三级菜单;

    4,点击基座左侧边栏或者公共子菜单,需要基座调度,在子项目区域正确加载子项目及子项目页面;

                                                                               图 1    


    数据中台新门户基座要接入老数据平台一、老数据平台二等 多平台的前端项目,并且原有前端子项目在门户基座呈现任意子项目、任意子项目页面 任意混搭的需求;新门户要接入的项目关系详情如图2;

                                                                         图 2


    3 数据中台融合;

    数据中台融合指的是京东体系内,其他对外独立交付的数据中台,比如京东工业、京东城市等项目;数据中台商业化的子项目不仅在新门户容器内,也可以按需打包进其他数据中台容器;下面简称 数据中台融合;


    二,微前端技术调研

    原有数据中台接入子应用的方式有多种:iframe 嵌套、@weus 微应用、链接跳转等;

    1 iframe 存在问题:

    • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
    • UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
    • 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
    • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

    2 weus 存在问题:

    • weus 是京东内部研发已经不再维护了,如果有新的问题需要自己解决,对微前端有新需求也需要自己去实现;
    • weus 没有严格的 css 沙箱、js 沙箱,而在我们的需求中,沙箱机制是刚需,我们要接入的子项目在 window 上挂在哪些变量,无法通过规范做到强有力的制约(因为要接入的项目是已经写完了)
    • weus 在微前端功能实现,没有qiankun 丰富健全,比如全局状态管理、虽然 weus 实现了子应用的预加载,但是比较机械,是把所有注册的子应用都缓存,实际可能不需要,qiankun 就比较灵活可以根据需要手动缓存等;

    3 链接跳转

    链接跳转,指的是点击一个菜单,跳转到另一个页面。这种方式不符合 “一站式 ”大数据平台产品定位;

    4 最终结论

    通过几种实现方式的对比,最终决定以 qiankun 微前端为基础,结合我们的实际业务场景,通过权限菜单树 和 子项目关联来实现基座对子项目的调度,具体方案请参照 三,基座技术方案详细描述;


    三,技术方案详细描述;

    1 名词解释

    跨子项目跳转

       指的是子项目没通过基座自行跳转,基座此时需要根据 url 匹配正确的基座显示;

    触发节点

        点击菜单,菜单对应的节点即为触发节点,跨子项目跳转(刷新页面)没有触发节点,以跳转后url 对应的页面节点为触发节点;

    页面节点

       权限菜单树中,挂载了子项目页面的节点

    门户节点

        狭义指的是,当前页面节点对应的公共子菜单父级节点;广义指的是通过页面节点向父系节点查询,最终确认公共子菜单、基座边栏的显示,并通过页面节点确定菜单高亮等行为;

    第一子系节点

         指的是在由触发节点查页面节点时,只关注子节点中的第一个,如果当前节点的第一个节点不是页面节点,继续在孙子节点的第一个,直到节点类型为页面节点为止;

    调度引擎

        指的是在基座中,对权限树数据处理,接收基座业务层调度,通过对权限树遍历、查询操作对业务层输出运算结果的一个抽象分层;


    2  整体流程图

    如图3 为基座技术方案的整体流程图,下面详细介绍

                                                                       图 3

    3 技术方案-分步描述

    第 1 步,配置权限菜单树,关联子项目页面

    • 如图 3 所示,首先会在权限中心配置权限菜单树,权限菜单树有很多级,比如一级平台,二级平台,二级平台一级菜单,二级菜单等,三级菜单等;
    • 然后需要在菜单树上,挂在子项目的页面,子项目页面的一些权限按钮等;
    • 最后权限中心对不同的用户赋予权限菜单树的子集;

    第 2 步,基座菜单树数据处理;

    • 基座从接口拿到权限菜单树关联页面数据后,触发调度引擎初始化、并把基座的业务更新函数传给调度引擎;
    • 基座获取到菜单树以后,广度优先算法(如图4)遍历整个树结构,并建立节点间父子关联关系。根据节点是否挂载了子项目页面定义前端节点类型 ;最终形成图 5 的数据;
    • 在树遍历过程中,会统一在基座左侧边栏这一层级的节点,做一个门户节点的标记;

                                                                    图4

    • 如图 5 所示,前端调度关系中,把权限菜单树分成 两种节点类型,挂载了子项目页面的节点,定义为页面节点。另一种没挂载子项目页面的节点,定义为分组节点;在基座调度中,不关心权限按钮节点,在数据处理中,页面节点就是整个权限菜单树的叶子节点;

                                                                    图 5

    第 3 步,点击基座边栏或公共子菜单

    • 点击基座边栏,触发点击菜单流程,点击的节点即为 “触发节点”;
    • 由触发节点,向第一子系节点查页面节点,查页面节点同时,会同时匹配门户节点;
    • 没有匹配到门户节点,由触发节点向父系节点匹配门户节点;

    第 4 步,刷新页面或跨子项目跳转

    • 这时没有直接的触发节点,只能通过 url 上的标识和菜单树上的页面节点进行匹配
    • 匹配到页面节点以后,由页面节点向父系节点查门户节点;


    第 5 步,通过门户节点输出 “运算结果”

    • 这里的运算结果主要包含:基座左侧边栏、公共子菜单菜单树列表、菜单高亮、产品平台名称等一系列基座需要正确显示所需要的数据;
    • 基座调度引擎,根据触发调度的类型;如果是点击菜单触发会执行 切换页面操作,刷新和跨子项目跳转则不需要触发;


    第 6 步,基座业务层执行运算结果;

    • 基座调度引擎,在接收基座业务层调度指令后,通过对图 5 权限树的遍历、查询操作,最终获取运算结果;
    • 调用基座业务层的更新函数,执行运算结果,到此基座调度流程结束;


    四,基座-子项目结构通信图

    1 基座分为业务层、调度引擎两部分;

    • 基座业务层主要包含:左侧边栏、顶部边栏、顶级平台菜单等 UI显示;
    • 基座调度层,以 qiankun 微前端为基础,丰富扩展了权限树数据处理、调度运算、双向通信、子项目分组分步预加载策略等;


    2 基座子项目通信和路由调度

    • 基座在执行主题切换时候,通过 qiankun 的 setGlobalState 通知子项目;子项目在绑定项目空间等特定需求时,通过调度引擎封装的 eventCenter 和基座反向通信;
    • 跨子项目跳转,子项目会自行触发 pushState,点击基座菜单跳转流程,由调度引擎触发 pushState 触达
    • qiankun 的 pushSate 劫持策略,触发 popstate 子项目页面因此触发更新;

                                                                       图 6

    3 路由劫持策略原理

    基座调度引擎通过监听 popstate 来获取刷新、跨子项目跳转的指令,从而触发调度流程;以下为原理解析:

    • 以 Vue 为例,Vue 通过 主动触发 pushState、replaceState 或者监听 popstate 变化触发页面发生变化;
    • 但是跨子项目跳转,执行 pushState 并没有触发 popState 基座调度引擎又怎么能监听到呢?
    • 通过阅读 qiankun 中依赖的库 single-spa 的源码,navigation 模块劫持了 pushstate 方法,只要触发 pushstate,就会触发 popstate 事件,关键代码如下所示:
    function patchedUpdateState(updateState, methodName) {
      return function () {
        const urlBefore = window.location.href;
        const result = updateState.apply(this, arguments);
        const urlAfter = window.location.href;
    
    
        if (!urlRerouteOnly || urlBefore !== urlAfter) {
          if (isStarted()) {
            window.dispatchEvent(
              createPopStateEvent(window.history.state, methodName)
            );
          } else {
            reroute([]);
          }
        }
        return result;
      };
    }
    window.history.pushState = patchedUpdateState(
       window.history.pushState,
       "pushState"
    );

    五,基于 qiankun 功能扩展:

    1  沙箱隔离

    js 沙箱利用 qiankun 沙箱机制;

    css 沙箱,qiankun 的 css 沙箱不健全;我们接入的又是老项目,目前的策略是 :

    • 基座通过特殊命名空间 .susceptor、element-ui 通过 .spr 跟子项目隔离;
    • 子项目通过特殊命名空间,例如 .datacenter-xxx 跟基座隔离
    • 子项目对 .el- 不执行隔离,目的是为了统一控制布局、主题,同时做性能优化;


    2 通信机制

    基座和子项目,属于典型的主从结构,采用单向数据流通信;为了满足特殊场景子项目跟基座通信需求,在 qiankun 的通信基础上,封装了 eventCenter 仅用于 子项目 跟基座通信;

    • 基座 -> 子项目,通过qiankun 的 onGlobalStateChange 通信
    • 子项目 -> 基座,通过 subActions 封装的 eventCenter 通信


    3 分组、分步、动态预加载机制

    目前标品基座已经加载了 30多个前端子项目,这么多前端子项目在首个子项目挂载后执行预加载,有可能会阻塞正常页面访问;

    分组指的是,通过产品划定的平台,只有切换到当前平台才会加载到当前平台的子项目;

    分步指的是,当前平台子项目过多时,一次预加载少量子项目,分多次预加载;

    动态指的是,基座在首个子项目挂载后,会检测网速,只有网速良好时才会执行预加载;


    4 跨子项目跳转

        跨子项目跳转的背景在于 BDP 一站式开发与管理平台,是一个大产品,数据规划、数据集成 等是其中的模块;模块之间存在一些跳转,对于前端就是跨子项目跳转;

       我们目前的跨子项目跳转,由 subActions 封装,抹平了标品基座 和 数据中台融合容器的区别;

    基座跳转逻辑如下:

    crossAppJump: ({ subApp='', path= '', paramsStr='', target= ''})=> {
          let jumpUrl = `/susceptor/${subApp}${path}`
          if(paramsStr){
            jumpUrl = `${jumpUrl}${paramsStr}`
          }
          if(target === '_blank'){
            window.open(`${location.origin}${jumpUrl}`)
          } else {
            window.history.pushState({ portalPushState: true }, null, jumpUrl);
          }
      },

    数据中台融合跳转逻辑如下:

     crossAppJump: ({ subApp='', path= '', paramsStr='', target= ''})=> {
          let jumpUrl = `/${subApp}${path}`
          window.__datafuse_jssdk__.crossAppJumpFnGetter({
            path: jumpUrl,
            paramsStr,
            target
          })();
    }

    5,接口访问及登录鉴权;

        由于微前端的技术形态,子项目在基座中加载实质是基座容器的 一段 html,所有接口均是以基座的 域名进行接口转发;由因为数据中台融合,所以子项目请求后端接口均是以  /api/datacenter/项目名 开头;

       通过以下 nginx 示例,我们把基座、子项目 的页面访问、接口访问链路 说明白;


    # proxy.conf 示例(已做脱敏处理,均不是项目升级名称)
    server {
        listen                80;
        server_name           unify.external.dadacenter;
        charset utf-8;
       location /sub-app{
            alias  /export/web/sub-app-web;
            try_files $uri $uri/ /index.html =404;
       }
       location /api/datacenter/subapp {
            proxy_pass   http://server-sup-app/;
       }
       location /susceptor{
          alias  /export/web/susceptor;     on;
          try_files $uri $uri/ /index.html =404;
       }
       location /api{
            proxy_pass  http://sever-api/;
      }
    }
    
    
    # server.conf 示例(已做脱敏处理,均不是实际项目)
    upstream server-sup-app{
        server 111.112.113.114:10001;
    }
    upstream sever-api{
        server 111.112.113.114:1000;
    }

    鉴权,前端不需要开发,但是需要知道,后端是通过顶级域名种 cookie 鉴权的;例如:unify.external.bigdata 测试环境是在 .external.bigdatao 域名下,这也是为什么本地开发需要配置 host:127.0.01 loca.external.dadacenter ;


    六,写在最后,不忘初心

    本节提供两个图, 对上文介绍的微前端实践,有进一步的能力提升,有感兴趣的同学欢迎一起讨论;

    1,整体流程图;

    如图 6 所示,配置流程:配置权限菜单树,然后配置子项目-子项目页面两级;最后把权限菜单树 和 子项目-子项目页面关联起来,形成如图 7 的权限树-子项目关联数据模型;

    基座两个调度流程,跟上文类似,但是多了子项目维度,基座在加载子项目的时候,就可以把子项目 在权限树的 权限按钮信息全部给到子项目;

                                                                  图 6

    2 权限菜单树模型;

    上文介绍的基座调度流程是简化后的版本,项目节点只有 分组节点、页面节点;但是从能力层缺失了 子项目维度;在设计之初,如图 7 所示:项目节点包含了 分组节点、子项目节点、子项目页面节点、页面节点 4种节点类型;

                                                                图 7





    文章数
    1
    阅读量
    1440

    作者其他文章