- 综合排序
- 最热优先
- 最新优先
- 来自专栏智能时刻
「微前端架构」微前端-Angular风格-第2部分
移动到微前端方法是朝着正确的方向移动，因为应用程序越大，速度越小。 本文展示了一个使用Angular作为框架的解决方案，类似的解决方案也可以使用其他框架来实现。 原文：https://medium.com/outbrain-engineering/micro-front-ends-doing-it-angular-style-part-2-1393ced4ceab 本文:http://pub.intelligentx.net/micro-front-ends-doing-it-angular-style-part-2 讨论:请加入知识星球或者小红圈【首席架构师圈】
6.2K20发布于 2019-08-16 - 来自专栏前端开发中的事
微前端之qiankun微前端
什么是微前端: 微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。 微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。 微前端的特点： 任意的JS框架都可以兼容使用，接入简单。 entry: '//localhost:8081', // 微应用的端口，同时微应用需要启动 container: '#app2, activeRule: '/mydemo', 配置参考https://qiankun.umijs.org/ 配置项细节和踩坑 微应用需要启动 微应用需要独立的启动，且配置的端口和主应用注册的微应用端口一致 主应用 [yi2phmv72c.png]
3.2K70发布于 2021-04-01 - 来自专栏学习猿地
Web前端学习 第11章 微信开发2 微信登录
微信登录可以分为两种情况，一种是网站的扫码登录，另一种是在微信浏览器中直接登录，本节我们就讲解如何在自己的网站上接入微信登录功能。 接口如下所示： https://api.weixin.qq.com/sns/oauth2/access_token? 本节我们讲解微信内的授权登录，也就是说，如果用户使用的是微信浏览器，那么用户不用使用扫码功能，只要点击一个授权登录的按钮，就能实现微信登录了，对用户来说操作简单了很多。 四、接口调用实现微信登录 在微信浏览器内登录与扫码登录的唯一区别就是第一步不同，扫码登录需要用户跳转到一个微信服务器提供的有二维码的页面以便获取code参数，而微信浏览器登录，可以直接让用户访问下面的地址 https://open.weixin.qq.com/connect/oauth2/authorize?
1.2K20发布于 2020-07-09 - 来自专栏智能时刻
【微前端架构】AWS 上的微前端架构
微前端架构将微服务开发原则引入前端应用程序。在微前端架构中，开发团队独立构建和部署“子”前端应用程序。这些应用程序由“父”前端应用程序组合而成，该前端应用程序充当容器来检索、显示和集成各种子应用程序。 图 2. 带有微前端的微服务后端 微前端的好处 与单体前端相比，微前端具有以下优势： 独立工件：微服务开发的核心原则是工件可以独立部署，这对于微前端仍然适用。 微前端挑战 相反，微前端提出了以下挑战： 父/子集成：微前端引入了确保父应用程序以与单体应用程序相同的一致性和性能显示子应用程序的任务。这一点将在下一节中进一步讨论。 构建微前端 微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。 结论 微前端架构为前端应用程序引入了微服务开发的许多熟悉的好处。微前端架构还允许您管理小型独立组件，从而简化构建复杂前端应用程序的过程。
2.7K10编辑于 2022-03-08 - 来自专栏京东技术
微前端概述
Tech 导读 本文由浅到深地对微前端进行了概括性介绍，读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能，以及微前端的适用场景。 推荐阅读微前端框架之single-spa 从入门到精通 2.qiankun：qiankun是一个基于single-spa的微前端实现库。HTML entry接入方式。 《前端架构从入门到微前端》一书中，将微前端的实现方案分为六种：路由分发、前端微服务化、微应用、微件化、iframe、Web Components。 2.CSS隔离： 命名约定、自动Scope、Shadow DOM、自动卸载、弹窗遮罩。 4.6异常处理 对各种异常进行统一处理。 05 微前端的适用场景 概括来讲，微前端主要解决了两个问题： 1.应用随着迭代变得越来越大，最终难以维护。 2.相对独立的几个应用需要融合为一个应用。
2.2K40编辑于 2022-03-17 - 来自专栏一Li小麦
微前端随记
微前端 大型组织的组织结构，软件架构在不断变化。导致组织和应用不断膨胀，从而映射到软件架构中。 移动优先->App平台（One App）->中台战略->...? 微前端是一种类似微服务的架构。是微服务理念在浏览器端的应用实践。即将原来由单页面前端应用由单一的单体，转变微多个小型前端应用的聚合体。每个子项目可以独立开发部署，也可以进行并行开发。 微前端的核心思想就是（拆）分（自）治。达到降低维护成本的目的。以下是它的三个基本概念： 自治：不同应用由不同团队维护，但遵循统一的接口规范或框架以便于集成。因此彼此之间不存在依赖。 那么什么时候考虑做微前端？ •遗留系统的迁移：最重要的原因。正在赚钱的东西没有理由毁掉重来。人生苦短，尽量不要重构了。•聚合前端应用：这是前端特有的需求——后台使用微服务，希望的是解耦服务之间的依赖。 ——微前端就是一种“热闹”的技术。因此，在采用之前，需要看看看别人的失败经验。对于未来，仍然有很多路要走。
53510编辑于 2022-03-29 - 来自专栏微信小程序栏目
微前端——理论
***一、微前端1、什么是微前端微前端类似于微服务，它将微服务的理念应用于浏览器端。（1）微服务：把后端的功能进行了拆分，使用统一的网关进行调用。 方便独立部署和维护升级， 不同的微服务，可以使用不同的技术去实现图片（2）微前端：有统一的加载器，各个子应用，也可以使用不同的框架。但是同一团队中，技术栈相同有利于管理和协作，方便子应用整合。 图片***对前端应用进行拆分，将不同的功能按照不同的维度拆分成多个子应用，实现应用的自治。微前端的核心在于拆, 拆完后再合！ ，再接入主应用2、为什么使用微前端（1）老代码迁移之前的老应用，已经稳定运行了，并且没有新功能，没有理由去重写这一整套，这个时候就可以使用微前端，直接整合到新应用中（2）前端聚合现在有很多这种情况，一家公司会提供一系列的产品 优点：通用度高缺点：设计难度大例如：用户想要访问A应用，不需要加载其他应用，直接可以打开4、微前端拆分方式不合理的采用微前端，可能会带来很多问题，如前端基础设施不完善，会导致各个应用有大量的重复代码。
2.8K130编辑于 2022-10-06 - 来自专栏万丈高楼平地起
微前端乾坤
1.什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 微前端不是单纯的前端框架或者工具，而是一套架构体系， qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。 2.qiankun 框架的应用 主应用中操作 1. 在主应用中安装 qiankun npm i qiankun -S //yarn add qiankun 2. , activeRule: "/yourActiveRule2", }, ]); start(); b.手动加载微应用： //手动加载 import { loadMicroApp } from
1.9K20编辑于 2022-03-09 - 来自专栏柒八九技术收纳盒
理解微前端
今天我们来谈谈一个比较时髦的概念- 「微前端」。 「微前端」是一套用于「组织大型前端应用的指导规范」。是受后端「微服务」启发而发展而来。 接下来，我们就从微前端解决了哪些现存前端问题，并在解决这些问题的过程中做出了哪些取舍和权衡。 话不多说，我们开始。 微前端试图解决什么问题？ 有一些底层技术，如「webpack模块联盟」，使微前端成为可能。还有像single-spa这样的流行框架，为实现微前端做出了不小的努力。 这可能是设计上的问题，因为微前端并不指向一个特定的通用实现。这也是为什么对微前端的用途会让人感到困惑的原因之一。 而，「微前端」都是为了「解决组织问题，而不是性能问题」。它被用在由许多团队合作的大型SPA的背景中。 微前端的潜在问题 ❝微前端有着崇高的目标，「旨在解决真正的大型项目组织问题」。
66720编辑于 2022-08-25 - 来自专栏grain先森
前端-微信小程序开发(2)：小程序基本介绍
，于是我们将原来那套还算复杂的业务拿出来： 【组件化开发】前端进阶篇之如何编写可维护可升级的代码（https://www.cnblogs.com/yexiaochai/p/4876099.html）（有些晦涩有些乱 CSS类似，一般认为是CSS的子集 因为小程序中UI组件都是Native实现，所以小程序直接手起刀落压根放弃让我们使用HTML容器，这样做我觉得有个好处是： 为了更好的限制，我之前也在做Hybrid乃至前端框架 我们之前在这里研究过自定义标签的做法：从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
<view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2< > </view> </view> </view> Page({ data: { background: ['demo-text-1', 'demo-text-2' 2.3K30发布于 2019-03-29 - 来自专栏前端自习课
【微前端】1443- 将微前端做到极致-无界方案
本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。 为什么还要造微前端框架 目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这三个微前端方案： qiankun 方案 qiankun 方案是基于 single-spa 的微前端方案。 速度快 无界微前端非常快，主要体现在首屏打开快、运行速度快两个方面。 无界微前端不仅能够做到静态资源的预加载，还可以做到子应用的预执行。
7.1K32编辑于 2022-11-15 - 来自专栏学习猿地
【融职培训】Web前端学习 第11章 微信开发2 微信登录
微信登录可以分为两种情况，一种是网站的扫码登录，另一种是在微信浏览器中直接登录，本节我们就讲解如何在自己的网站上接入微信登录功能。 接口如下所示： https://api.weixin.qq.com/sns/oauth2/access_token? 本节我们讲解微信内的授权登录，也就是说，如果用户使用的是微信浏览器，那么用户不用使用扫码功能，只要点击一个授权登录的按钮，就能实现微信登录了，对用户来说操作简单了很多。 四、接口调用实现微信登录 在微信浏览器内登录与扫码登录的唯一区别就是第一步不同，扫码登录需要用户跳转到一个微信服务器提供的有二维码的页面以便获取code参数，而微信浏览器登录，可以直接让用户访问下面的地址 https://open.weixin.qq.com/connect/oauth2/authorize?
89120发布于 2020-07-13 - 来自专栏深度学习与python
微前端的未来
最后，我会分享下 2022 年我将关注微前端生态系统的哪些方面。 增加事先设计 微前端架构的主要挑战之一是回答这样一个问题：微前端有多 "微"？ 许多组织都面临这个问题。 微前端通信 当同一个视图中有多个微前端时，它们有时候需要相互通信。 在我为设计微前端而创建的心理模型中，我建议微前端之间使用发布 - 订阅模式进行通信，严格执行微前端之间的边界，避免或至少减少设计时耦合，让团队有更大的自主性。 想象一下，一个微前端基础设施会自动把自己注册到一个发现服务中，而 UI 设计器会从发现服务中检索微前端，而不是直接与微前端进行点对点的联系。 查看英文原文： https://betterprogramming.pub/the-future-of-micro-frontends-2f527f97d506?
71920编辑于 2022-06-13 - 来自专栏西岭老湿
微前端架构实战
微前端并没有技术栈的约束。每一套微前端方案的设计，都是基于实际需求出发。 微前端的使用场景 拆分巨型应用，使应用变得更加可维护 兼容历史应用，实现增量开发 1-2 微前端的优势 同步更新 对比了npm包方式抽离，让我们意识到更新流程和效率的重要性。 第2章 Systemjs模块化解决方案 Systemjs：https://github.com/systemjs/systemjs 在微前端架构中，微应用被打包为模块，但浏览器不支持模块化，需要使用 , 微前端应用名称 "@组织名称/应用名称" 2. app: 函数类型, 返回 Promise, 通过 systemjs 引用打包好的微前端应用模块代码 (umd) 3. activeWhen from 'react' function about() { return (
<h2>快乐星球就是学习微前端</h2>4.9K00发布于 2021-04-25来自专栏WebJ2EE【微前端】：Why Not Iframe
为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。 但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。 如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。 其中有的问题比较好解决(问题1)，有的问题我们可以睁一只眼闭一只眼(问题4)，但有的问题我们则很难解决(问题3)甚至无法解决(问题2)，而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题，最终导致我们舍弃了
1.4K10编辑于 2022-03-30来自专栏Dawnzhang的开发者手册微前端建设方案
2、应用微前端，可以集成主框架运行，可以独立运行。 3、应用微前端，不能强依赖主框架的基础文件。 2.4 总体设计 第3章 架构设计 3.1 微前端架构设计 实现“1+1+N模式”。 第4章 研发清单 4.1 研发清单 一 前端架构 1 主架构前端 2 测试Demo前端 3 主应用前端（IBPS ） 二 应用微前端 1 公文办理前端 2 通知公告前端 3 会议前端 4 工作量（人天） 1 主架构前端 7 2 测试Demo前端 14 3 主应用前端（IBPS） 7 二 应用微前端 1 公文办理前端（重构） 60 2 通知公告前端 20 3 会议前端 30 4 规范性前端 20
90841编辑于 2022-05-10来自专栏前端技术研究和应用浅析微前端技术
CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。 MicroApp 提供了 JS 沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补齐等一系列完整的功能MicroApp 没有任何依赖，这赋予了它小巧的体积和更高的扩展性MicroApp 的实现方式其实就是2个概念 微前端的适用场景微前端的适用场景中大型项目建设微前端项目的初衷就是为未来可能的扩展开发提供可能，因此微前端非常适合具有多个团队维护的大型项目。 如果你把生产力放在首位，可以考虑 微前端 架构微前端的劝退场景业务边界不清晰的项目，在发起一个微前端项目前，你需要对该项目的业务领域及分工有着全面的了解。 小型项目，在评估是否需要采用微前端架构前，你需要对平台的规模有大概的认知，不要为了纸面上的优势而强行采用微前端方案，业界还有很多其他小而美的框架可以尝试。微前端是前端发展的必然阶段。
2.1K60编辑于 2023-04-14来自专栏Super 前端前端架构--从入门到微前端
年中，自己做规划（2019Thinking(上) – 一个前端开发者的个人思考）时，考量了一段时间「微前端」，也关注到了《微前端的那些事儿》的文章，从而了解了作者「黄峰达」，也就购买了下面将要聊的书《 前端架构：从入门到微前端》 本书围绕前端架构的实施，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 设计：架构设计的模式，以及设计和制定前端工作流 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、 设计系统和前后端分离架构 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构 业务相关内容 微前端？目前预演中，对于目前我们思考的点： 业务边界如何划分？ 应用的标识化或者注册中心的方式如何考量？ 应用通信机制：嵌入业务的特定通信机制 或 剥离业务的通用通信机制？
1.3K21发布于 2020-05-28来自专栏程序那些事儿微前端那些事儿
什么是微前端 根据Micro-Frontend 官网的定义，微前端是将网站或者 web 应用程序视为由独立团队拥有的功能组合。 构建微前端应用程序有不同的方法，但主要我们可以将它们分为四个重要方面: 路由微前端 组成微前端 微前端通信 定义微前端 微前端的组合 微前端由客户端，服务器端，边缘测组合而成。 微前端之间的通信 与路由一样，微前端之间的通信也取决于组合的类型。当我们在相同或不同页面上使用多个微前端时，我们总是希望可以和其他微前端用户交互。 不同微前端之间的沟通可能不是那么微不足道，尤其是当有不同的团队构建它们时。为了维持独立部署的原则，我们需要确保每个微前端都不知道其他微前端，即使它们是水平分割的并且是同一页面的一部分。 这些自定义事件通过一个常见的类似对象的窗口进行调度，以便所有微前端都可以使用它。 定义微前端 在微前端我们可以使用不同的技术栈，我们可以将vue和react进行结合使用。
70930编辑于 2023-03-07来自专栏coding个人笔记做个微前端demo
之前已经分享过微前端，至于落地还是不落地就看公司和项目了，今天基于微前端做了个小demo，分享一下。 可以去qiankun官网看看，包括微前端核心设计理念、为什么不是ifram和快速上手及一些问题都很清楚。
1.3K30发布于 2020-09-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号