美文网首页
何为微前端,其如何运作

何为微前端,其如何运作

作者: DoNow | 来源:发表于2021-01-18 00:19 被阅读0次

    前言

    我们项目从年初开始使用微前端,我也从“这个是咋用的?哎呀,报错了,不会搞?”的抓狂,经过一年慢慢地打磨,到如今对微前端有比较完善的认知。

    那么,到底什么是微前端? 为什么要使用微前端? 使用微前端有哪些好处?怎么使用微前端?微前端到底是如何运作的?

    接下来,我将以qiankun框架为例进行废话(解释说明)

    一、什么是微前端?

    前端你可能知道,但是加个微字,你可能就糊涂了?
    其实,微前端的理念源于微服务的概念。微服务是一种软件架构风格
    就是将尽量耦合性低的功能区块,通过模块化的方式组合成复杂的大型应用。所以,微前端就是学习微服务的架构风格,将这种架构风格应用到浏览器端。

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

    技术角度翻译:微前端就是将单一的巨石应用拆分成各个不同模块功能的前端web应用,通过模块化组合,形成一个大型复杂的web应用程序。同时,保证各个功能模块还能独立开发,独立部署,独立运作。

    通俗说法:中国版图那么大,不同区域,不同天气,不同习俗,虽说存在差异,但还是能根据一定规律,划分出不同省份(表示不同的页面功能模块),让每个省份有独立的管理团队和机制(表示不同的开发团队能使用不同的技术栈,拥有不同的迭代进度)。每个省份的独立管辖,组合成一个有序强大的中国。

    因此,微前端不是单纯的前端框架或者工具,而是一套架构体系。


    二、为什么使用微前端?有啥好处?

    1. 拆分巨石应用:单页面应用(SPA)是前端领域非常流行的项目形态之一,而随着时间的推移以及应用功能的丰富,单页应用变得不再单一而是越来越庞大也越来越难以维护,往往是改一处而动全身,由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分,并随之解耦,每个部分可以单独进行维护和部署,提升开发和打包效率

    巨石应用存在的问题

    2. 提高多团队协作的效率:比如像我们项目团队,主要是集成公司各个平台的功能,提供更便捷的一站式服务平台。所以,多团队协作开发已经成为常态,但是这会出现另一个问题,就是每个团队有不同的迭代开发进度,所以使用微前端可以让每个团队能独立开发、维护和部署自己的模块子应用,而不会影响别的团队代码。

    3. 整合历史工程系统:对于一些使用老框架(比如 jquery, Backbone.js, Angular.js 1)开发的系统,这些让程序员头壳疼的系统,迁移新框架成本高,但又无法抛弃。所以,微前端来啦!!!因为它有一个重要的特性技术栈无关,就是任意技术栈的应用均可使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。

    4. 解决网页内嵌问题:我们团队平台是一个集成平台,需要将公司的其他平台页面内嵌进我们的页面,如果使用iframe会出现体验效果不佳、无法共享上下文、弹窗无法页面居中等问题。但是微前端的子应用嵌套提供了很好的解决方式。

    四、目前有哪些微前端框架?

    • Mooa:基于Angular的微前端服务框架。
    • Single-Spa:最早的微前端框架,兼容多种前端技术栈。
    • Qiankun:基于Single-Spa,阿里系开源微前端框架。
    • Icestark:阿里飞冰微前端框架,兼容多种前端技术栈。
    • Ara Framework:由服务端渲染延伸出的微前端框架。

    三、怎么使用微前端?

    官方提供了很详细的文档,而且使用方法也很简单
    https://qiankun.umijs.org/zh/guide/getting-started

    四、微前端是怎么运作的?

    1)微前端提供了哪些支持

    2)以qiankun为例,说明内部原理

    参考链接

    官方文档
    微前端-最容易看懂的微前端知识
    Why Not Iframe
    qiankun 微前端方案实践及总结

    相关文章

      网友评论

          本文标题:何为微前端,其如何运作

          本文链接:https://www.haomeiwen.com/subject/bcgpaktx.html