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

何为微前端,其如何运作

作者: 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 微前端方案实践及总结

相关文章

  • 何为微前端,其如何运作

    前言 我们项目从年初开始使用微前端,我也从“这个是咋用的?哎呀,报错了,不会搞?”的抓狂,经过一年慢慢地打磨,到如...

  • 主力操盘手法

    主力资金运作如何利用基本面、消息面、技术面达到目的 先说说何为“主力资金”,主力资金从本质上是一种资本,其根本目的...

  • 2018-09-21

    如何为大,至微之极。

  • 吴长江:如何运作图书出版和价值开发

    如何来运作自己的图书? 图书能带来哪些价值开发? 一、如何运作? 通过社群众筹,微课推荐,线下沙龙活动,线下培训,...

  • 基于Umi探索微前端以及其融合方案

    写在前面 “微前端”这个概念已经在前端圈火了很长一段时间了,关于什么是微前端,微前端干了什么,其和传统iframe...

  • 微信商城如何运作

    微信商城系统越来越火,从淘宝平台到微商,移动互联网购物时代,消费者行为习惯的变化, 是不是因微信好友太少,为了如何...

  • 金钱的心理学(完结篇)

    18. 否认“你认为”的世界应该如何运作和世界“实际”如何运作之间的不一致,尽管涉及金钱的一切都有其固有的复杂性,...

  • SingleSPA + Create React App + A

    前言 关于微前端的相关概念,这里就不再阐述。 目前基于 single-spa 来构建微前端应用是主流的实现,但是其...

  • 前端-浏览器如何运作的

    前端为什么要了解浏览器工作原理? 写出更好的代码和提供更好的用户体验 浏览器结构 用户界面浏览器引擎渲染引擎(可以...

  • Vue + qiankun 快速实现前端微服务

    本文介绍 Vue 项目如何实现前端微服务 一、前言 什么是微前端 Techniques, strategies a...

网友评论

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

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