微前端架构中的路由设计

微前端是庞大前端项目的一种有效架构,简单讲就是将复杂的应用拆分为各个部分分而治之,伴随着微前端架构的运用,其基础建设目前并不完善,我想当下仍有两个问题未解决,一个是依赖共享尚未有非常好的方案,这里的依赖不局限于node_modules中的依赖,也包括单文件,如果将来能做到完全的基于浏览器的import和http2的加持,或许就可以完美且低成本的解决依赖共享问题,二是路由尚无一个完美的方案,当下的路由方案多是通过代理来实现映射,包括我在mfy框架中也是如此实现,但这种方案是很低效的,需要集成者花费比较多的经历去处理映射关系。基于我在自己项目中的实践,这篇文章将阐述一种去中心化的嵌套路由设计,可以让微前端架构中各个微应用拥有自己独立的路由的同时,基座应用可以无缝接入该微应用。

传统前端路由

传统前端路由的特征是,由应用顶层统一配置路由,或者类似React-Router可以做到分区块配置路由,但是它们都是中心化管理,也就是在整个应用中导航只有一套逻辑,因此,无论是在应用最顶层,还是组件最底层,在导航的时候都是直接导航到目标路径,从而展示对应界面。

但是在微前端架构下,这种操作逻辑是不成立的,因为对于微应用而言,它不知道基座应用将集成哪些其他微应用,也不知道其他微应用将定义哪些路由。于此同时,单一微应用的路由,不能和其他微应用的路由有冲突。这也就意味着,在微前端架构下,既不可能建立一套统一的中心化路由,也不可能让微应用直接接管url的跳转控制。

Remix路由系统

Remix内置支持了一种嵌套路由系统,这种嵌套路由模式,给了微前端架构更多遐想空间,因为微前端模式下你不知道每个微应用会出现什么样的路由设计,基于嵌套路由,基座应用加载微应用之后,可以让微应用自己衍生自己的路由出来,而不需要担心和已有路由产生冲突。

那么到底什么是嵌套路由呢?简单讲我们的页面都是一块一块的,每一块都嵌套在另外一个模块内,最顶层的就是整个应用。这种嵌套结构,让我们可以通过url中的路径进行区分,如下图,invoices嵌套在sales中,因此,在url中可以很好的安排,而如果切换下图中的tab到Subscriptions,那么url中将用subscriptions替代invoices,就是这么简单。对于当前的invoices而言,其内部又通过url中后面的:id值来拉取和展示对应的个体详情信息。

微前端架构与这种模式是匹配的,当url发生切换的时候,基座应用需要切换到某个微应用进行加载,而当该微应用加载完毕之后,需要根据自己路由的规定来展示对应的内容。

这种嵌套路由的模式,让我们的微前端架构设计更加有意义,实施起来也更合理,避免了以往接入一个应用时,需要通过复杂手段控制其路由展示逻辑的问题。当然,要实现该路由模式,需要强大的设计和编程能力。接下来,我将讲解我在项目中的做法。

微前端嵌套路由

微前端是一种应用架构模式,它有两种设计方案,一种是支持跨技术栈,一种是采用相同技术栈。我们项目中采用了react技术栈,在不同端使用不同react渲染器,在react native中,我们仍然可以实现微前端架构。

相同技术栈下实现嵌套路由难道小一些,只需要写一套代码,而如果支持跨技术栈,则需要写一个底层的驱动器,同时为不同技术栈写可以实现被引用的路由框架。现在,让我们把注意力集中在react中,看看react中是如何实现该设计。

可嵌套的Provider

在React中,context.Provider有一个特性,可以进行嵌套,而context.Consumer总是消费离它最近的Provider提供的值。例如:

<Provider value={1}>
  <div>
    <Provider value={2}>
      <SomePageComponent />
     </Provider>
  </div>
</Provider>

上面我们有两个Provider,且是嵌套状态。此时,SomePageComponent中如果进行context的消费,那么拿到的值只会是2而不会是1,不过SomePageComponent会被放在哪一个Provider内呢?在编程过程中并不确定,因此,它在消费时得到的值也不确定。

基于这样的特性,我们就可以设计嵌套模式了。让我们来看下最基础的代码:

function Route(props) {
    const { path, children } = props;
    const { uri, ...others } = useContext(RouterContext);
    const nextUri = `${uri}/${path}`;
    const { Provider } = RouterContext;
    return (
        <Provider value={{ ...others, uri: nextUri }}>{children}</Provider>
    );
}

这个设计非常巧妙,就是在Route组件中,既使用useContext读取上一个Provider提供的值,同时自己又使用Provider为下文提供新的值,这样,在下文中所拿到的uri就是Route所规定且嵌套在上一层中的地址。

这就是在react中实现嵌套路由的最基础原理。

路由的识别

