【前端架构】微前端实战

一、遗留系统：路由分发

路由分发式微前端

适用场景

不同技术栈之间差异较大，难以兼容、迁移、改造

项目不想花费大量的时间在这个系统的改造上

现在的系统在未来将会被取代

系统功能已经很完善，基本不会有新需求

基于路由分发的Nginx配置示例

http {  server {    listen 80;    server_name www.demo.com;    location /api/ {      proxy_pass http://www.test1.com/api;    }    location /web/admin {      proxy_pass http://www.test2.com/web/admin;    }    location /web/notifications {      proxy_pass http://www.test3.com/web/notifications;    }    location / {      proxy_pass /;    }  }}

路由分发的测试

单元测试：URL验证

集成测试：URL重定向测试

二、遗留系统微前端：使用iframe作为容器

设计应用管理机制

应用加载、卸载时机

动画过渡

设计应用通信机制

通过iframeEl.contentWindow获取iframe元素的window对象

定义通信规范：事件名格式、何时开始监听事件、何时解绑监听事件

三、微应用化

形式和原理

构建时以单体应用的形式构建

运行时以应用模块的形式存在

原理：从多个项目中复制出代码，合并到一个项目中

架构实施

持续集成设计

子应用代码更新，触发对应模块的持续构建

主应用代码更新前端架构，触发整个系统的持续构建

一旦子应用持续构建成功，就会触发整个系统的持续构建

设计占位方式

子应用中指向其他子应用的路由

主应用中的子应用模块

测试策略

依赖一致性测试

比对子应用中package.json的依赖版本

功能模块生成测试

测试复制的模块能否复制到对应的目录上：编写脚本，在持续集成的过程中运行测试脚本，如果没有检测到exit(-1)，则持续集成构建失败

测试生成的模块代码大小是否正常：正常情况下每个chunk.js文件要大于空白的模块；同时在持续集成中运行脚本，并执行exit(-1)

E2E测试

四、前端微服务化

微服务化设计方案

基座控制系统

主工程在运行的时候，会去服务器获取最新的应用配置

主工程在获取配置后，将逐一创建应用，并为应用绑定生命周期

当主工程监测到路由变化时，将寻找是否有对应的路由匹配到应用

当匹配到对应的应用时前端架构，则加载相应的应用

应用间事件

避免应用间事件名冲突

可以将应用名作为应用内事件前缀

设计路由响应机制

基座应用只负责自己相应的路由，剩下的路由用一个统一的模块来处理，如Angular中的入口模块AppModule

当基座应用的路由发生变化后，会发出对应的路由变化的全局事件

在子应用启动后，它们将监听是否有相应的路由变化

通用型前端微服务化：Single-SPA

基座部分

import * as singleSpa from 'single-spa';sinleSpa.registerApplication(  'app-1',   () => import('app1/app1.js'),  pathPrefix('/app1'));singleSpa.registerApplication(  'app2',  () => import('app2/app2.js'),  pathPrefix('/app2'));singleSpa.start()

子应用部分

React例子

import React from 'react';import ReactDOM from 'react-dom';import singleSpaReact from 'single-spa-react';import Root from './root.component.js';const reactLifecycles = singleSpaReact({  React,  ReactDOM,  rootComponent: Root,  domElementGetter});export function bootstrap(props) {  return reactLifecycles.bootstrap(props);}export function mount(props) {  return reactLifecycles.mount(props);}export function unmount(props) {  return reactLifecycles.unmount(props);}

Angular例子

const ngLifecycles = singleSpaAngular({  domElementGetter,  mainModule,  angularPlatform: platformBrowserDynamic(),  template: ``,  Router,})

优缺点

优势

能支持大部分主流的前端框架，也能支持传统的前端框架

提供更好的用户体验，即不需要页面跳转，直接在当前页面载入

方便迁移旧的遗留系统

缺陷

系统构建复杂，应用需要集成在一起进行构建

不支持不同应用的部署分离

代码结构复杂

有额外的大量学习成本

定制型前端微服务化：Mooa

主工程部分

初始化微前端框架相关的配置

从远程获取所有子应用的配置

配置所有的子应用

进行主工程和子应用的路由配置

监测路由变化，一旦匹配到对应的路由，则加载对应的应用，并卸载旧的应用

子应用部分

路由更新

适配框架的基准URL

解决依赖冲突

iframe隔离

为不同的子应用分配ID

在子应用中进行hook，以通知主应用：子应用已加载

在子应用中创建对应的事件监听，来响应主应用的URL变化事件

在主应用中监听子程序的路由跳转等需求

五、组件化微前端：微件化

运行时编译微件化：动态组件渲染

Vue微件化

编写应用容器模板

<div id="app-2">  <span v-bind:title="message">    鼠标悬停几秒钟查看此处动态绑定的提示信息！  </div

编写实例化应用脚本

var app2 = new Vue({  el: '#app-2',  data: {    message: '页面加载于' + new Date().toLocaleString()  }}

将模板和脚本放置在远程，在需要调用的地方创建与容器id对应的元素，接着运行相应脚本即可

Angular微件化

在核心工程中提供微件化所需要的环境

SystemJs.set('@angular/core', SystemJs.newModule(angularCore));SystemJs.set('@angular/common', SystemJs.newModule(angularCommon));SystemJs.set('@angular/common/http', SystemJs.newModule(angularCommonHttp));

在微件工程里，构建出能运行在核心工程的代码

// 导入微件const module = await SystemJs.import(widget.moduleBundlePath);
// 编译模块const moduleFactory = await this.compiler.compileModuleAsync(module[widget.moduleName]);
// 解析 ComponentFactoryconst moduleRef = moduleFactory.create(this.injector);const componentProvider = moduleRef.injector.get(widget.name);const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(componentProvider);
// 编译组件this.content.createComponent(componentFactory);

预编译微件化

React微件化

编写统一的API，封装React的根组件

export const init = (config) => {  ReactDOM.render(<App/>, document.getElementById('root'));  serviceWorker.unregister();}

修改构建系统的配置，让其输出可在浏览器上直接运行的版本

var config = {  // ...  output: {    // ...    library: 'MyApp',    libraryTarget: 'umd',    umdNameDefine: true,  }}

加载对应的JavaScript脚本，并调用组件的初始化方法

<script src="./bundle.js" type="text/javascript"></script><script type="text/javascript">  MyApp.init({    some: "config"  });</script>

通过构建工具进行微件化

六、面向未来：Web Components

WebComponents组成

Customer Elements（自定义元素），允许开发者创建自定义元素

Shadow DOM

HTML Templates

HTMLImports

纯Web Components方式

class HelloElement extends HTMLElement {  constructor () {    super();    var shadow = this.attachShadow({mode: 'open'});    shadow.innerHTML += `              #tabs {          background-color: red;        }        span {          color: purple        }            
        hello,      
      world    `;  }}customElements.define('hello-element', HelloElement);

结合WebComponents方式

在Web Components中集成现有框架

集成在现有框架中的Web Components

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688