一篇看懂微前端架构

转载本文，转载请注明出处：微信公众号EAWorld前端开发无疑是程序员中比较辛苦的存在。作为前端开发，必须掌握Javascript、HTML、CSS这三个基础。Javascript作为互联网时代最重要的开发语言，由于其设计上的局限性，一直在进化。它经历了ES3、ES5、ES6（ECMAScript2015）……简单的CSS无法满足你复杂的需求。你需要Less/Sass/Sytlus来增强你??的CSS的功能。这些远不止一小部分，你还需要知道：需要有网络基础知识，HTTP/REST/GraphQL等常用API接口需要知道浏览器的兼容性，什么IE，Chrome，Safari、Firefox等。你需要知道应用程序是如何打包的，了解Webpack，以及gulp、Babel、Parcel、Browserify和Grunt是如何工作的。需要熟悉HTMLDOM操作，需要了解jquery、d3js等相关工具库的区别React、AngularJS、VueJS等框架及其优缺点，这三个框架互不兼容，各有千秋拥有庞大的生态。虽然NodeJS主要用于后端开发，但很多前端工具链都与此相关，例如Buildtoolsnpm,yarn...如果你的项目足够复杂，需要引入Monorepo，使用lerna等工具,nx等来管理多个项目的包和依赖。你需要掌握基本的前端测试工具和框架，比如：Jasmin、Jest、Selenium、Mocha等，最可怕的是，这些东西发展日新月异。当你忙于学习ES8、ES9、ES10的新特性时，我今天想和你分享的希望不是压倒性的。压死前端开发小骆驼的最后一根稻草——微前端。内容：1.什么是微前端2.为什么需要微前端，微前端有什么优势3.如何实现微前端架构4.运行时微前端的具体实现5.问题与不足一、微前端简介一、什么是微前端提到微前端，就离不开微服务。每个人都熟悉微服务。微服务允许通过松散耦合的代码库扩展后端架构。每个代码库都负责自己的业务逻辑并公开一个API，每个API都可以独立部署，并且每个都由不同的团队拥有和维护。前端架构从单体，到前后端分离，再到微服务，最后到现在的微前端流程如下图：微前端就是将微服务的架构引入到前端，其核心是要能够基于业务单元构建一个端到端的垂直架构，从而单个团队可以独立进行相关开发，同时具有相当大的灵活性，可以根据需要形成和交付应用。“微前端”一词最早出现在2016年底的ThoughtWorks技术雷达中。它将微服务的概念扩展到前端世界。当前的趋势是构建位于微服务架构之上的功能强大且功能强大的浏览器应用程序（也称为单页应用程序）。随着时间的推移，通常由单个团队开发的前端层会增长并变得更难维护。微前端背后的想法是将网站或Web应用程序视为独立团队拥有的功能组合。每个团队都有其关心和擅长的不同业务或任务领域。一个团队是跨职能的，并端到端地开发其功能，从数据库到用户界面。然而，这个想法并不新鲜。它与“单体系统”概念有很多共同之处。过去，类似的做法被称为“垂直系统的前端集成”。但微前端显然是一个更友好、更轻量级的术语。在微服务架构中，后台服务已经按照业务进行了分离，而前端仍然是单体搭建的，通过网关调用不同的后台服务。这个微服务的思路是相反的，这也导致你的后端团队按照业务划分，前端团队还是一个整体。微前端可以有效改善这一点。微前端的核心思想其实就是一个远程应用，包括组件/模块/包的运行时加载。如上图所示，对于用户来说，access是一个微前端容器（container），它加载运行在远程服务上的应用程序，并将这些远程应用程序作为组件/模块/包加载到本地浏览器中。组件是底层UI库的构建块模块是相应运行时的构建块包是依赖解析器的构建块微前端是建议的应用程序II的构建块。为什么需要微前端？它的优点是什么？在我们之前看到的微前端架构中，所有的前端还是一个整体，前端团队会依赖所有的服务或者后端API，前端开发会成为整个系统的瓶颈。使用微前端就是让前端业务从一个水平层转变为垂直应用的一部分，进入业务团队，解耦。那么微前端有什么好处，为什么要采用微前端架构呢？每个团队独立开发，互不影响，独立开发，独立部署，微应用仓库独立，前后端可独立开发，主框架部署后自动同步更新增量升级，当面对各种复杂的场景时，通常很难升级或重构现有系统的全技术栈，而微前端是实现渐进重构的一种很好的手段和策略。由于它是在运行时加载的，因此无需重建即可添加、删除或替换前端的各个部分。无论技术如何，每个团队都应该能够在不与其他团队协调的情况下选择和升级其技术堆栈。也就是说，A应用可以使用React，B应用可以使用Vue，大家可以通过同一个微前端加载。独立运行时，各个微应用的状态是隔离的，运行时状态是不共享的。隔离团队代码，即使所有团队都使用相同的框架，也不要共享运行时。构建自包含的独立应用程序。不要依赖共享状态或全局变量。建立团队命名空间以避免冲突并明确CSS、事件、本地存储和cookie的所有权。所以微前端和微服务的本质就是解耦。只有当应用程序达到一定规模时，它才开始变得更有意义。3、如何实现微前端架构微前端不是库，而是前端架构的一种设计思想。要实现微前端，本质上就是在运行时远程加载应用程序。有几种实现微前端的想法。从构建的角度来看，分为编译时构建微前端和运行时构建微前端两种：编译时微前端通常将第三方库中的组件作为包，在构建时构建time引入依赖。这种实现需要重新编译引入新的微前端，不够灵活。编译时微前端可以通过WebComponents、Monorepo等方式实现，其中Monorepo非常流行，常用的工具有nx、rush、lerna等。运行时微前端就是将微前端动态注入到容器中应用程序一次加载或通过延迟加载按需加载。引入新的微前端时，无需构建，可以在代码中动态定义加载。我眼中的微前端更多指的是这种在运行时加载的微前端，因为独立构建、部署和测试才是我们对“微”的定义。从前后端职责层次来看，可以从前端实现，也可以从后端实现。通过客户端框架实现微前端通常需要客户端工具支持（听起来很有道理），支持微前端客户端开发的实现工具有很多，包括：Piral、OpenComponents、qiankun、Luigi、Frint.js等等。其中，乾坤由蚂蚁金服开发。它也可以通过辅助库在客户端实现，它可以为共享依赖、路由事件或不同的微前端及其生命周期提供一些基础设施。下面的示例是通过导入映射或打包特定块等机制处理共享依赖项。相关工具有Webpack5ModuleFederation、Siteless、SingleSPA、Postal.js等。在服务端实现微前端不仅可以在客户端实现，类似于服务端渲染，也可以在服务端实现边。服务端微前端的配套工具有：Mosaic、PuzzleJs、Podium、Micromono等。好了说了这么多，相信你是发呆了。你是如何实现的？让我们抛开架构，看看如何实现它。四、运行时微前端iframe的具体实现iframe可以在html中嵌入另外一个html。以下是使用iframe实现微前端的示例：

您的浏览器不支持iframes。