Ember App中的React Micro -Frontend-第2部分
#javascript #react #ember

Ember应用

  • 让我们使用Ember CLI在应用程序文件夹中创建Ember应用程序。 
cd apps
ember new web-app --skip-npm --skip-bower --no-welcome --skip-git
cd ../
pnpm install
npm pkg set scripts.app="pnpm --filter web-app"
  • 在Dev Server Run pnpm app start中启动Ember Web应用程序。

路线设置

更新Ember Router.js以创建2种新路由，与React Ember不同，Ember默认情况下带有路由器。在Ember中存在逻辑的一条普通路线和我们要安装管理员MFE的另一条管理路线。

Router.map(function () {
  this.route('dashboard');
  this.route('admin', function () {
    this.route('item', { path: '*' });
  });
});

我们不必模拟React MFE中存在的确切路由结构。取而代之的是，我们可以将应用程序加载到管理路线中，React将负责过渡到子路由并更新浏览器URL。

但是，问题是，当用户输入URL'/admin/groups'主机应用程序时，由于它不是根据的有效途径，因此当用户输入URL'/admin/groups'时。为了避免这种情况，我们创建了一条虚拟的儿童路线，称为item admin内部具有Glog模式。

Navbar设置

  • 让我们创建一个导航组件，以便我们可以从NAV栏中从主机和MFE路线进行导航并验证水疗中心。 
touch apps/web-app/app/components/app-nav.hbs
touch apps/web-app/app/components/app-nav.js

app-nav.hbs 

<nav>
  <LinkTo @route='dashboard'>Dashboard</LinkTo>
  <button {{on 'click' this.handleAdminClick}}>Admin</button>
</nav>

app-nav.js 

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { service } from '@ember/service';

export default class AppNavComponent extends Component {
  @service router;

  @action handleAdminClick() {
    if (this.router.currentURL.startsWith('/admin')) {
      window.postMessage(
        { type: 'navigateToAdminMfeHome' },
        window.location.origin
      );
    }
    this.router.transitionTo('/admin');
  }
}

注意：
Ember仅知道管理路线，如果用户已导航到React中的admin/groups页面，即使浏览器URL已由React更新，Ember也不会意识到它。

如果用户单击“管理员”链接，则它不会做任何事情根路由如果用户在任何管理员路线中时单击Admin Nav链接。

如果它们在其他路由器上，那么正常的过渡本身将起作用。

  • 更新application.hbs文件以添加AppNav组件。 
{{page-title 'WebApp'}}
<AppNav />
{{outlet}}

来自React消息的听众

  • 就像主机应用程序如何发送事件以应对几个案例一样，React也将发送事件以捕获我们需要在应用程序级别上有一个侦听器，所以让我们创建一个。 
touch apps/web-app/app/routes/application.js

import Route from '@ember/routing/route';
import { service } from '@ember/service';
export default class ApplicationRoute extends Route {
  @service router;

  setupController() {
    super.setupController(...arguments);
    const { router } = this;

    window.addEventListener('message', function (event) {
      console.log('inside host app listener', event.data);
      const { data } = event;
      if (!data.type) {
        return;
      }
      if (data.type === 'navigateToHost') {
        router.transitionTo(data.payload.route);
      }
    });
  }
}

如果您想从React导航到Ember路线，那么我们需要发送带有路由信息的navigateToHost的帖子消息，以便Ember可以执行所需的过渡。

路由模板

  • 按计划创建2个路由的路由模板，并如下更新内容 
touch apps/web-app/app/templates/dashboard.hbs
touch apps/web-app/app/templates/admin.hbs

仪表板 

Dashboard page present in ember
<LinkTo @route='admin.item' @model='groups'>Groups</LinkTo>

我们可以创建从Ember创建导航链接，以使用此管理员路由并传递模型Prop。

。

Admin.hbs 

<div {{admin-mfe-mount}}></div>
{{outlet}}

此文件中存在的此div将充当根div，我们将在其中安装所有管理员及其子路由的React Web组件应用程序。

管理MFE安装修饰符

我们将利用Ember修饰符包将React应用程序附加到Ember中的Div。
因此，让我们安装Ember修饰符包。

pnpm app add -D ember-modifier

创建Admin-Mfe-Mount修饰符，

mkdir apps/web-app/app/modifiers
touch apps/web-app/app/modifiers/admin-mfe-mount.js

import Modifier from 'ember-modifier';

export default class AdminMFEMountModifier extends Modifier {
  modify(element) {
    import('http://localhost:4173/admin-mfe.js').then((module) => {
      module.mountApp({
        element,
        options: {
          basename: '/',
          baseURL: 'http://localhost:4173/',
        },
      });
    });
  }
}

现在运行Ember服务器并验证管理员MFE已成功渲染在给定元素中。

演示：

Image description

优点缺点

在Ember应用程序中使用了React MFE后，让我们讨论使用上述方法将React React React React纳入Ember.js应用程序的利弊。

优点

  • 逐步迁移ember代码库
  • 易于将应用程序分配给多个MFE，并为每个微货币提供一个专用团队。
  • 提供了一个机会，可以摆脱不稳定的旧代码，并慢慢将旧代码转换为最新技术。
  • 由于将其作为Web组件渲染，因此Cookie和会话将从主机应用程序中延长，因此无需在MFE中具有专用的身份验证机制，同时仍可以实现IFRAME方法提供的封装。
  • 可以将MFE的整个版本和部署周期与主机应用程序分解。

缺点

  • 框架在您的生产捆绑包中额外的40 kb（反应运行时）

样品回购

该帖子的代码托管在github here中。

请看一下GitHub存储库，让我知道您的反馈，在评论部分中查询。如果您觉得这里有更多的利弊，请告诉我们。

参考