如何将单体架构分割成微前端

DebugUsery
114 阅读10分钟

将单片机架构拆成微前端

一个好的应用开发策略应该确保开发时间和精力大大减少，同时将应用的复杂性保持在最低水平。

简介

在现实世界中，应用程序的规模往往越来越大，这意味着随着应用程序复杂性的增加，需要更多的努力。因此，一个发展良好的应用程序应该是反应灵敏且高度可扩展的。

在单片机架构中，应用程序有巨大的组件和复杂的逻辑。因此，维护或升级这种应用程序是具有挑战性的。此外，整合一个新的团队可能是一个困难的任务。

一个更好的解决方案是将一个庞大的应用程序分解成更小的独立应用程序，称为微前端。

微前端更容易管理、扩展和分配给不同的团队。本文将向读者介绍微前端以及它们与单体应用相比的优势。我们将使用一个演示应用程序来说明微前端的工作原理。

前提条件

  • 安装了[NPM]包。
  • 安装了[Angular CLI]。
  • 安装了一个代码编辑器，最好是[VS Code]。
  • 安装一个网络浏览器，最好是[谷歌浏览器]。
  • 对[Angular.js]和[NPM]命令有良好的理解。

了解单片机架构和微前端架构

单片机架构是指一个巨大的代码块，包含几个模块，捆绑在一个应用程序中。

单片机应用中的模块是紧密耦合的，这意味着应用逻辑和业务逻辑被捆绑并作为一个单元部署。

一个单片机应用程序是建立在一个统一的代码上。它包含三层软件架构；用户界面、数据库和服务器端应用程序。

开发一个单片机应用程序是具有挑战性的，因为它给开发人员带来了压力。由于该架构不支持独立开发，它需要更长的开发时间。此外，在同一个应用程序上使用不同的编程语言也是一种挑战。

微前端是一种设计方法，一个应用程序被分割成多个前端应用程序。因此，独立的开发人员可以在每个应用程序上工作。这种方法大大减少了开发时间和过程。

此外，多个开发团队可以独立工作在同一个前端代码上。因此，微型前端应用程序的代码更容易维护、管理和独立。

值得注意的是，在微前端设计中，代码更新可以逐步进行。尽管如此，可以在不破坏整个应用程序代码库的情况下对特定模块进行改进。

微型前端的特点

  • 微观前端应用中的每个前端都被设计用来解决一个特定的问题或提供一个独特的功能。
  • 独立的团队成员被指派在一个应用程序中实现一个前端。
  • 前端不能共享逻辑，因为它们是相互独立的。
  • 一个特定的团队可以管理一个特定的前端。

微型前端的优点

  • 应用程序很小- 在微前端中，一个广泛的应用程序被分割成小的部分、页面或甚至功能。这使整个应用程序变得很小，因此它不会占用更多的存储空间和内存。

  • 独立- 由于应用程序是由不同的团队拆分和开发的，所以这些团队可以独立工作。此外，如果一个应用程序模块不工作，它不会影响整个应用程序。

  • 易于开发和部署- 由于独立的团队成员各司其职，分布在一个团队中的应用程序易于开发。与一个巨大的应用程序相比，它们也容易独立部署。

  • 易于测试- 大型应用程序在部署前需要进行大量的单元测试，从而增加了部署时间。然而，与巨大的应用程序不同，单元测试是在微前端独立完成的，因为每个应用程序需要较少的单元测试，使得部署速度更快。

  • 更少的开发时间- 如前所述，微前端比大型应用程序需要更少的开发时间，因为不同的团队独立完成他们的应用程序，而不是一个团队完成应用程序。

  • 易于CI/CD--应用程序可以独立集成和部署，从而使CI/CD更容易。假设应用程序的某个部分出现了错误或需要更新。在这种情况下，很容易修复和执行应用程序的特定部分，而不干扰整个应用程序。

  • 独立的堆栈和版本- 一个应用程序可以有同一堆栈的不同版本。这意味着一些团队可以在一个应用程序中开发和测试同一堆栈的较新版本。

  • 没有共享代码- 大型应用程序共享代码，以使用一些功能相同的特性。然而，这是有代价的，万一出现错误，会完全使应用程序瘫痪。另外，模块之间的相互依存关系会随着应用程序的增长而带来更多的问题。这种情况不会发生在微前端，因为这种架构不共享代码。

