- 综合排序
- 最热优先
- 最新优先
- 来自专栏超级架构师
【微前端架构】AWS 上的微前端架构
微前端架构将微服务开发原则引入前端应用程序。在微前端架构中，开发团队独立构建和部署“子”前端应用程序。这些应用程序由“父”前端应用程序组合而成，该前端应用程序充当容器来检索、显示和集成各种子应用程序。 带有微前端的微服务后端 微前端的好处 与单体前端相比，微前端具有以下优势： 独立工件：微服务开发的核心原则是工件可以独立部署，这对于微前端仍然适用。 运营开销：微前端应用程序不是管理单个前端应用程序，而是涉及为所有团队创建和管理单独的基础架构。 构建微前端 微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。 结论 微前端架构为前端应用程序引入了微服务开发的许多熟悉的好处。微前端架构还允许您管理小型独立组件，从而简化构建复杂前端应用程序的过程。
2.5K10编辑于 2022-03-08 - 来自专栏西岭老湿
微前端架构实战
可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。 这种架构目前有多种方案，都有利弊之处，但只要适用当前业务场景的就是好方案。 微前端并没有技术栈的约束。每一套微前端方案的设计，都是基于实际需求出发。 使用微前端架构就可以解决问题，在保留原有项目的同时，可以完全使用新的框架开发新的需求，然后再使用微前端架构将旧的项目和新的项目进行整合。 第2章 Systemjs模块化解决方案 Systemjs：https://github.com/systemjs/systemjs 在微前端架构中，微应用被打包为模块，但浏览器不支持模块化，需要使用 在 single-spa 框架中有三种类型的微前端应用： single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。
4.6K00发布于 2021-04-25 - 来自专栏Super 前端
前端架构--从入门到微前端
年中，自己做规划（2019Thinking(上) – 一个前端开发者的个人思考）时，考量了一段时间「微前端」，也关注到了《微前端的那些事儿》的文章，从而了解了作者「黄峰达」，也就购买了下面将要聊的书《 前端架构：从入门到微前端》 本书围绕前端架构的实施，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 设计：架构设计的模式，以及设计和制定前端工作流 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、 设计系统和前后端分离架构 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构 业务相关内容 微前端？目前预演中，对于目前我们思考的点： 业务边界如何划分？ 应用的标识化或者注册中心的方式如何考量？ 应用通信机制：嵌入业务的特定通信机制 或 剥离业务的通用通信机制？
1.2K21发布于 2020-05-28 - 来自专栏氧化先生的专栏
【架构拾集】 微前端：微应用化
微应用化即在开发和运行时，应用都是以单一、微小应用的形式存在。 微应用化与微前端架构相当的类似，它们在开发时都是独立应用，在构建时又可以按照需求单独加载。 如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看，微应用化就是微前端的一种实践。只是使用微应用化意味着：我们只能使用唯一的一种前端框架。 如果从框架不限的角度来定义，怕是离微前端有些远，不过大团队怕是不会想同时支持多个前端框架。 适用场景 为了方便后期我的查阅，我还是简单地写个相应架构的电梯演进。 关键因素 描述 对于 想拆解单体前端应用的团队 我们的架构 微应用化 是一个 类微前端架构 它可以 在开发环境将应用拆分成一个个的模块化应用，在构建时以单体的形式构建 但他不同于 微前端架构 它的优势是 使用 E2E 测试对于微前端或者微服务化架构来说，是一种特别有效的方式。唯一的问题可能是，它运行起来比较慢。
89330发布于 2018-08-21 - 来自专栏phodal
《前端架构：从入门到微前端》目录
本书是一本围绕前端架构的实施手册，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面，来帮助前端工程师更好地进行系统设计。 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。 微前端：引入 6 种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这 6 种微前端架构。 微前端架构 9.1.2 为什么需要微前端 9.2 微前端的技术拆分方式 9.2.1 路由分发式 9.2.2 前端微服务化 9.2.3 组合式集成：微应用化 9.2.4 微件化 9.2.5 前端容器：iframe 9.7 “微”害架构 9.7.1 微架构 9.7.2 架构的演进 9.7.3 微架构带来的问题 9.7.4 解决方式：可拆分式微架构 9.8 小结 第10章 微前端实战 10.1 遗留系统：路由分发 Components 方式 10.6.3 结合 Web Components 方式 10.7 小结 第11章 架构演进：演进式架构 11.1 更新 11.1.1 依赖和框架版本升级 11.1.2 语言版本升级
3.1K20发布于 2019-06-19 - 来自专栏code秘密花园
从微前端聊聊架构演进
就目前来看，微前端已经不是一个新话题了。随着越来越多的公司的深入研究，当前也提出了很多的解决方案。不过本文不是想要来介绍微前端，更想介绍项目如何一步步到达微前端架构的实际需求。 当然，也不排除有些项目在初期就需要微前端这样的架构，不过我一直相信，任何架构模式都是根据实际需求来构建的。 同时，微前端不会限制技术栈。某些特定场景下可能特定的技术栈有更好的生态。 当然，我认为微前端的最大的作用就是在遗留系统中做增量升级。面对已经上线几年的老项目，我们不可能一步到位就升级现有系统的技术栈。 微前端是我已知实现渐进式重构的最好方案。 因为公司目前在创业阶段，没有微前端的需求。所以对微前端更多的是概念解读，而并非落地实践。
76410发布于 2020-02-20 - 来自专栏超级架构师
「微前端架构」微前端-Angular风格-第2部分
移动到微前端方法是朝着正确的方向移动，因为应用程序越大，速度越小。 本文展示了一个使用Angular作为框架的解决方案，类似的解决方案也可以使用其他框架来实现。 本文:http://pub.intelligentx.net/micro-front-ends-doing-it-angular-style-part-2 讨论:请加入知识星球或者小红圈【首席架构师圈】
5.7K20发布于 2019-08-16 - 来自专栏前端博客
微前端学习笔记（1）：微前端总体架构概述，从微服务发微
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 微前端微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。 微服务架构，可以解耦后端服务间依赖。而微前端，则关注于聚合前端应用。热闹驱动开发。新的技术，既然很热闹，那么就学吧。微前端的实现，意味着对前端应用的拆分。 微前端的整体架构微前端部署平台目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，但是它们与MF有着本质的不同，那就是对“微前端”的定义：方案微的定义微前端的定义Module Federation 《微前端学习笔记（1）：微前端总体架构概述，从微服务发微》,请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Architecture/9029
1.2K10编辑于 2024-06-06 - 来自专栏EAWorld
一文读懂微前端架构
目录： 1.什么是微前端 2.为什么需要微前端，它有什么优势 3.如何实现微前端架构 4.运行时微前端的具体实现方式 5.微前端的问题和缺点 一、什么是微前端 而提到微前端就离不开微服务，大家对微服务都比较熟悉了 前端架构经历了从单体，到前后端分离，再到微服务，最终发展到现在的微前端的过程如下图所示： 微前端的思路是把微服务的架构引入到前端，其核心都是要能够以业务为单元构建端到端的垂直架构，使得单个的团队能够独立自主的进行相关的开发 使用微前端，就是要让前端业务从水平分层变为垂直应用的一部分，进入业务团队，剥离耦合。 那么微前端有什么好处，为什么要采用微前端架构呢？ 三、如何实现微前端架构 微前端不是一个库，是一种前端架构的设计思路，要实现微前端，本质上就是在运行时远程加载应用。 所有的架构都是取舍和权衡，这个世界上并不存在银弹，微前端架构和微服务一样也存在他的弊端，单体架构未必就差。 1.
3.7K70发布于 2021-05-27 - 来自专栏趣谈前端
微前端架构初探以及我的前端技术盘点
微前端架构概念的诞生及应用对于提供复杂应用服务的企业来说显然是一种机遇, 同样也是一种挑战.本文主要就微前端架构的概念和实现方案做一个总结和复盘,并且通过一个实际案例来实践微前端架构,希望能对同样有此需求的朋友们提供一些帮助和思路 你将收获 什么是微服务以及微服务能给企业带来什么 微前端架构概念及方案 umi下的微前端架构方案实战 一个程序员的技术复盘与展望 正文 在总结微前端架构之前,让我们来先看看微服务是什么. 1.什么是微服务以及微服务能给企业带来什么 . 2.微前端架构概念及方案 2.1 理解微前端架构 上面简单介绍了一下微服务架构,接下来我们进入主题,来聊聊微前端. 2.2.2 基于MPA + iframe + Webpack实现的微前端架构 基于MPA + iframe + Webpack实现的微前端架构实现和上面介绍的传统架构实现类似，只不过采用了更新的技术栈， 基umi + qiankun实现的微前端架构 目前市面上也有非常成熟的微前端架构方案，比如single-spa，之前的美团外卖微前端架构和蚂蚁金服基于single-spa开发的微前端架构qiankun（
1.3K10发布于 2020-04-07 - 来自专栏Teobler的开发日记
前端架构演进 - 从单体到微前端（理论篇）
本文将从一个我最近经历的项目出发，讲解我们是如何在两周时间内将一个单体前端应用演化为一个微前端应用的。 为什么有这次演进 [why] 不是为了解决问题胡乱上莫名其妙的解决方案就是耍流氓。 微前端和微服务一样都是为了解决问题而诞生的解决方案，先看看你的项目是不是也遇到了这些问题，再决定做不做吧。 在这样的业务场景下在项目开始之初后端很自然地选择了微服务作为业务解耦和降低系统复杂度的解决方案，但前端因为考虑不周加上客户比较保守并没有采取微前端的解决方案，而是以分文件目录的方式尝试区分各个子系统。 ，每一次子系统的部署需要对整个应用进行打包，同时如果一个应用挂了，将会影响整个系统，微前端可以在这件事上做得更好 演进发生的时机 [when] 架构需要发生改变往往是因为开发人员发现当前的架构没办法应对业务的发展和变化 技术选型 [selection] 这个部分不一定每一次演进都会有，在我们的这个案例中，因为我们需要将一个单体应用拆分成微前端，为了减少拆分的工作量，增加项目的可维护性，我们需要挑选一个合适的微前端框架来解决这个问题
82701发布于 2021-04-25 - 来自专栏编程微刊
2020 非常火的 11 个微前端框架
微前端将前端整体分解为许多更小、更易管理的片段。 本文中，作者收集了 11 个最杰出的微前端构建工具，并提供了进一步学习的链接和视频。 将单体后端分解成为微服务之后，后端开发流程已在效率和规模上取得了显著进步。 然而，当今大多数前端应用程序架构仍然是单体式的，使得前端开发流程很难加速和扩展。 微前端的想法是将前端单体分解为许多更小、更易管理的片段。 这个架构释放了构建微前端的巨大潜力。你可以在如下文章中阅读更多信息和查看示例。 项目链接 https://www.mosaic9.org/ 11. PuzzleJS PuzzleJS 是“用于可扩展和快速建站的微前端框架”。你可以使用它创建相互对话的网关和店面项目。
2.5K22发布于 2020-11-26 - 来自专栏开发者技术前线
2020 非常火的 11 个微前端框架
微前端将前端整体分解为许多更小、更易管理的片段。 本文中，作者收集了 11 个最杰出的微前端构建工具，并提供了进一步学习的链接和视频。 将单体后端分解成为微服务之后，后端开发流程已在效率和规模上取得了显著进步。 然而，当今大多数前端应用程序架构仍然是单体式的，使得前端开发流程很难加速和扩展。 微前端的想法是将前端单体分解为许多更小、更易管理的片段。 这个架构释放了构建微前端的巨大潜力。你可以在如下文章中阅读更多信息和查看示例。 项目链接 https://www.mosaic9.org/ 11. PuzzleJS PuzzleJS 是“用于可扩展和快速建站的微前端框架”。你可以使用它创建相互对话的网关和店面项目。
2K20发布于 2020-11-23 - 来自专栏闲余说
架构设计 11-可扩展架构之微内核架构
导读：《架构设计》系列为极客时间李运华老师《从0开始学架构》课程笔记。本文为第十一部分。主要介绍了如何面向功能拆分架构，首先介绍了微内核架构的基本架构设计，以及几种常见架构的实现与特点。 最后分享了微内核架构典型开源规则引擎 JBoss Drools。 现在我们谈论 OSGi，已经和嵌入式应用关联不大了，更多是将 OSGi 当作一个微内核的架构模式。 逻辑架构 模块层（Module 层） 模块层实现插件管理功能。 规则引擎架构 规则引擎从结构上来看也属于微内核架构的一种具体实现，其中执行引擎可以看作是微内核，执行引擎解析配置好的业务流，执行其中的条件和规则，通过这种方式来支持业务的灵活多变。 实现 插件管理 规则引擎中的规则就是微内核架构的插件，引擎就是微内核架构的内核。规则可以被引擎加载和执行。 规则引擎架构中，规则一般保存在规则库中，通常使用数据库来存储。
1.1K20编辑于 2022-08-19 - 来自专栏前端迷
爱奇艺号微前端架构实践
近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 容器应用 首先需要一个容器应用，这个容器应用需要有最基本的代码架构，比如Vue、主路由、Vuex及其他基础的通用代码，但需要将这些通用代码中任何业务相关的部分剥离。 除了基本的Vue启动应用等功能，微前端容器的架构逻辑需要做到下面几点： 1、将微前端模块需要的通用代码绑定至全局函数； 2、基于请求的url获取相对应的微前端模块部署的js manifest文件地址列表 - 微前端模块渲染 容器应用中最重要的部分就是如何获取并渲染微前端模块。 微前端模块 完整的微前端模块可以代表一个单独的业务，其中可以包括一个或多个子模块，比如一个关于收入的微前端模块，其中包括收入概览、收入图表、收入按天列表等多个子模块，这就要求每个微前端模块都有如下功能：
1.1K10发布于 2020-02-21 - 来自专栏博文视点Broadview
电子书丨《前端架构：从入门到微前端》
▊《前端架构：从入门到微前端》 / 黄峰达 著 电子书售价：39.5元 2019年6月出版 本书是一本围绕前端架构的实施手册，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 本书通过系统地介绍前端架构世界的方方面面，来帮助前端工程师更好地进行系统设计。 前端架构包含以下五部分内容。 设计：讲述了架构设计的模式，以及设计和制定前端工作流。 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系。 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构。 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构。 本书适合想要成为优秀前端开发工程师（初中级），或致力于构建更易于维护的系统架构的开发人员、技术主管、软件架构师和软件项目经理等。 ---- ▼ 点击阅读原文，立刻下单！
50020编辑于 2023-05-19 - 来自专栏程序员成长指北
爱奇艺号微前端架构实践
前言 近来，微前端的概念非常火爆，那么什么是微前端架构？ 微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 容器应用 首先需要一个容器应用，这个容器应用需要有最基本的代码架构，比如Vue、主路由、Vuex及其他基础的通用代码，但需要将这些通用代码中任何业务相关的部分剥离。 除了基本的Vue启动应用等功能，微前端容器的架构逻辑需要做到下面几点： 1、将微前端模块需要的通用代码绑定至全局函数； 2、基于请求的url获取相对应的微前端模块部署的js manifest文件地址列表 - 微前端模块渲染 容器应用中最重要的部分就是如何获取并渲染微前端模块。
1.3K32发布于 2020-03-03 - 来自专栏一道题做一宿
基于Webpack5实现微前端架构
前言 最近这段时间微前端这个概念越来越被提及，它采用了微服务的相关理念，我们可以把一个应用拆分成多个可以互不依赖可以独立开发并单独部署的模块，然后在运行时把它们组合成一个完整的App。 从Webpack5开始，已经内置了对微前端开发的支持，它们提供了一个新的功能叫Module Federation（我也不知道该怎么翻译这个术语会比较恰当），提供了足够的能力来让我们实现微前端开发。 我们会实现一个简单的App，然后把它通过webpack改造成微前端的形式。 我们开始吧！ 这次所有配置都由我们来手动完成。 接下来我们来把它改造成微前端的形式，把Header做成单独的模块，然后其它的做成另外一个模块，这时候就要用到ModuleFederationPlugin了。 今天我们仅仅用Module Federation实现了一个小demo，关于微前端跟webpack的管理都不是一篇文章就能够说得清楚的，还有很多事情可以聊，咱们后面再分别单独展开讲讲，Happy coding
1.1K20发布于 2021-08-13 - 来自专栏云计算linux
前端架构师之11_JavaScript事件
用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。
1.7K10编辑于 2024-12-13 - 来自专栏学习猿地
Web前端学习 第11章 微信开发2 微信登录
微信登录可以分为两种情况，一种是网站的扫码登录，另一种是在微信浏览器中直接登录，本节我们就讲解如何在自己的网站上接入微信登录功能。 网站微信扫码登录流程 网站跳转到以下链接：注意连接中的两个参数 appid：微信开发平台提供的appid redirect_url：用户扫码登陆后跳转的地址 https://open.weixin.qq.com 本节我们讲解微信内的授权登录，也就是说，如果用户使用的是微信浏览器，那么用户不用使用扫码功能，只要点击一个授权登录的按钮，就能实现微信登录了，对用户来说操作简单了很多。 四、接口调用实现微信登录 在微信浏览器内登录与扫码登录的唯一区别就是第一步不同，扫码登录需要用户跳转到一个微信服务器提供的有二维码的页面以便获取code参数，而微信浏览器登录，可以直接让用户访问下面的地址 openid获取用户信息 完成微信扫码登录
1K20发布于 2020-07-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号