一文读懂微前端架构

最新推荐文章于 2024-06-18 08:45:24 发布

EAWorld

最新推荐文章于 2024-06-18 08:45:24 发布

阅读量840

点赞数 1

文章标签： vue 编程语言 java 大数据 javascript

本文链接：https://blog.csdn.net/weixin_45443931/article/details/117004286

版权

转载本文请注明出处：微信公众号EAWorld

前端开发在程序猿中无疑是一个比较苦逼的存在，作为一个前端开发，你必须要掌握Javascript，HTML，CSS这三大基础。Javascript作为网络时代最为重要的开发语言，由于其设计上的限制，一直在演进，经历了ES3，ES5，ES6（ECMAScript 2015）... ... 而简单的CSS也无法完成你复杂的需求，你需要Less/Sass/Sytlus来增强你的CSS的功能。这些还远远只是一小部分，你还需要了解：

你需要有网络的基本知识，和常见的API接口例如HTTP/REST/GraphQL
你需要知道浏览器的兼容性，什么IE，Chrome，Safari，Firefox，等等
你需要知道应用如何打包，了解 Webpack ，还有gulp, Babel, Parcel, Browserify, and Grunt等是怎么工作的
你需要熟悉HTML的DOM操作，和相关的工具库例如jquery和d3js
需要了解不同的框架和他们的优缺点例如React，AngularJS和VueJS，这三大框架都不兼容，而且各自都有自己庞大的生态
虽然NodeJS主要用于后端开发，但是很多前端的工具链和这个相关，例如构建工具 npm，yarn ...
如果你的项目足够复杂，你需要引入Monorepo，使用例如lerna，nx等工具来管理多个项目的包和依赖
你需要掌握基本的前端测试工具和框架，例如：Jasmin，Jest，Selenium，Mocha等等

最可怕的是，这些东西都在飞快地发展和变化中，当你正忙于学习ES8，ES9，ES10的新特性的时候，今天我要和大家分享的希望不是压死前端开发小骆驼的最后一根稻草--微前端。

目录：

1.什么是微前端

2.为什么需要微前端，它有什么优势

3.如何实现微前端架构

4.运行时微前端的具体实现方式

5.微前端的问题和缺点

一、什么是微前端

而提到微前端就离不开微服务，大家对微服务都比较熟悉了，微服务允许后端体系结构通过松散耦合的代码库进行扩展，每个代码库负责自己的业务逻辑，并公开一个API，每个API均可独立部署，并且各自由不同的团队拥有和维护。

前端架构经历了从单体，到前后端分离，再到微服务，最终发展到现在的微前端的过程如下图所示：

微前端的思路是把微服务的架构引入到前端，其核心都是要能够以业务为单元构建端到端的垂直架构，使得单个的团队能够独立自主的进行相关的开发，同时又具备相当的灵活性，按需求来组成交付应用。

“微前端”一词最早于2016年底在ThoughtWorks 技术雷达中提出的。它将微服务的概念扩展到了前端世界。当前的趋势是构建一个功能强大且功能强大的浏览器应用程序（也称为单页应用程序），该应用程序位于微服务架构之上。随着时间的流逝，通常由一个单独的团队开发的前端层会不断增长，并且变得更加难以维护。

微前端背后的想法是将网站或Web应用程序视为由独立团队拥有的功能的组合。每个团队都有自己关心和专长的不同业务或任务领域。一个团队是跨职能的，并且从数据库到用户界面，端到端地开发其功能。

但是，这个想法并不新鲜。它与“单体系统”概念有很多共同点。在过去，类似的方法被称为“垂直系统的前端集成”。但是微前端显然是一个更友好，更轻巧的术语。

在微服务的架构中，后台的服务已经按照业务进行了分离，而前端仍然是一个单体构建，通过网关来调用不同的后台服务。这个微服务的思路是相违背的，这也就造成了你的后端团队是按照业务分割的，但是前端团队仍然是一个整体。微前端可以有效地改进这一点。

微前端的核心思路其实是远程应用程序，包含组件/模块/包的运行时加载。