应用程序概述

在我们的演示应用程序中，我们将从一个单片机应用程序开始，并将其分解成更小的微前端。这个单体应用可能不是很大，因为我们这样做只是为了演示。

接下来，我们将设计一个应用程序的管理员仪表板，并将其分解为独立的应用程序。

大多数管理员仪表盘包含许多组件，这些组件的逻辑过于复杂，是用单片机架构构建的。因此，要扩展和维护这样一个应用程序并不容易。

我们的演示应用开发将遵循以下几个阶段。

  • 创建包含所有应用程序组件的工作区。
  • 创建一个组件包装器，协助浏览独立的部件和主机。
  • 从单体应用中创建微前端。

实现我们的演示应用程序

我们将首先创建一个应用程序工作区，它将使用Angular.js ，包含所有的组件。

ng n administrator-page –-create-application="false"

接下来，我们将通过在终端窗口执行下面的命令来创建主机应用程序，它将作为我们的administrator-page 包装器。

cd administrator-page
ng generate application administrator --routing

然后，我们将在administrator ，也就是我们的主机应用程序中添加一个landing page 的组件。

ng generate c landingpage --project=administrator

接下来，我们将创建一个微型前端应用程序，并将其命名为forum page 。

ng generate application forumpage --routing

然后，我们将在我们的应用程序中添加一个模块，该模块将被懒散地加载到主机组件中，并创建一个用于显示演示内容的组件，将其命名为comments 。

ng generate module comments --routing --project=forumpage
ng generate c comments --project=forumpage

接下来，我们将通过编辑文件administrator-page/projects/forumpage/src/app/app-routing.module.ts ，在我们的新应用程序中创建路由。

const routes: Routes = [
  {
    path: 'forumpage',
    loadChildren: () => import('./comments/comments.module').then((c) => c.CommentsModule)
  }
];

然后，我们将编辑文件administrator-page/projects/forumpage/src/app/comments/comments-routing.module.ts ，如下所示。

import {CommentsComponent} from "./comments.component";

const routes: Routes = [
  {
    path: '',
    component: CommentsComponent
  }
];

接下来，我们将继续编辑文件administrator-page/projects/forumpage/src/app/comments/comments.component.html ，创建一个HTML组件，如下所示。

<div class=”content”>
    <div>Comments Section</div>
</div>

然后，我们将编辑css 文件，如下所示。

.content {
    background-color: #038ace0f;
    width: 98%;
    display: flex;
    height: 98%;
    justify-content: center;
    border: 2px dotted rgb(0, 255, 234);
    align-items: center;
    color: rgb(48, 56, 2);
    font-weight: bold;
    font-size: 45px;
}

我们将把我们的主机应用程序与我们所创建的微前端整合起来。我们需要安装模块联盟插件来实现这一目标。

该插件可以协助将微前端应用程序加载到另一个应用程序中。为了在我们的两个应用程序中安装该插件，我们将执行下面的命令。

ng add @angular-architects/module-federation --project administrator --port 3000
ng add @angular-architects/module-federation --project forumpage --port 4000

在插件安装成功后，两个应用程序将运行在上述命令中指定的不同端口。

webpack.config.js 我们可以注意到，名为administrator 和forumpage 的配置文件已经被添加到这两个组件中。

我们需要修改该文件，以使我们的应用程序按预期工作。在微型前端应用程序中，取消对下面这行的注释，并按以下方式更新代码。

name: "forum page",
filename: "forum.js",
exposes: {
    './CommentsModule': './projects/forumpage/src/app/comments/comments.module.ts',
},

我们将对主机应用程序进行同样的修改，如下所示。

