微前端----前端开发的全新方法策略

前言

两个场景:
1.有一个 5 年前老旧的项目，需要你在这个项目上持续迭代加功能
2.开发一个新项目,选择技术方案.如何确保这套技术方案在 3~5 年内还葆有生命力，不会在 3、5 年后变成一个遗产项目
 
第一个场景，我们初步一想，我只需要把新功能用 react/vue 开发，反正他们都只是 ui library，给我一个dom 节点我想怎么渲染怎么渲染。但是你有没有考虑过这只是浮在表层的视图实现，沉在底下的工程设施呢？我要怎么把这个用 react 写的组件打出一个包，并且集成到原来的用 es5 写的代码里面？或者我怎么让 webpack 跟 之前的 grunt 能和谐共存一起友好的产出一个符合预期的 bundle？
 
第二个场景，你如何确保技术栈在 3~5 年都葆有生命力？别说跨框架了，就算都是 react，15 跟 16 都是不兼容的，hooks 还不能用于 class内 , 还有打包方案，现在还好都默认 webpack，那 webpack 版本升级呢，每次都跟进吗？别忘了还有 babel、less、typescript 诸如此类呢？别说 3 年，一年后把所有依赖包升级到最新还能跑起来？
 
有没有一种可能
使整个系统就变成了一个真正的、基于运行时的插件平台 ？？？？
 

什么是微前端 --方法策略

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

 

 

　　微前端架构具备以下几个核心价值：

  • 技术栈无关

　　主框架不限制接入应用的技术栈，微应用具备完全自主权

  • 独立开发、独立部署

　　微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

  • 增量升级

　　在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时

　　每个微应用之间状态隔离，运行时状态不共享
 
在移动端中微应用 就运用非常广泛 如微信小程序
 
 
　　pc端 微前端 的主要运用场景
　　针对中后台应用的解决方案
　　如云控制台应用，几乎都会面临业务快速发展之后，单体应用进化成巨石应用的问题。为了解决产品研发之间各种耦合的问题，产生的解决方案。
　　这类问题也同时存在企业级 Web 应用中。
 
　　
  　　主应用就是一个排插
　　　微应用就是各类插头
 

微前端方案

　　

微前端方案一（iframe）

 
在最早我们用来实现 微前端 的方式，是通过iframe来做的，页面里面嵌套一个iframe，通过设置url 来做微应用的划分，这样可以保证了每一个微应用 都是独立部署，独立运行的，哪一个就算出现了问题，也不会影响到其它的应用，可以保证在一定范围内用户正常使用
iframe 对于一些简单的静态、纯展示类的页面是很好的方案，但是如果有需要做交互、信息共享、数据更新等行为的时候，iframe 就不能完全满足我们的需求了
iframe不能满足的需求有以下几点：
  1. 在iframe内的页面做切换的时候，浏览器回退的时候，就会出现页面跳转错误
  2. 一些全屏样式,微应用内会影响全局布局
  3. 对于 iframe 的状态捕捉，假设iframe 子应用加载、预渲染、渲染后、卸载、卸载后、加载报错的情况；整个生命周期处理上面都需要做很多的处理，麻烦而复杂，对iframe生命周期的方案做的不好的话，意外的情况就会影响到用户的使用，就得不偿失了
  4. 由于子父应用隔离, iframe 内外系统的通信、数据同步交互差，例如 主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果
  5. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
 
其中有的问题比较好解决(问题1)，有的问题我们可以睁一只眼闭一只眼(问题5)，但有的问题我们则很难解决(问题3)甚至无法解决(问题4)，
而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题， 最终导致我们舍弃了 iframe 方案。
 

 

微前端方案二（single-spa）

 

一个在国外流行很久的方案single-spa完美的处理了所有上述iframe所存在的问题，下面是single-spa官方对于single-spa 诞生所做的阐述：
single-spa 的诞生，是通过从现在的一些框架：react、angular、vue的生命周期中获得了灵感，将生命周期 运用于整个应用，避免应用程序被束缚。
 
single-spa是一个顶层路由。当路由处于活动状态时，它会下载并执行该路由的相关代码。
 
核心思想: 路由劫持 === >应用加载
缺点: 没有处理 样式, js 隔离 , window对象 的穿透问题
 
现在 single-spa 几乎支持任何框架。
 
官方文档
 

微前端方案三 (qiankun)

 
qiankun（乾坤） 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。（见下图）
特点:
 解耦/技术栈无关
微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。
 

你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在 

posted @ 2021-07-05 16:59  hhling  阅读(273)  评论(0)  编辑  收藏  举报