通过对url的匹配,我们可以识别当前的url对应的是哪个路由。但是,由于我们的路由系统是嵌套路由系统,所以,当url被我们读取时,我们是不能立即进行分段的,而是要持续的递归的进行路由的匹配。这就像拨洋葱一样,只能拨掉外面的,才能拨里面的。

要做到这个,我们就必须在嵌套路由的基础上,在程序内部维护一个树状的状态,基于这个树状结构,来匹配url,从而能够准确的一层一层的让我们的路由所对应的界面展现出来。

效果

基于这一设计,当我们采用微前端架构时,我们可以做到让微应用真正独立于具体基座应用中。例如,现在我们有两个门户站点A和B,同时,我们有微应用a, b, c, d,其中A使用了a, b, c三个微应用,而B使用了a, c, d三个微应用。

对于A站点而言,它的访问域名为a.com,B为b.com,当我们访问a, b, c, d时,它们的路径分别时/a, /b, /c, /d,所以,我们可以通过a.com/a, b.com/c等访问对应微应用。

但是,在具体的微应用中,它有自己的路由规定,例如a里面,它有list, detail, create, edit等路由,因此,访问它们的路径就是 /a/list, /a/detail/:id, /a/create, /a/edit/:id。很明显,无论是在A中还是B中,这些路径都应该是可以被访问的。不过,现在发生了一件令人难受的事,在A站点中,它原本集成了另外一个x微应用,它已经占用了/a这个uri。所以,我们现在不得不使用/aa来访问原来的a应用,此时,如何访问list, detail, create和edit呢?

现在,我们采用嵌套路由系统。我们在编写a, b, c, d这四个微应用的时候,我们根本不考虑我们是在那个应用中被使用,因此,我们在a中如下定义自己的路由:

const router = new Router({
  routes: [
    {
      path: 'list',
      component: List,
    },
    {
      path: 'detail/:id',
      component: Detail,
    },
    {
      path: 'create',
      component: Create,
    },
    {
      path: 'edit/:id',
      component: Edit,
    },
  ],
});

对于a微应用而言,这些路径都是自己内部管理,它不在乎外部将会如何使用自己,它只管定义自己的路由。由于a定义自己的路由,因此,我们可以独立运行a,从而完成某个微应用的测试、部署等。

对于A这个站点而言,它要使用a,它将这样使用它:

const routerOfPortalA = new Router({
  routes: [
    {
      path: 'aa',
      component: a, // a这个微应用
    },
  ],
})

此时,当A起来之后,我们就可以通a.com/aa/detail/123访问到a的详情页。

当然,和模块系统的结合,微应用还可以嵌套其他微应用,例如在b中,我们还直接使用了d微应用。此时,我们访问/b/detail/123/d/edit/456就代表着我们在访问b微应用的详情界面的时候,打开了被内置其中的d的编辑界面。

结语

过去两年里,我在项目中实践了微前端架构,这种架构对部分人来讲会觉得麻烦,甚至在我主导的架构下,悄悄用传统的思维去写代码,导致出现了一些逆向依赖,但是大体上,基于这一架构的设计,让项目在功能的解耦上更优秀。对于开发而言,功能模块也好,或者被称为微应用也好,都是完全可以独立,基于这种独立,就可以避免很多相互干扰的问题。相信除了我的项目,其他很多人的项目,在一定的规模之后,都会有类似的理念,此时,不妨考虑本文所提出的嵌套路由模式来解决这种微分化的架构实现。

2022-09-21 630

为价值买单

本文价值6.3RMB
已有7条评论
  1. 仿生狮子 2022-10-23 23:47

    你好,目前大多数路由方案都是哈希路由或者 pathname 路由,即“www.bd.com/a#b”、“www.bd.com/a/b”。请问一下有没有使用 search 参数作为页面传参这种写法的实践“www.bd.com/a?a=page-b”?会有什么优缺点呢?

    • 否子戈 2022-10-23 23:59

      基于search参数的方案,可以参考nautil的使用方式 https://nautil.js.org/#/module/router?id=bootstrap 例如 ?_url=/a/b/c。
      这种方式的好处是可以兼容已有路由的同时,还可以兼容用其他参数的路由。
      缺点嘛,就是读起来可能不是很直接,因为需要encode作为参数值。

      • 仿生狮子 2022-10-24 09:54

        不知道各种插件对 search 参数路由的兼容性怎样?比如说项目接入 sentry 的话,可以按照 vue-router 的设置把“/article/:id”这种粒度的 url 作为单独的页面聚合起来查看报错,但是如果是哈希路由或 search 参数路由,会不会碰到兼容性问题呢?

        • 否子戈 2022-10-24 10:07

          需要对sentry进行定制化,通过埋点不仅可以做到基于url的聚合,还能做到真正的直打组件的监控

  2. 1188 2022-10-11 17:52

    这种情况下, 页面跳转传参是不是没办法在问号后面拼了?

    • 否子戈 2022-10-12 16:07

      看你怎么设计,通过search部分传参可以,但是要考虑两个子应用如果使用了同一个key,会不会造成冲突