remotes: {
    "forumpage": "http://localhost:4000/forum.js"
},

然后，我们将需要通过添加内容来更新我们的package.json 文件。

"resolutions": {
   "webpack": "^5.4.0",
   "license-webpack-plugin": "2.3.17"
},

接下来，我们可以在仪表板组件内设置路由，以加载我们的独立应用程序。

此外，我们还将为我们的HTML模板添加更多的内容，并为仪表盘的样式添加css 。

最后，我们将编辑文件administrator-page/projects/administrator/src/app/app.component.html ，如下所示。

<div class="main-wrap">
  <div class="nav-wrap">
    <a routerLink="/"> Landing Page</a>
    <a routerLink="/forumpage"> Forum Page</a>
  </div>
  <div class="microfrontend">
    <router-outlet></router-outlet>
  </div>
</div>

然后，我们将修改文件administrator-page/projects/administrator/src/app/app-routing.module.ts ，如下所示。

import {LandingpageComponent} from "./landingpage/landingpage.component";

const routes: Routes = [
  {
    path: '',
    component: LandingpageComponent,
    pathMatch: 'full'
  },
  {
    path: 'forumpage',
    loadChildren: () =>
      import('forumpage/CommentsModule').then((c) => {
        return c.CommentsModule;
      })
  },
];

在运行应用程序时，会弹出一个错误，因为仪表板没有关于Comments Module 。然而，我们可以通过声明模块来解决这个错误。

为了达到这个目的，我们将在应用程序的根目录下创建一个文件，并将其命名为type.ts ，在这里我们将声明该模块，如下所示。

declare module 'forum page/CommentsModule';

在目录administrator-page/projects/administrator/src/app/ 内，我们将编辑css 文件app.component.scss ，使我们的组件具有如下风格。

.main-wrap {
  display: flex;
  width: 95%;
  justify-content: flex-end;
  height: 95%;
  align-items: center;

  @media screen and (max-height: 500px) {
    .nav-wrap a {font-size: 19px;}
    .nav-wrap {padding-top: 16px;}
  }  

  .microfrontend {
    height: 90vh;
    width: 80%;
    padding: 15px;
  }

  .nav-wrap {
    position: fixed;
    height: 100%;
    width: 15%;
    top: 0;
    z-index: 1;
    left: 0;
    overflow-x: hidden;
    background-color: #cc2900;
    padding-top: 15px;
  }

  .nav-wrap a {
    text-decoration: none;
    padding: 5px 7px 5px 15px;
    font-size: 25px;
    display: block;
    color: #fceb00;
    margin-top: 15px;
  }

  .main {
    padding: 1px 15px;
    margin-left: 165px;
  }

  .nav-wrap a:hover {
    color: #00f752;
  }
}

然后，我们将更新文件administrator/src/app/landingpage/landingpage.component.html ，如下所示。

<div class="content">
    <div>The Landing Page Information</div>
</div>

接下来，我们将更新css 文件administrator/src/app/landingPage/landingpage.component.scss ，如下所示。

.content {
  background-color: #0357810f;
  width: 98%;
  display: flex;
  height: 98%;
  justify-content: center;
  border: 2px dotted rgb(0, 255, 42);
  align-items: center;
  color: rgb(6, 0, 31);
  font-weight: bold;
  font-size: 45px;
}

最后，我们将通过在终端执行以下命令来运行该应用程序。请注意，我们必须同时运行administrator 和forum page 组件，如下所示。

ng serve administrator
ng serve forum page

在运行这两条命令后，我们将有landingpage 组件，administrator 的一部分被加载。然后会有一个指向Forum Page 的链接，当点击这个链接时，一个微前端forumPage 将被加载，如下图所示。

The Landing Page

The Landing Page

结论

我们已经创建了一个应用程序，它使用Angular来承载另一个独立的应用程序。这个应用程序很简单，因为它的大部分部分都包含模板，但已经提供了关于使用微前端开发大型应用程序的有见地的信息。

avatar
文章
阅读
粉丝